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

Lazy Loaded 'Local' Child data

Thread ID:

Created:

Updated:

Platform:

Replies:

148773 Nov 4,2019 03:43 AM UTC Nov 7,2019 06:12 AM UTC JavaScript - EJ 2 3
loading
Tags: TreeGrid
Grant EFive
Asked On November 4, 2019 03:43 AM UTC

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 [Syncfusion]
Replied On November 5, 2019 12:59 PM UTC

Hi Grant, 

Thanks for using Syncfusion Products. 

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


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
Replied On November 5, 2019 10:15 PM UTC

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


Manivannan Padmanaban [Syncfusion]
Replied On November 7, 2019 06:12 AM UTC

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 } 
  ] 
}); 



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. 



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.

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

Live Chat Icon For mobile
Live Chat Icon