Add image and dynamic text to a LinkButton

Question

I have a Horizontal DataList of several LinkButtons. button represents a stage that can be whether "COMPLETED" (green image) or "NOT STARTED" (grey image). In addition, each such button must contain some text and it's stage number, for example: "STAGE 1", "STAGE 2" etc...

I found several solutions but none of them answered both of my demands - the image and the text.

Does anybody have a good and elegant solution on that matter?

Here's the html code:

<asp:DataList ID="dlStatuses" runat="server" RepeatDirection="Horizontal" 
        onitemdatabound="dlStatuses_ItemDataBound" 
        onitemcommand="dlStatuses_ItemCommand">
    <HeaderTemplate>
        <table border="0" cellpadding="0" cellspacing="0">
    </HeaderTemplate>
    <ItemTemplate>
        <asp:LinkButton ID="linkBtnStatuses" runat="server">
            <asp:Image ID="linkButtonImage" runat="server" ImageAlign="Middle" BorderStyle="None"/>
        </asp:LinkButton>
    </ItemTemplate>
    </asp:DataList>

and the code behind:

protected void dlStatuses_ItemDataBound(object sender, DataListItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        DataRow row = (e.Item.DataItem as DataRowView).Row;

        #region Place Icons

        int StatusLevel = int.Parse(row["LevelID"].ToString());

        LinkButton lnkButton = (e.Item.FindControl("linkBtnStatuses")) as LinkButton;
        Image img = (e.Item.FindControl("linkButtonImage")) as Image;

        //lnkButton.Text = " Stage No. " + StatusLevel.ToString(); 

        switch (StatusLevel)
        {
            case 1:
                img.ImageUrl = "~/style/images/Green.png";
                break;
            case 2:
                img.ImageUrl = "~/style/images/Grey.png";
                break;
    }
}

Thanks in advance

score 0 · Answer 1 · edited Mar 08 '13 at 15:29

0

Remove Server control Image and add below line to your code based on your conditions

lnkButton.Text = "img src='../style/images/Green.png'";

edited Mar 08 '13 at 15:29

Toto

89,455
62
89
125

answered Mar 08 '13 at 15:12

user2148925

1

score 0 · Answer 2 · answered Mar 10 '13 at 07:19

0

Actually, best solution I think would be to wrap the linkButton with a div, and add some text to that div.

<div> <asp:LinkButton>...</asp:LinkButton> </div>

answered Mar 10 '13 at 07:19

Yanker

292
5
10
25

Add image and dynamic text to a LinkButton

2 Answers2