Master check box not working on grid ordering

[Reyaz]

Hi,

I have created a user control along with ordering, paging etc. On the first time when grid loads, master check box work good but after clicking on column for ordering, master check box did not work.
When I disable the ajax it work fine.
Please suggest...

Regards,
Reyaz


 <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

        <script type="text/javascript">
            function CloseWindow() {
                window.close();
                return true;
            }
            var column = null;
            function MenuShowing(sender, args) {
                if (column == null)
                    return;
                var menu = sender;
                var items = menu.get_items();
                if (column.get_dataType() == "System.String") {
                    var i = 0;
                    while (i < items.get_count()) {
                        if (!(items.getItem(i).get_value() in { 'NoFilter': '', 'Contains': '', 'DoesNotContain': '', 'StartsWith': '', 'EndsWith': '', 'NotEqualTo': '', 'EqualTo': '' })) {
                            var item = items.getItem(i);
                            if (item != null)
                                item.set_visible(false);
                        }
                        else {
                            var item = items.getItem(i);
                            if (item != null)
                                item.set_visible(true);
                        }
                        i++;
                    }
                }
                column = null;
            }
            function filterMenuShowing(sender, eventArgs) {
                column = eventArgs.get_column();
            }
            function GetItems(sender, eventArgs) {

                sender.requestItems(sender.get_text(), false);
            }
            function SelectSingleRB(objRef) {
                var row = objRef.parentNode.parentNode;
                var GridView = row.parentNode;
                var inputList = GridView.getElementsByTagName("input");

                for (var i = 0; i < inputList.length; i++) {
                    if (inputList[i].type == "radio" && inputList[i] != objRef) {
                        inputList[i].checked = false;
                    }
                }
            }

            function CheckUncheckAllCheckBoxAsNeeded() {

                var totalCheckboxes = $("#<%=grdFieldSelector.ClientID%> input[id*='chkSelect']:checkbox").size();
                var checkedCheckboxes = $("#<%=grdFieldSelector.ClientID%> input[id*='chkSelect']:checkbox:checked").size();
                if (totalCheckboxes > 0 && totalCheckboxes == checkedCheckboxes)
                    if (totalCheckboxes == checkedCheckboxes) {
                    $("#<%=grdFieldSelector.ClientID%> input[id*='chkCheckUncheckAll']:checkbox").attr('checked', true);
                }
                else {
                    $("#<%=grdFieldSelector.ClientID%> input[id*='chkCheckUncheckAll']:checkbox").attr('checked', false);
                }
                else {
                    $("#<%=grdFieldSelector.ClientID%> input[id*='chkCheckUncheckAll']:checkbox").attr('checked', false);
                }
            }
            $(document).ready(function() {
                $("#<%=grdFieldSelector.ClientID%> input[id*='chkSelect']:checkbox").click(CheckUncheckAllCheckBoxAsNeeded);
                $("#<%=grdFieldSelector.ClientID%> input[id*='chkCheckUncheckAll']:checkbox").click(function() {
                    if ($(this).is(':checked'))
                        $("#<%=grdFieldSelector.ClientID%> input[id*='chkSelect']:checkbox").attr('checked', true);
                    else
                        $("#<%=grdFieldSelector.ClientID%> input[id*='chkSelect']:checkbox").attr('checked', false);
                });
                CheckUncheckAllCheckBoxAsNeeded();
            });
        </script>

    </telerik:RadCodeBlock>
    <telerik:RadAjaxManager ID="rajxMgrFieldDataSelector" runat="server">
        <ajaxsettings>
            <telerik:AjaxSetting AjaxControlID="rajxMgrFieldDataSelector">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="grdFieldSelector" />
                    <telerik:AjaxUpdatedControl ControlID="lblItemCollection" />
                    <telerik:AjaxUpdatedControl ControlID="hdnOrder" />
                    <telerik:AjaxUpdatedControl ControlID="hdnOrder" />

                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="grdFieldSelector">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="grdFieldSelector" LoadingPanelID="rajxLdpanFieldDataSelector" />
                    <telerik:AjaxUpdatedControl ControlID="lblItemCollection" />
                    <telerik:AjaxUpdatedControl ControlID="hdnOrder" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </ajaxsettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="rajxLdpanFieldDataSelector" runat="server" />
    <telerik:RadSkinManager ID="RadSkinManagerFieldSelector" runat="server" Enabled="true"
        ShowChooser="false">
        <targetcontrols>
            <telerik:TargetControl ControlID="btnOK" />
            <telerik:TargetControl ControlID="grdFieldSelector" />
        </targetcontrols>
    </telerik:RadSkinManager>
    <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="all">
    </telerik:RadFormDecorator>

[Iana Tsolova]

Hello Reyaz,

Try setting the RadGrid ClientSettings.ReorderColumnsOnClient property to false and see if it makes any difference.

Best wishes,
Iana
the Telerik team

[Reyaz]

Hi Lana,

