Access Parent Class Attribute in a Repeater

Question

Here is the deal, I got a list of documents which is generated by the repeater and his databinding. In my markup i got a class for "li" tag when active or not.

What i just need is to set class="active" on the Li parent tag of my linkbutton when the document is selected.

    <asp:Repeater ID="Repeater1" runat="server">
        <HeaderTemplate>
            <ul>
        </HeaderTemplate>
        <ItemTemplate>
            <li>
                <asp:LinkButton ID="lnk" runat="server" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Id") %>' OnCommand="Get_carte"><%# Container.FindControl("lnk").ClientID %> <%# DataBinder.Eval(Container.DataItem, "Name") %>  - <%# DataBinder.Eval(Container.DataItem, "id") %> - <%# DataBinder.Eval(Container.DataItem, "compteur") %></asp:LinkButton></li>
        </ItemTemplate> 
        <FooterTemplate>
            </ul>
        </FooterTemplate>
    </asp:Repeater>

Answer 1

I've finally found a solution for my issue.

@Kapil : Your code works but got issue with the reload of the aspx page, then i can't use this method.

@Aghilas : I based my solution on your code.

In fact i can't use ItemDataBound event because i bind only 1 time my repeater, then i use my OnCommand event on the linkbutton. Here is my aspx code:

    <asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Rpt_DataBound">
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>
                <ItemTemplate>
                    <li runat="server" ID="li">
                        <asp:LinkButton ID="lnk" class="linkButton" runat="server" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Id") %>' OnCommand="Get_carte"><%# Container.FindControl("lnk").ClientID %> <%# DataBinder.Eval(Container.DataItem, "Name") %>  - <%# DataBinder.Eval(Container.DataItem, "id") %> - <%# DataBinder.Eval(Container.DataItem, "compteur") %></asp:LinkButton></li>
                </ItemTemplate> 
                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>

And my GetCarte Method:

    protected void Get_carte(object sender, CommandEventArgs e)
    {
        LinkButton lnk = (LinkButton)sender;
        ViewState["liactive"] = lnk.UniqueID.ToString().Substring(0, lnk.UniqueID.ToString().Length - 4);
        lbl_carte.Text = lnk.UniqueID + " " + e.CommandArgument.ToString();
        foreach (RepeaterItem rI in Repeater1.Items)
        {
            if (rI.ItemType == ListItemType.Item || rI.ItemType == ListItemType.AlternatingItem)
            {
                string liactiv = "";
                if (ViewState["liactive"] != null)
                    liactiv = ViewState["liactive"].ToString();
                var li = (HtmlControl)rI.FindControl("li");
                if (li.UniqueID.ToString().Substring(0, li.UniqueID.ToString().Length - 3) == liactiv) //Adjust your condition
                    li.Attributes.Add("class", "active");
                else
                    li.Attributes.Remove("class");
            }
        }

    }

Thanks for your help.

PS: I put ID in ViewState in case of needing the value in another part of my code. I also can replace my substring by lastindexof method.

Answer 2

Code Behind - C# :

You can add runat="server" and id="" to your li, in order to modify in your code behind

void Repeater_ItemDataBound(Object Sender, RepeaterItemEventArgs e) 
{
       if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) 
       {
         var li = (HtmlControl)e.Item.FindControl("IdOfYourLI");  
         if(condition) //Adjust your condition
         {
           li.Attributes.Add("class", "active");
         }
       }    
 }

You can also modify with JavaScript :

You add to element id and use GetElementById method

youIdOfControlLI.className = 'active';

Answer 3

Using jQuery:

jsFiddle working link

Set class="linkButton" to you LinkButtons.

 <asp:LinkButton ID="lnk" class="linkButton" />

Use the following jQuery Code to to set the Class on the li :

     $(function () {
            $(".linkButton").each(function (index) {
                $(this).on("click", function () {
                      $(".linkButton").each(function (index) {
                         $(this).closest("li").removeClass("active");
                      });
                    $(this).closest("li").addClass("active");
                });
            });
        });