Hierarchical Grid with Nested Objects

[sp00ky]

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 (preferably using the bridge but also in general)? It seems like creating a hierarchical grid depends on the querystring property which really doesn't apply here.

Also, I'd like to be able to edit the data in both grids (parent and child). Don't know if that would affect the answer...

Thanks!

[karthickthangasamy]

Hi @sp00ky ,

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.

[grid.html]

<template> 
    <div>
        <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>                      
        </ej-grid> 
              <div id="tabGridContents">  // template 
                  <div id="detailGrid"></div> 
              </div> 
    </div> 
</template>

[grid.js]

export class Grid { 

            constructor() { 
              this.dataSource = dataSource; 

               ------------------- 

                     } 
            eventdatabound(e){ 

   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 from below.

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"}] 
                }]

Refer the below documentation.

Link: https://help.syncfusion.com/api/js/ejgrid#events:detailsdatabound

Link: https://help.syncfusion.com/api/js/ejgrid#members:detailstemplate

[sp00ky]

Excellent - exactly what I needed. Next question :) Is it possible to edit the detail grid? This is what I have for the detail grid but I don't get the toolbar:

    eventdatabound(e) {
      var filteredData = e.data["work_items"];
      e.detailsElement.find("#detailGrid").ejGrid({
          editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode : 'dialog', showAddNewRow : true },
          toolbarSetting: { showToolbar: true, toolbarItems: [ 'add', 'edit', 'delete', 'update', 'cancel', 'excelExport' ] },
          dataSource: filteredData,
          columns: [
              { field: '_id' },
              { field: '_rev' },
              { field: 'description' },
              { field: 'ticket' },
              { field: 'workitem' }
          ]
      });
    }

[karthickthangasamy]

We have checked the snippet that has been shared by you, and found that, you have used toolbarSettings property to show the toolbarItems but you have mentioned as toolbarSetting instead of toolbarSettings (in plural form), this is the cause of an issue.

Refer the below code example.

export class Grid { 

            constructor() { 

                     ------------          

           eventdatabound(e){ 

                ----------- 

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode : 'dialog', showAddNewRow : true }, 

          toolbarSettings: { showToolbar: true, toolbarItems: [ 'add', 'edit', 'delete', 'update', 'cancel', 'excelExport' ] }, 
                columns: [ 

                     ----------- 

                ] 
            }); 

        } 

    } 

Refer the help documentation.

Link: https://help.syncfusion.com/api/js/ejgrid#members:toolbarsettings

[sp00ky]

Doh! Thanks for taking the time to look at it. Now I feel kinda silly :)