DetailTables have no grid items

[Adam]

I have the following grid:

<telerik:RadGrid ID="grdList" runat="server" AutoGenerateColumns="False" Width="450px"
                        Height="260px" GridLines="None" AllowMultiRowSelection="True" AllowPaging="True"
                        PageSize="10" CssClass="CriteriaGrid">
                        <ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
                            Font-Underline="False" Wrap="True" />
                        <PagerStyle Mode="NextPrevAndNumeric" PagerTextFormat="{4} &amp;nbsp;Page {0} of {1}" />
                        <MasterTableView DataKeyNames="Value" Name="Master" ShowHeader="False" GridLines="None" HierarchyLoadMode="Client">
                            <RowIndicatorColumn>
                                <HeaderStyle Width="20px"></HeaderStyle>
                            </RowIndicatorColumn>
                            <ExpandCollapseColumn Visible="True">
                                <HeaderStyle Width="20px"></HeaderStyle>
                            </ExpandCollapseColumn>
                            <Columns>
                                <telerik:GridClientSelectColumn HeaderText="Include" UniqueName="Include">
                                    <HeaderStyle Width="20px" />
                                </telerik:GridClientSelectColumn>
                                <telerik:GridBoundColumn DataField="Text" HeaderText="Text" UniqueName="Text">
                                    <HeaderStyle Width="100%" />
                                    <ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
                                        Font-Underline="False" Wrap="False" />
                                </telerik:GridBoundColumn>
                            </Columns>
                            <ItemStyle Wrap="False" Font-Bold="False" Font-Italic="False" Font-Overline="False"
                                Font-Strikeout="False" Font-Underline="False"></ItemStyle>
                            <GroupHeaderItemStyle Wrap="False" Font-Bold="False" Font-Italic="False" Font-Overline="False"
                                Font-Strikeout="False" Font-Underline="False"></GroupHeaderItemStyle>
                            <AlternatingItemStyle Wrap="False" Font-Bold="False" Font-Italic="False" Font-Overline="False"
                                Font-Strikeout="False" Font-Underline="False"></AlternatingItemStyle>
                            <EditItemStyle Wrap="False" Font-Bold="False" Font-Italic="False" Font-Overline="False"
                                Font-Strikeout="False" Font-Underline="False"></EditItemStyle>
                            <DetailTables>
                                <telerik:GridTableView runat="server" Name="Detail" DataKeyNames="Value" ShowHeader="False">
                                    <Columns>
                                        <telerik:GridClientSelectColumn HeaderText="Include" UniqueName="Include">
                                            <HeaderStyle Width="20px" />
                                        </telerik:GridClientSelectColumn>
                                        <telerik:GridBoundColumn DataField="Text" HeaderText="Text" UniqueName="Text">
                                            <HeaderStyle Width="100%" />
                                            <ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
                                                Font-Underline="False" Wrap="False" />
                                        </telerik:GridBoundColumn>
                                    </Columns>
                                    <RowIndicatorColumn>
                                        <HeaderStyle Width="20px" />
                                    </RowIndicatorColumn>
                                    <ExpandCollapseColumn>
                                        <HeaderStyle Width="20px" />
                                    </ExpandCollapseColumn>
                                </telerik:GridTableView>
                            </DetailTables>
                        </MasterTableView>
                        <ClientSettings>
                            <Selecting AllowRowSelect="True" EnableDragToSelectRows="False"></Selecting>
                            <ClientEvents OnRowSelected="SelectChildren" OnRowDeselected="SelectChildren" OnRowSelecting="CancelNonInputSelect" OnRowDeselecting="CancelNonInputSelect">
                            </ClientEvents>
                            <Scrolling AllowScroll="True" UseStaticHeaders="True"></Scrolling>
                        </ClientSettings>
                        <FilterMenu EnableTheming="True">
                            <CollapseAnimation Duration="200" Type="OutQuint" />
                        </FilterMenu>
                    </telerik:RadGrid>

With the follwing JS events:

