Tree Grid not showing

[Richard]

I am attempting to create a TreeGrid based on a remote source - with data from https://j8erxrbda3.execute-api.eu-west-2.amazonaws.com/DEV/model?resource=Procedure&modelType=R4

The code I am using is as below. It shows the column headers but nothing else - what am I doing wrong?

import * as React from 'react';

import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';

import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

import './App.css';

function App() {

  var sddata = new DataManager({

    url: 'https://j8erxrbda3.execute-api.eu-west-2.amazonaws.com/DEV/model?resource=Procedure&modelType=R4',

    adaptor: new WebApiAdaptor()

  });

  return (

    <div className="App">

      <TreeGridComponent dataSource={sddata} treeColumnIndex={1} childMapping='children' idMapping='Path' >

        <ColumnsDirective>

          <ColumnDirective field='Path' headerText='Path' width='100' />

          <ColumnDirective field='Min' headerText='Min' width='150' />

          <ColumnDirective field='Max' headerText='Max' width='130' />

          <ColumnDirective field='Short' headerText='Short' width='100' />

        </ColumnsDirective>

      </TreeGridComponent>

    </div>

  );

}

export default App;

thanks

[Pon Selva Jeganathan]

  

Hi Richard,  

  

Greetings from the Syncfusion forum,   

  

Based on your code example,  you use Remote Data with a hierarchy of data binding.  We don't have this support for Remotedata with hierarchical data binding. We suggest that you use Remote Data with self-referential data binding.  

  

Please refer to the below help documentation:  

https://ej2.syncfusion.com/react/documentation/treegrid/data-binding/#remote-data  

 

Please refer to the below Demo Sample link: 

https://ej2.syncfusion.com/react/demos/#/material/treegrid/remote-data 

  

Kindly get back to us for further assistance.  

  

Regards,  

Pon selva  

[Richard]

  

Hi Richard,  

  

Greetings from the Syncfusion forum,   

  

Based on your code example,  you use Remote Data with a hierarchy of data binding.  We don't have this support for Remotedata with hierarchical data binding. We suggest that you use Remote Data with self-referential data binding.  

  

Please refer to the below help documentation:  

https://ej2.syncfusion.com/react/documentation/treegrid/data-binding/#remote-data  

 

Please refer to the below Demo Sample link: 

https://ej2.syncfusion.com/react/demos/#/material/treegrid/remote-data 

  

Kindly get back to us for further assistance.  

  

Regards,  

Pon selva  

Hello Syncfusion

Having looked at the example you referred to I have amended the API so the data is now not in a hierarchy, and now resembles the structure from your example at https://ej2services.syncfusion.com/production/web-services/api/SelfReferenceData

Following your example, I changed my code, but I am still not getting any results - what am I doing wrong?

import React from 'react';

import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';

import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

import './App.css';

function App() {

  const sddata = new DataManager({

    url: 'https://j8erxrbda3.execute-api.eu-west-2.amazonaws.com/DEV/model?resource=Procedure&modelType=R4',

    adaptor: new WebApiAdaptor(),

    crossDomain: true

  });

  var treegridInstance;

  return (

    <div className="App">

      <TreeGridComponent

        dataSource={sddata}

        ref={treegrid => treegridInstance = treegrid}

        treeColumnIndex={0} idMapping="Path" hasChildMapping='IsParent' parentIdMapping='ParentItem' >

        <ColumnsDirective>

          <ColumnDirective field='Path' headerText='Path' width='100' />

          <ColumnDirective field='Min' headerText='Min' width='20' />

          <ColumnDirective field='Max' headerText='Max' width='20' />

          <ColumnDirective field='Short' headerText='Short' width='300' />

        </ColumnsDirective>

      </TreeGridComponent>

    </div>

  );

}

export default App;

[Richard]

Apologies - it appears the issue was related to CORS - it's working now.

thanks

[Pon Selva Jeganathan]

Hi Richard,    

   

Thanks for the update.     

   

We are happy to hear that the query has been resolved.  

   

Kindly get back to us for further assistance.   

   

Regards,   

Pon selva