Implementing Select All functionality in grid in NestedViewTemplate

[Tauqir]

I need to implement client-side Select All functionality in a nested RadGrid, however, I cannot use the default Telerik select functionality. Following is the code. I am calling a JS method upon click of the checkbox in the header and want to select or deselect based on the state of the header checkbox.

<telerik:RadGrid ID="Orders" AllowRowSelect="true" AllowCustomPaging="true" runat="server" OnItemCommand="Orders_ItemCommand"

    OnItemDataBound="Orders_ItemDataBound" OnNeedDataSource="Orders_NeedDataSource"

    AutoGenerateColumns="false" AllowSorting="false" GroupingSettings-CaseSensitive="false">

    <ClientSettings>

        <Selecting AllowRowSelect="true" />

        <ClientEvents OnFilterMenuShowing="filterMenushowing" />

    </ClientSettings>

    <MasterTableView EditMode="InPlace" AllowFilteringByColumn="false">

        <Columns>

            <%--Some columns--%>

        </Columns>

        <NestedViewTemplate>

            <asp:Panel ID="pnlAsset" runat="server">

                <telerik:RadTabStrip runat="server" ID="AssetTabStrip" MultiPageID="MultiPage1" SelectedIndex="0" Skin="Windows7">

                    <Tabs>

                        <telerik:RadTab runat="server" Text="Something" PageViewID="RadPageView1"></telerik:RadTab>

                        <%--Some more tabs--%>

                    </Tabs>

                </telerik:RadTabStrip>

                <telerik:RadMultiPage runat="server" ID="Multipage1" SelectedIndex="0">

                    <telerik:RadPageView runat="server" ID="RadPageView1">

                        <div id="divAsset">

                            <telerik:RadGrid ID="Assets" runat="server" AutoGenerateColumns="False" Skin="Windows7"

                                AllowSorting="false" CssClass="GridMargin" AllowPaging="true" PageSize="10" GroupingSettings-CaseSensitive="false"

                                GridLines="None" CellSpacing="0" OnItemDataBound="Assets_ItemDataBound" OnItemCommand="Assets_ItemCommand" OnNeedDataSource="Assets_NeedDataSource" AllowCustomPaging="true">

                                <ClientSettings>

                                    <Selecting AllowRowSelect="false" />

                                    <ClientEvents OnFilterMenuShowing="filterMenushowing" />

                                </ClientSettings>

                                <MasterTableView EditMode="InPlace" AllowFilteringByColumn="false">

                                    <Columns>

                                        <telerik:GridTemplateColumn UniqueName="move" AllowFiltering="false">

                                            <HeaderTemplate>

                                                <asp:CheckBox ID="chkSelectAll" runat="Server" onclick="checkAssetGridAll(this);" />

                                            </HeaderTemplate>

                                            <ItemTemplate>

                                                <asp:CheckBox ID="chkSelect" runat="server" />

                                            </ItemTemplate>

                                        </telerik:GridTemplateColumn>

                                        <%--Some columns--%>

                                    </Columns>

 

                                </MasterTableView>

                            </telerik:RadGrid>

                        </div>

                    </telerik:RadPageView>

                </telerik:RadMultiPage>

            </asp:Panel>

        </NestedViewTemplate>

    </MasterTableView>

</telerik:RadGrid>

I tried the following JS, but it keeps alerting length as 0.

var masterTable = $find("<%= Orders.ClientID %>").get_masterTableView();
var dataItems = masterTable.get_dataItems();

for (var i = 0; i < dataItems.length; i++) {
    alert(dataItems[i].get_nestedViews().length);
}

 How can I implement the same? 

[Viktor Tachev]

Hello,

Selecting rows in RadGrid on the client-side is available out of the box. You could add a GridClientSelectColumn to the GridTableView. This column enables selecting rows in the grid client-side. In addition when the AllowMultiRowSelection property is enabled there will be a CheckBox rendered in the header of the column that could be used to select all items. Try using this approach and you would be able to achieve the functionality you are looking for.

Regards,
Viktor Tachev
Telerik