For this example dataset with 6 columns and 6 rows:
AAA BBB CCC 1 2 3
AAA BBB CCC 4 5 6
DDD EEE FFF 1 2 3
GGG HHH III 1 2 3
GGG HHH III 4 5 6
GGG HHH III 7 8 9
Some user operation will result in a call to a webservice, which populate the parent grid. eg.
var tableView = $find("<%= RadGrid2.ClientID %>").get_masterTableView();
tableView.set_dataSource(result);
tableView.dataBind();
My web service returns the distinct first 3 columns, I bind the data as noted above, and the results look like this:
+ AAA BBB CCC
+ DDD EEE FFF
+ GGG HHH III
I can then click expand [+], which calls a web service to return the child rows and populate the child grid, yielding:
- AAA BBB CCC
1 2 3
4 5 6
- DDD EEE FFF
1 2 3
- GGG HHH III
1 2 3
4 5 6
7 8 9
I actually have all of the above working, but the only problem is it only works for the first 11 rows. The child grids and expand/collapse buttons are not dynamically added for any rows beyond the 11th when data is bound.
Why not?
My grid structure is defined as follows:
<telerik:RadGrid ID="RadGrid2" runat="server">
<ClientSettings> <ClientEvents OnCommand="RadGrid2_Command" OnHierarchyExpanding="RadGrid2_HierarchyExpanding" OnDataBound="RadGrid2_OnDataBound"/>
</ClientSettings>
<MasterTableView HierarchyLoadMode="Client" ClientDataKeyNames="PositionAreaAppID" RetainExpandStateOnRebind="false" ExpandCollapseColumn-Display="true">
<Columns>
<telerik:GridBoundColumn DataField="Description" HeaderText="Software" HeaderStyle-Font-Bold="true" />
<telerik:GridBoundColumn DataField="Manufacturer" HeaderText="Manufacturer" HeaderStyle-Font-Bold="true" /> <telerik:GridBoundColumn DataField="Version" HeaderText="Version" HeaderStyle-Font-Bold="true" />
</Columns>
<NestedViewTemplate>
<telerik:RadGrid ID="RadGrid3" runat="server">
<ClientSettings>
<ClientEvents OnCommand="RadGrid3_Command" />
</ClientSettings>
<MasterTableView ClientDataKeyNames="PositionAreaAppPrivID" ShowHeader="false">
<Columns>
<telerik:GridTemplateColumn UniqueName="PrivilegeClientTemplateColumn" HeaderText="" ItemStyle-CssClass="" HeaderStyle-Font-Bold="true">
<ClientItemTemplate>
<div><b>#=PrivTypeDescription #:</b> #=Priv1 #</div>
</ClientItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</NestedViewTemplate>
</MasterTableView>
</telerik:RadGrid>
Is there a different approach that will allow client-side binding of nested grids? I tried using Grouping, NestedViewTemplates, and DataTables, all without the desired result.
I am about to give up on Grid and considering using a LoadOnDemand TreeView customized with client templates to accomplish this, since i don't need advanced grid functionality like sorting, paging, etc. I am just using it to display in a tabular format.