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

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

1 Answer 66 Views
Grid
This is a migrated thread and some comments may be shown as answers.
CDK
Top achievements
Rank 1
CDK asked on 23 Apr 2019, 03:55 AM

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.

 

1 Answer, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 25 Apr 2019, 04:19 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
CDK
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Share this question
or