This is a migrated thread and some comments may be shown as answers.

DetailTables have no grid items

4 Answers 163 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Adam
Top achievements
Rank 1
Adam asked on 14 Aug 2008, 02:42 PM
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 ObjectByVal 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

4 Answers, 1 is accepted

Sort by
0
Iana Tsolova
Telerik team
answered on 19 Aug 2008, 07:48 AM
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.
0
Adam
Top achievements
Rank 1
answered on 19 Aug 2008, 12:48 PM

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


0
Accepted
Nikita Gourme
Top achievements
Rank 1
answered on 22 Aug 2008, 12:53 PM
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
0
Adam
Top achievements
Rank 1
answered on 22 Aug 2008, 12:58 PM
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.
Tags
Grid
Asked by
Adam
Top achievements
Rank 1
Answers by
Iana Tsolova
Telerik team
Adam
Top achievements
Rank 1
Nikita Gourme
Top achievements
Rank 1
Share this question
or