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

2 posts, 0 answers
  1. CDK
    CDK avatar
    9 posts
    Member since:
    Feb 2019

    Posted 22 Apr 2019 Link to this post

    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.

     

  2. Eyup
    Admin
    Eyup avatar
    3953 posts

    Posted 25 Apr 2019 Link to this post

    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.
Back to Top