1. Home
  2. Forum
  3. React - EJ 2
  4. any methods without using DataManager instance with grid components?

any methods without using DataManager instance with grid components?

I am currently using the gantt, scheduler, and grid components and want to link with my REST APIs.


When linking the back-end with the above three components, are there any methods without using DataManager instance with those components?


The development environment uses React, JavaScript, and Hook.


2 Replies
SK Sujith Kumar Rajkumar Syncfusion Team October 13, 2021 12:55 PM UTC

Hi SK, 
 
Greetings from Syncfusion support. 
 
Please find the response for your queries in the mentioned components below, 
 
Grid: 
 
For binding data to the Grid from your API service without using data manager, you can use one of the below approaches, 
 
Custom binding: 
 
If you are using the API calls to perform Grid action from the server, then we suggest you to custom binding approach to bind data in the Grid. With this you can bind data from an API call by providing your own custom queries(as required by your API) and handle all the Grid actions(Sort, Page, Filter, etc. ) with it. The Grid’s custom binding approach is explained below, 
 
For using custom binding, you need to bind the response data(Grid data) returned from your API as an object of result(JSON data source) and count(Total data count) properties and set it to the Grid’s dataSource property. On setting the data source in this format, the ‘dataStateChange’ event will be triggered with corresponding query for every Grid action performed like Paging, Sorting and Filtering.., and the ‘dataSourceChanged’ event will be triggered while performing CRUD action in Grid. So using this you can send the queries in your required format to your API, process and return the result and then assign the returned result to the Grid’s dataSource property as an object of result and count properties. 
 
More details on custom binding with online demo sample can be checked in the below links, 
 
 
 
 
Note:  The ‘dataStateChange’ event will not be triggered on Grid initial render. So for this case you need to return the data in the above mentioned format on initialization and assign it to the Grid’s dataSource property. 
 
Ajax binding: 
 
You can use ajax call to send request to your server, return back the data to the client, parse the returned data to JSON format and bind it to the Grid’s dataSource property. This will be considered as local data in the Grid. More details on this can be checked in the below documentation link, 
 
 
Note: Using similar approach you can also make you axios call to retrieve the data and bind it the Grid’s dataSource property. 
 
Scheduler: 
 
You can use actionBegin event to perform CRUD actions. In the following sample we have used axios to get and update data from/to scheduler in dataBound and actionBegin event.  
 
 
Code snippet: 
 
<ScheduleComponent height="650px" ref={schedule => (this.scheduleObj = schedule)} currentView="Month" selectedDate={new Date(2020, 5, 10)} dataBound={this.onBound.bind(this)} actionBegin={this.onBegin.bind(this)} >  
 
onBound(args) {  
    if (this.flag) {  
      axios.get('http://localhost:54738/Home/GetData').then(response => {  
        var schObj = document.querySelector('.e-schedule').ej2_instances[0];  
        schObj.eventSettings.dataSource = response.data;  
      });  
      this.flag = false;  
    }  
}  
  
onBegin(args) {  
    if (args.requestType === 'eventCreate') {  
      axios  
        .post('http://localhost:54738/Home/Insert', args.data[0])  
        .then(response => {  
          var schObj = document.querySelector('.e-schedule').ej2_instances[0];  
          schObj.eventSettings.dataSource = response.data;  
        });  
    } else if (args.requestType === 'eventChange') {  
      axios  
        .post('http://localhost:54738/Home/Update', args.data)  
        .then(response => {  
          var schObj = document.querySelector('.e-schedule').ej2_instances[0];  
          schObj.eventSettings.dataSource = response.data;  
        });  
    } else if (args.requestType === 'eventRemove') {  
      axios  
        .post('http://localhost:54738/Home/Delete', args.data[0])  
        .then(response => {  
          var schObj = document.querySelector('.e-schedule').ej2_instances[0];  
          schObj.eventSettings.dataSource = response.data;  
        });  
    }  
} 
 
Gantt: 
 
We are currently validating this query in the Gantt component from our end and we will share the further on 14th October 2021. 
 
Until then your patience is appreciated. 
 
Regards, 
Sujith R 


MS Monisha Sivanthilingam Syncfusion Team October 18, 2021 12:48 PM UTC

Hi SK, 
 
Thank you for your patience. 
 
We have prepared a sample using axios to get and update data from/to the Gantt Chart in the dataBound and actionBegin events. The following code snippets demonstrate the solution. 
 
Index.js 
 
onBound(args) { 
    if (this.flag) { 
      axios.get('http://localhost:54738/Home/GetData').then((response) => { 
        var ganttObj = document.querySelector('.e-gantt').ej2_instances[0]; 
        ganttObj.dataSource = response.data; 
      }); 
      this.flag = false; 
    } 
  } 
 
 
 
Please contact us if you require any further assistance. 
 
Regards, 
Monisha. 


Loader.
Up arrow icon