Header checkbox checks gridview rows however interface shows otherwise

Viewed 1664

I've got a gridview within an update panel (web forms). The grid view has a header checkbox so that when you click the header checkbox it checks all item checkboxes below it, like so:

<asp:TemplateField>
         <HeaderTemplate>
              <asp:CheckBox ID="HeaderLevelCheckBox" runat="server" 
                onclick="toggleSelection(this);" ToolTip="Select / Deselect all rows?" />
         </HeaderTemplate>
         <ItemTemplate>
            <asp:CheckBox ID="chkSelector" runat="server" ToolTip="Select row?" />
         </ItemTemplate>
</asp:TemplateField>

Notice the function call onclick="toggleSelection(this);" this looks like this:

function toggleSelection(source) {
        $("#MainContent_gvCG input[id*='chkSelector']").each(function (index) {
            $(this).attr('checked', source.checked);
            if (source.checked)
                $(this).css({ backgroundColor: "yellow" });
            else
                $(this).css({ backgroundColor: "" });
        });
    }

This is declared right after document.ready within a script tag. When I initially load the page and click the headercheckbox all rows in the gridview are also selected (great...works). If I uncheck it all rows are unchecked (great works). The minute I click on it again the UI does not change (all items are not checked like they should be).

I was curious and upon inspecting the markup that too was right, when I click the header to check it to true I get row items that are checked:

<input id="MainContent_gvCG_chkSelector_5" type="checkbox" name="ctl00$MainContent$gvCG$ctl08$chkSelector" style="background-color: rgb(255, 255, 0);" checked="checked">

And when I uncheck the header it responds correctly like so:

<input id="MainContent_gvCG_chkSelector_5" type="checkbox" name="ctl00$MainContent$gvCG$ctl08$chkSelector" style="">

My issue is the UI does not change, meaning the checkboxes do not display as being checked even though the markup shows it as being checked. Is this due to being inside an updatepanel?

What can I do to fix this?

4 Answers
Related