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

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

    Posted 22 Apr 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
    3825 posts

    Posted 25 Apr 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