Asp.net checkbox in update panel is losing its functionality after checked and unchecked (2 hits)?

Question

I have a gridview which includes a column of checkboxes down the left side and a 'master' checkbox above them to check or uncheck them all. The thing is after 2 hits to any checkbox, it loses its functionality. Not the master checkbox tho, it keeps working.

Gridview is not in an Update Panel, there's a linkButton for postback in Javascript, the button is outside of the grid and inside in an update panel.

When I move the Gridview into the Update Panel, then checkboxes get fixed but the master checkbox loses its functionality, actually it does check them all but doesn't uncheck. When I use Async or PostBack triggers for these update panels, the problem stays, either the master checkbox only has functionality for 1 way like check or uncheck only, or it works but the single checkboxes lose their functionality after checked and unchecked. I'm lost trying to fix this.

When debugging, it seems like __doPostBack in Javascript stops working after 2 hits per checkbox.

Btw it has to be without page postback.

Edit: I think GridViewScroll creates a frozen copy of the elements and after first hit to header checkbox, __dopostback starts to see the wrong element which has the opposite state. On the first hit to perform "check all", "mainChecked" results false. On the second click to perform "uncheck all", "mainChecked" results false again which is the 'after-click' state.

Checkbox;

<asp:TemplateField ItemStyle-Width="13px"
                    HeaderStyle-Width="7px" ItemStyle-HorizontalAlign="Center" >
            <HeaderTemplate>
                    <input type="checkbox" id="chckBoxHeader" runat="server" AutoPostBack="true" class="GridHeaderCheckBox" onchange="CheckBoxHeaderChanged();" />
            </HeaderTemplate>
            <ItemTemplate>
                    <asp:CheckBox ID="chckBox" runat="server" OnChange="CheckBoxSpanOnChange(this)" OnCheckedChanged="chckBox_CheckedChanged" CssClass="GridRowCheckBox" />
            </ItemTemplate>
</asp:TemplateField>

Update Panel;

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <ContentTemplate>
            <asp:LinkButton ID="lnkPostBack" runat="server" OnClick="lnkPostBack_Click"></asp:LinkButton>
        </ContentTemplate>
</asp:UpdatePanel>

Javascript;

function CheckBoxSpanOnChange(spanElem) {
        CheckBoxOnChange($(spanElem).find('input').first());
    }

    function CheckBoxOnChange(elem) {
        if ($(elem) != null && $(elem) != 'undefined') {

            var elemId = $(elem).attr('id');

            if (elemId.includes("freezeitem")) {
                if ($(elem).prop('checked')) {

                    $('#' + elemId.replace('_freezeitem', '')).attr('checked', 'checked');
                }
                else {

                    $('#' + elemId.replace('_freezeitem', '')).removeAttr('checked');
                }
            }
            else {
                if ($(elem).prop('checked')) {

                    $('#' + elemId + '_freezeitem').attr('checked', 'checked');
                }
                else {

                    $('#' + elemId + '_freezeitem').removeAttr('checked');
                }

            }
        }
        __doPostBack('<%= lnkPostBack.UniqueID%>', '');
    }

    function CheckBoxHeaderChanged() {

        var checkboxes = document.querySelectorAll('#ctl00_ctl00_maincontent_content_grdList_ctl01_chckBoxHeader');
        var mainChecked = $(checkboxes[0]).prop('checked');

        for (var i = 0; i < checkboxes.length; i++) {
            if (mainChecked) {
                $(checkboxes[i]).prop('checked', false);
            }
            else {
                $(checkboxes[i]).prop('checked', true);
            }
        }

        var rowchkSpan = document.querySelectorAll('.GridRowCheckBox');

        for (var i = 0; i < rowchkSpan.length; i++) {
            var rowchk = $(rowchkSpan[i]).find('input').first();

            if (mainChecked) {
                $(rowchk).prop('checked', false);
            }
            else {
                $(rowchk).prop('checked', true);
            }
        }
        __doPostBack('<%= lnkPostBack.UniqueID%>', '');
    }

score 0 · Answer 1 · answered Jan 06 '22 at 11:40

You say: It has to be without postback. Yet your checkboxes have an OnCheckedChanged and AutoPostback=true attribute. And in your javascript you are calling '__doPostback'.

I think the first step would be: remove all those things. Let the javascript do it's magic. I assume postback is only needed if you click the linkbutton. (And this linkbutton does'nt need to be in an updatepanel)

Asp.net checkbox in update panel is losing its functionality after checked and unchecked (2 hits)?

1 Answers1