function CancelNonInputSelect(sender, args)
            {
                var e = args.get_domEvent();
                //IE - srcElement, Others - target
                var targetElement = e.srcElement || e.target;

                if (targetElement != null) {
                    //is the clicked element an input checkbox? <input type="checkbox"...>
                    if(targetElement.tagName.toLowerCase() != "input" && (!targetElement.type || targetElement.type.toLowerCase() != "checkbox"))
                    {
                        //cancel the event
                        args.set_cancel(true);
                        return;
                    }
                }
            }

            function SelectChildren(sender, args) {
                if(args.get_tableView().get_name()=='Master') {
                    var di = args.get_tableView().get_dataItems()[args.get_itemIndexHierarchical()];
                    di.set_expanded(true);

                    var grid = $find("<%= grdList.ClientID %>");
                    var table = grid.get_detailTables()[args.get_itemIndexHierarchical()];

                    for (i = 0; i < table.get_dataItems().length; i++)
                    {
                        if (di.get_selected() == true)
                            table.selectItem(table.get_dataItems()[i].get_element());
                        else
                            table.deselectItem(table.get_dataItems()[i].get_element());
                    }
                }
            }

I have paging enabled, and since the grid doesn't maintain what was selected on a previous page (I think this would be an AWESOME feature to include in a future build), I have to capture all the selected items from each page so that I can reselect them again when the grid renders back to one of the pages.

I have the hierarchy load mode set to client and have subscribed to both the NeedDataSource and DetailTableDataBind events so that the grid is fully loaded when it comes to the screen.

The problem is when I'm trying to look at what is selected inside of my detail tables. I'm able to loop through the MasterTableView grid items see what is selected and what isn't and add them or remove them from my SelectedItems array. However, when I get down and start looping through the detail tables, they don't have any grid items, so I can't add them to my SelectedDetailItems array.

Private Sub grdList_PageIndexChanged(ByVal source As Object, ByVal e As Telerik.Web.UI.GridPageChangedEventArgs) Handles grdList.PageIndexChanged
        For Each item As Telerik.Web.UI.GridItem In grdList.MasterTableView.Items
            If item.Selected Then
                If Not SelectedItems.Contains(grdList.MasterTableView.DataKeyValues(item.ItemIndex).Item("Value")) Then
                    SelectedItems.Add(grdList.MasterTableView.DataKeyValues(item.ItemIndex).Item("Value"))
                End If
            Else
                SelectedItems.Remove(grdList.MasterTableView.DataKeyValues(item.ItemIndex).Item("Value"))
            End If
        Next

        For Each det As Telerik.Web.UI.GridTableView In grdList.MasterTableView.DetailTables
            For Each item As Telerik.Web.UI.GridItem In det.Items
                If item.Selected Then
                    If Not SelectedDetailItems.Contains(det.DataKeyValues(item.ItemIndex).Item("Value")) Then
                        SelectedDetailItems.Add(det.DataKeyValues(item.ItemIndex).Item("Value"))
                    End If
                Else
                    SelectedDetailItems.Remove(det.DataKeyValues(item.ItemIndex).Item("Value"))
                End If
            Next
        Next
    End Sub

I would love to be able to use the SelectedItems array on the RadGrid (which does have the selected items from the detail tables), but can't because it will only tell me what has been selected, but I need to know what isn't selected so I can remove them from my storage array. As you can see, if there was a way for the grid to maintain selections when the page index/sort changes and restore them when it renders those grid items, that would be GREAT and save me tons of time and additional code writing to handle something that really should be included.

Thanks,
Adam

[Iana Tsolova]

Hi Adam,

You can get the collection of all detail tables in your grid by using the get_detailTables() client side method. This will give a collection of tables of type GridTableView. Then you could call the get_dataItems() client method to retreive the collection of GridDataItems for each detail table in order to achieve your goal.

Find more about RadGrid client-side Appi here.

Let us know if we could help you further.
 
Best wishes,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Adam]

The issue is not on the client side, that part is working great. The issue is in the PageIndexChanged function on the server side. I'm looping through the grid items in the MasterTableView and that works fine. The issue is when I try to loop through the DetailTables of the MasterTableView and then loop through their subsequent grid items. The GridItemCollection is empty. I have the grid set to do the bind everything so it will expand client side which I figured would make the GridItemCollections filled on the server side after the PageIndexChanged postback.

Thanks,

Adam

[Nikita Gourme]

I read in this chapter of the documentation that the DetailTables collection is a prototype collection which can not be used in a number of cases to access the detail tables in the hierarchy. Instead loop through the Items collection of the grid itself or perform a recursive loop through the nested tables.

Hope these pointers are useful.

Nikita

[Adam]

Thanks for the answer. That explains why it didn't work. I've resorted to looping through the ItemsHierarchy and checking the name of the table ("Master" or "Detail) for each of the items and then running the necessary code for depending on the table it is in and whether or not it is selected.