Checkbox in Datagrid header ClientID (JQuery)

Question

Within a masterpage I have a standard DataGrid:

  <asp:DataGrid ID="dgMyGrid" runat="server" AutoGenerateColumns="false">
            <Columns>
            <asp:TemplateColumn>
            <HeaderTemplate>
            <asp:CheckBox CssClass="Checker" ID="cbSelectAll" runat="server" />
            </HeaderTemplate>
            <ItemTemplate>
            <asp:CheckBox ID="cbSelect" runat="server" />
            </ItemTemplate>
            </asp:TemplateColumn>
            </Columns>
  </asp:DataGrid>

Have the following jQuery that makes the header checkbox select all:

$(document).ready(function() {
$("#ctl00_ContentPlaceHolder1_dgMyGrid_ctl01_cbSelectAll").click(function() {
 $("#<%=dgID %> :checkbox").each(function(i)
 {
 this.checked = $("#ctl00_ContentPlaceHolder1_dgMyGrid_ctl01_cbSelectAll").is(":checked")
 });
 });
});

this works, but it's a bit ugly - I cant get the client ID for the header checkbox with
<%=cbSelectAll.ClientID%> (as I have done for the datagrid) Possibly because the javascript is rendered before that control. Is there a more elegant way for me to get the clientID of my checkbox out of the datagrid? I think it Would be better if I didnt hardcode the clientID like this.

Apologies if the answer to this is obvious, it's my first day trying jQuery! :)

Sly · Accepted Answer · 2009-04-02 13:58:20Z

1

This code to find your check box

 protected static Control FindControl(Control control, string controlId)
    {
        Control result;
        foreach (Control ctrl in control.Controls)
        {
            if (ctrl.ID == controlId)
            {
                result = ctrl;
                return result;
            }
            if (ctrl.Controls.Count != 0)
            {
                result = FindControl(ctrl, controlId);
                if (result != null)
                {
                    return result;
                }
            }
        }
        return null;
    }

And now you can use on aspx page:

<%= FindControl(dgMyGrid, "cbSelectAll").ClientID%>

answered Apr 2, 2009 at 13:58

Sly

15.3k13 gold badges64 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RYFN Over a year ago

Thanks for this, it's the solution I've ended up using. That said, I'd love to see a solution for this in jQuery Alone, but I'll mark this as the answer if there are no further responses.

Shaun Humphries · Accepted Answer · 2009-04-02 13:50:37Z

1

Why not just reference the class of the checkbox 'cbSelectAll'.

<asp:CheckBox CssClass="Checker" ID="cbSelectAll" runat="server" />


$("#<%=dgID %> :checkbox").each(function(i)
{ 
    this.checked = $(".Checker").is(":checked");
});

If the class 'Checker' is used for multiple controls you can always assign a unique class.

<asp:CheckBox CssClass="Checker cbSelectAll" ID="cbSelectAll" runat="server" />

$("#<%=dgID %> :checkbox").each(function(i)
{ 
    this.checked = $(".cbSelectAll").is(":checked");
});

answered Apr 2, 2009 at 13:50

Shaun Humphries

1,0359 silver badges15 bronze badges

2 Comments

RYFN Over a year ago

unfortunately this doesnt seem to work - the select all checkbox never gets becomes checked for some reason. Although if I check the other checkboxes, and click the checkall, they all become deselected, the opposite doesnt work (tested IE8 and FF).

RYFN Over a year ago

Perhaps this is because it is inside the datagrid... as this is standard jQuery functionality I think.

Collectives™ on Stack Overflow

Checkbox in Datagrid header ClientID (JQuery)

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related