Is dynamic loading from client to populate a child grid possible?

[CDK]

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>

                            

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.

 

[Eyup]

Hello,

You can find explanation for the 11 items limit in the following post:
https://www.telerik.com/forums/using-gridtemplatecolumn-in-radgrid-on-clientside-binding-with-pagination#6DcHO38VCk-926xPimjW3A

But generally, I'm afraid client-side binding with hierarchy or grouping is not supported:
https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-binding/understanding-data-binding/client-side-binding/client-side-binding-specifics#client-side-data-binding-limitation

However, you can achieve something like this:
https://demos.telerik.com/aspnet-ajax/grid/examples/data-binding/master-detail/defaultcs.aspx

Regards,
Eyup
Progress Telerik