We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Nested(child) grid example

Thread ID:

Created:

Updated:

Platform:

Replies:

128821 Feb 10,2017 10:43 PM UTC Feb 14,2017 04:03 AM UTC Aurelia 3
loading
Tags: ejGrid
Alex
Asked On February 10, 2017 10:43 PM UTC

Hello,
I'm trying to build a parent-child grid system in my Aurelia-base application and I have some questions :
1. Is it possible to define a child grid within a parent grid in a view(html) ? something like this :
<ej-grid id="Parent" ........>
        <ej-column ......></ej-column>
        <ej-column ......></ej-column>
        ......
        <ej-grid id="Child" .......>
             <ej-column ......></ej-column>
             .............
        </ej-grid>
</ej-grid>
2. My parent grid get a data from a data manager (with web api adaptor) in this format :
[
 {
    "ParentField_1":"Value_1",
    "ParentField_2":"Value_2",
    "ChildItems": [{"ChildField_1":ChildValue_1,"ChildField_2":ChildValue_2},{"ChildField_1":ChildValue_1,"ChildField_2":ChildValue_2},{.......}]
  }
]
and it has a columns for parent fields only ("ParentField_1" and "ParentField_2"). How should I setup a data source in my child grid to get only a "ChildItems" array that already loaded by parent grid data manager ?

Any examples will be very helpful.
Thanks !

Saravanan Arunachalam [Syncfusion]
Replied On February 13, 2017 08:48 AM UTC

Hi Alex, 
Thanks for contacting Syncfusion’s support. 
We have analyzed your query and achieved it by using “detailsTemplate” feature of Grid control and please refer to the below code example and online documentation link. 
[index.html]           
<template> 
  <require from="./grid-wrapper"></require> 
   
  <div> 
      <ej-grid e-data-source.bind="gridData" e-on-details-data-bound.trigger="detailGridData($event)" e-details-Template="#ChildGridContents"> 
        . . . 
      </ej-grid> 
  </div> 
  <div> 
    <script id="ChildGridContents" type="text/template"> 
        <div id="detailGrid"+${EmployeeID}> 
        </div> 
    </script> 
  </div> 
</template> 
[index.js]  
export class Grid { 
  constructor() { 
    this.gridData = [{EmployeeID:1, FirstName: "David",Order:[{OrderID:100,ShipCity:"Reims"}]},  
                        {EmployeeID:2, FirstName: "Doe", Order:[{OrderID:101,ShipCity:"Rio de Jeniro"}]}, 
                        {EmployeeID:3, FirstName: "John", Order:[{OrderID:102,ShipCity:"Reims"},  
                        {OrderID:103,ShipCity:"Los Angels"}]}]; 
     
  } 
  detailGridData(e) { 
    var childData = e.data.Order; 
    e.detailsElement.find("#detailGrid").ejGrid({ 
        dataSource: childData, 
        . . .         
    }); 
  } 
} 
 
 
Regards, 
Saravanan A. 


Alex
Replied On February 13, 2017 11:30 AM UTC

Thank you Saravanan, your example helped me a lot.

Saravanan Arunachalam [Syncfusion]
Replied On February 14, 2017 04:03 AM UTC

Hi Alex,  
Thanks for your update.            
We are happy that the provided information helped you. 
Regards, 
Saravanan A. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;