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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Hierarchical Grid with Nested Objects

Thread ID:





129426 Mar 16,2017 06:16 PM UTC Mar 21,2017 05:22 AM UTC JavaScript 1
Tags: ejGrid
Kelly Harrison
Asked On March 16, 2017 06:16 PM UTC

I've got some javascript objects like this (it's typescript but you get the idea):

export class Release {
  field1: string;
  field2: number;
  workitems: WorkItem[];

export class WorkItem {
  field3; string;
  field4; number;

Since I'm working directly with javascript objects (using pouchdb in this case) I don't have any foreign keys and I'm not calling a service.  The parent object simply has an array of child objects.

I'd like to setup a hierarchical grid with Releases as the master and WorkItems as the detail.  Can this be done?


Prasanna Kumar Viswanathan [Syncfusion]
Replied On March 21, 2017 05:22 AM UTC

Hi Kelly, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you want to create a Grid with hierarchical structure. So, we suggest you to use the detail template in Grid. We have filtered the data for the child Grid using the column(“OrderID”) details of parent row value and rendered resultant data as child grid in the detailsDataBound event of ejGrid.  
Refer the below code example. 


        <ej-grid id="Grid" e-data-source.bind="dataSource" e-edit-settings="editSettings" e-toolbar-settings="toolbarSettings"  
e-details-template="#tabGridContents" // detail template defining 
e-on-details-data-bound.delegate="eventdatabound($event.detail)" > //detaildata =bound event defining 
           <ej-column e-field="OrderID" e-is-primary-key="true" ></ej-column> 
            <ej-column e-field="EmployeeID" ></ej-column> 
            <ej-column e-field="CustomerID" ></ej-column>                      
              <div id="tabGridContents">  // template 
                  <div id="detailGrid"></div> 


export class Grid { 
            constructor() { 
              this.dataSource = dataSource; 
   var collectionData = e.data['ShipDetails']; // Get the dataSource for ShipDetails 
     e.detailsElement.find("#detailGrid").ejGrid({ // detail template Grid rendering 
                dataSource: collectionData,     
                allowSelection: false, 
                columns: [ 

Refer the dataSource for our sample. 

var dataSource = [{ 
        OrderID:        10280, 
       CustomerID:     "BERGS", 
       EmployeeID:     2, 
       ShipDetails:[{ShipName:"Berglunds snabbköp", ShipCity: "Luleå", ShipCountry: "Sweden",}], 
        }, { 
       OrderID:        10265, 
       CustomerID:     "BLONP", 
       EmployeeID:     2, 
       ShipDetails: [{ShipName:"Blondel père et fils", ShipCity: "Strasbourg",ShipCountry:"France"}] 

We have prepared a sample and it can be downloadable from the below location. 

Refer the below documentation. 

Prasanna Kumar N.S.V 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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