CODEWITHSUNDEEP
asp.net
albert sh
albert sh

Reputation: 1193

how to assign diffrerent id to items of a repeater in order to detect the clicked ImageButton

I have a repeater and I have an imagebutton inside that. when the user click on an imagebutton, I will change the border color of that but I am looking for a solution to unhighlight the previous one.

What I did was to change the id of the clicked one to OLDID and then the next time that user clicks on another imagebutton, find the previous clicked one ( OLDID ) and then unhighlight it. The problem is to find the OLDID in page, as its inside a repeater I can not write OLDID.ID = xxx, also e.Item.FindControl("OLDID"); doesn't work.

I searched a lot but couldn't find a solution for that, there was another question like this but remained unanswered. any suggestions would be highly appreciated.

<asp:Repeater ID="rptrPlatforms" runat="server" OnItemDataBound="rptrPlatforms_ItemDataBound" OnItemCommand="rptrPlatforms_ItemCommand">
    <ItemTemplate>
        <div style="border: 4px solid green; height: 250px; width: 330px;" runat="server">
            <asp:ImageButton ID="imgPlatform" alt="" Style="border: 4px solid; height: 240px; width: 320px;" runat="server" OnCommand="Platform_Click" CommandName="PlatformClick" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"PlatformLanguageID")+","+DataBinder.Eval(Container.DataItem,"PlatformID") %>' />
        </div>
    </ItemTemplate>
</asp:Repeater>

Code behind:

    protected void rptrPlatforms_ItemCommand(object source, RepeaterCommandEventArgs e)
    {
        ImageButton Oldimg = (ImageButton)e.Item.FindControl("OLDID");
        if (Oldimg != null)
        {
            Oldimg.Attributes.CssStyle.Add("border-color", "#000000");
            Oldimg.ID = "imgPlatform";
        }
        ImageButton img = (ImageButton)e.CommandSource;
        img.Attributes.CssStyle.Add("border-color", "#00FFFF");
        img.Attributes.CssStyle.Add("border-width", "8px");
        img.Attributes.CssStyle.Add("border-style", "solid");
        img.ID = "OLDID";
    }

Upvotes: 2

Views: 70

Answers (1)

j.f.
j.f.

Reputation: 3949

You could store the row index of the clicked ImageButton in a hidden field on your page. Since you are only holding a single value, there wouldn't be really any overhead at all.

<asp:HiddenField ID="hiddenSelectedIBRowIndex" runat="server" />
<asp:Repeater ID="rptrPlatforms" runat="server" 
    OnItemDataBound="rptrPlatforms_ItemDataBound" 
    OnItemCommand="rptrPlatforms_ItemCommand">

Then set the value of the HiddenField to the row index of the image button. If the HiddenField has a value, find the row of that index and set its border color.

protected void rptrPlatforms_ItemCommand(object source, RepeaterCommandEventArgs e)
{
    // If there is a value for the hidden field, we know there
    // is an ImageButton that needs to be changed
    if(hiddenSelectedIBRowIndex.Value.length > 0)
    {
        // Find the image button and set the border color
        int rowIndex = int.Parse(hiddenSelectedIBRowIndex.Value);
        RepeaterItem item = rptrPlatforms.Items[rowIndex];
        ImageButton ib = (ImageButton)item.FindControl("imgPlatform");
        ib.Attributes.CssStyle.Add("border-color", "#000000");
    } 

    ImageButton img = (ImageButton)e.CommandSource;
    img.Attributes.CssStyle.Add("border-color", "#00FFFF");
    img.Attributes.CssStyle.Add("border-width", "8px");
    img.Attributes.CssStyle.Add("border-style", "solid");

    // Set the value to the newly selected row
    hiddenSelectedIBRowIndex.Value = e.Item.ItemIndex;
}

Upvotes: 1

Related Questions