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.