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.
Unfortunately, activation email could not send to your email. Please try again.

Nested(child) grid example

Thread ID:

Created:

Updated:

Platform:

Replies:

128821 Feb 10,2017 05:43 PM Feb 13,2017 11:03 PM Aurelia 3
loading
Tags: ejGrid
Alex
Asked On February 10, 2017 05:43 PM

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 03:48 AM

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 06:30 AM

Thank you Saravanan, your example helped me a lot.

Saravanan Arunachalam [Syncfusion]
Replied On February 13, 2017 11:03 PM

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.

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.

;