Lazy Loaded 'Local' Child data

[Grant EFive]

I'm trying to achieve something similar to https://ej2.syncfusion.com/demos/#/material/tree-grid/remote-data.html - but using local data which is fetched on demand 

Basically, I want to load a tree with only parent data, where the data indicates that it has child records, but they are not actually loaded yet. Upon expanding a row, I'll populate the child data asynchronously (by hooking into the 'expanding' or 'dataStateChange' call backs)

From what I can gather, 'local' data sources assume that all of the data is available...

The reason for all of this that that our application uses a central state management, and we can't utilise your data adaptors to fetch remote data.

[Dinesh Rajendiran]

Hi Grant, 

Thanks for using Syncfusion Products. 

The documentation for  “Custom Binding” of  data source is available in the documentation section.  

Documentation link: https://ej2.syncfusion.com/documentation/treegrid/data-binding/?no-cache=1#custom-binding 

haschildMapping property of TreeGrid denotes whichever records has child record and is used to render expand/collapse icon the parent records. 

If you need further assistance, please get back to us. 

Regards, 

Dinesh Rajendiran 

[Grant EFive]

The 'hasChildMapping' property does not seem to work with local data - which is my source issue. 

Please see the following: https://codesandbox.io/s/wonderful-dubinsky-z1qps

[Manivannan Padmanaban]

Hi Grant, 

Sorry for the inconvenience caused. 

In order to achieve the Tree grid structure, we need to use the hierarchy releationship in the TreeGrid dataSource. TreeGrid is rendered from Self-Referential data structures by providing two fields, ID field and parent ID field. 

• ID Field: This field contains unique values used to identify nodes. Its name is assigned to the idMapping property.
• Parent ID Field: This field contains values that indicate parent nodes. Its name is assigned to the parentIdMapping property.

For your convenience we have created the sample please refer the below code example and sample link, 

const parentdata = [ 

  { 

    TaskID: 1, 

    TaskName: "Parent Task 1", 

    StartDate: new Date("02/23/2017"), 

    EndDate: new Date("02/27/2017"), 

    Duration: 3, 

    Progress: "40", 

    Priority: "Normal", 

    hasChildData: true 

  } 

]; 

 

const childdata = [ 

  { 

    TaskID: 2, 

    TaskName: "Child Task 1", 

    StartDate: new Date("02/23/2017"), 

    EndDate: new Date("02/27/2017"), 

    Duration: 4, 

    Progress: "40", 

    parentID: 1, 

    Priority: "Low" 

  }, 

  { 

    TaskID: 3, 

    TaskName: "Child Task 2", 

    StartDate: new Date("02/23/2017"), 

    EndDate: new Date("02/27/2017"), 

    Duration: 2, 

    Progress: "40", 

    parentID: 1, 

    Priority: "Normal" 

  } 

]; 

 

const treeGrid = new TreeGrid({ 

  dataSource: { result: parentdata, count: parentdata.count }, 

  hasChildMapping: "hasChildData", 

  treeColumnIndex: 1, 

  idMapping: "TaskID", 

  parentIdMapping: "parentID", 

  dataStateChange: function(state: any) { 

    if (state.requestType === "expand") { 

      state.childData = childdata; 

      state.childDataBind(); 

    } else { 

      this.dataSource = { result: childdata, count: childdata.count }; 

    } 

  }, 

  columns: [ 

    { field: "TaskID", headerText: "Task ID", textAlign: "Right", width: 140 }, 

    { field: "TaskName", headerText: "Task Name", width: 160 }, 

    { 

      field: "StartDate", 

      headerText: "Start Date", 

      textAlign: "Right", 

      width: 120, 

      format: { skeleton: "yMd", type: "date" } 

    }, 

    { 

      field: "EndDate", 

      headerText: "End Date", 

      textAlign: "Right", 

      width: 120, 

      format: { skeleton: "yMd", type: "date" } 

    }, 

    { 

      field: "Duration", 

      headerText: "Duration", 

      textAlign: "Right", 

      width: 110 

    }, 

    { 

      field: "Progress", 

      headerText: "Progress", 

      textAlign: "Right", 

      width: 110 

    }, 

    { field: "Priority", headerText: "Priority", width: 110 } 

  ] 

}); 

Sample Link: https://codesandbox.io/s/reverent-wiles-nd95f 

Note: In order to achieve the custom binding, we have to bind dataSource as result and count. 

Also, refer the previously shared help documentation link in order to perform the treegrid action and CRUD action. 

Regards, 

Manivannan Padmanaban.