I have already used which you have suggest. following are the rest code of html.

Please suggest once more...

Regards,
Reyaz

<table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td>
                <table width="100%" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td>
                            <telerik:RadGrid ID="grdFieldSelector" runat="server" AllowPaging="True" AllowCustomPaging="true"
                                AllowSorting="True" GridLines="None" AllowFilteringByColumn="True" AutoGenerateColumns="true"
                                Width="98%" OnItemDataBound="grdFieldSelector_ItemDataBound" OnItemCommand="grdFieldSelector_ItemCommand"
                                OnPageIndexChanged="grdFieldSelector_PageIndexChanged" OnSortCommand="grdFieldSelector_SortCommand"
                                OnPageSizeChanged="grdFieldSelector_PageSizeChanged">
                                <mastertableview width="100%">
                                    <Columns>
                                        <telerik:GridTemplateColumn ItemStyle-Width="20px" HeaderText="Select" UniqueName="rdo"
                                            AllowFiltering="false" HeaderStyle-Width="20px">
                                            <ItemTemplate>
                                                <asp:RadioButton ID="radSelect" runat="server" OnClick="SelectSingleRB(this)" />
                                            </ItemTemplate>
                                            <HeaderStyle></HeaderStyle>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn HeaderText="Select" UniqueName="chk" AllowFiltering="false"
                                            HeaderStyle-Width="20px" ItemStyle-Width="20px">
                                            <ItemTemplate>
                                                <asp:CheckBox ID="chkSelect" runat="server" />
                                            </ItemTemplate>
                                            <HeaderStyle></HeaderStyle>
                                            <HeaderTemplate>
                                                <asp:CheckBox ID="chkCheckUncheckAll" runat="server" />
                                            </HeaderTemplate>
                                        </telerik:GridTemplateColumn>
                                    </Columns>
                                    <NoRecordsTemplate>
                                        <asp:Label ID="lblFieldSelectorNoRecords" Text="<%$ Resources:PDICulture, GridEmptyMessage %>"
                                            runat="server"></asp:Label>
                                    </NoRecordsTemplate>
                                    <PagerStyle Mode="NextPrevNumericAndAdvanced"  PageButtonCount="5" AlwaysVisible="true" />
                                </mastertableview>
                                <headerstyle font-bold="true" font-names="Arial" />
                                <itemstyle font-names="Arial" />
                                <alternatingitemstyle font-names="Arial" />
                                <clientsettings allowcolumnsreorder="false" ReorderColumnsOnClient="false">
                                    <Selecting AllowRowSelect="true" />
                                    <ClientEvents OnFilterMenuShowing="filterMenuShowing" />
                                </clientsettings>
                                <groupingsettings casesensitive="false" />
                                <filtermenu onclientshown="MenuShowing" />
                                <pagerstyle mode="NextPrevNumericAndAdvanced" alwaysvisible="true" pagebuttoncount="5" />
                            </telerik:RadGrid>
                        </td>
                    </tr>
                    <tr>
                        <td align="right" style="width:100%">
                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr style="height:10px">
                                    <td colspan="2">
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width:85%" align="right">
                                        <asp:Button ID="btnOK" Text="Ok" runat="server" Width="70px" OnClick="btnOK_Click" />&nbsp;
                                    </td>
                                    <td align="left">
                                        <asp:Button ID="btnClose" Text="Cancel" runat="server" Width="70px" OnClientClick="CloseWindow()" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr style="height: 5px">
                        <td>
                            <table border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                        <asp:Label ID="lblItemCollection" runat="server" Text="" Visible="false"></asp:Label>
                                    </td>
                                    <td>
                                        <asp:HiddenField ID="hdnOrder" Value="" runat="server" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

[Iana Tsolova]

Hello Reyaz,

I prepared a sample project based on your code however I was not able to replicate the issue. can you check it out and let me know how it works on your end?
Additionally, here is a video of the tests I performed.

Kind regards,
Iana
the Telerik team

[Reyaz]

Hi Lana

Thanks for your effort. Please find the screen shot for better clarification.

There is two column, one column contain radio button and other one column contain check box. it will be decided on run time which column will be visible to the user.

If check box column will be visible then there will be a master check box. which provide to user to select or deselect all record,

Please consider it again.

Regards,
Reyaz

[Iana Tsolova]

Hi Reyaz,

I modified the sample however I am still not able to replicate the issue. Can you try it? Let me know if it works as desired and what differs in your case.

Kind regards,
Iana
the Telerik team

[Reyaz]

Hi Lana,

Thank you so much for this help, Its working fine, Can we do it by java script instead of code behind.

Regards,
Reyaz

[Iana Tsolova]

Hello Reyaz,

You can use the GridClientSelectColumn instead of the GridTemplateColumn with the checkboxes. Then it would work even if columns are reordered on the client.

Greetings,
Iana
the Telerik team

[Reyaz]

Thank you so much Lana,

Regards,
Reyaz