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. Image for the cookie policy date

Ruby on Rails

Is there any best practice guide or documentation describing how could one possibly use syncfusion controls (e.g. datagrid) with data provided by a ruby on rails web api.

3 Replies

BS Balaji Sekar Syncfusion Team January 20, 2020 07:22 AM UTC

Hi Pantelis, 
Greetings from Syncfusion Support. 
We have validated your requirement and you can bind the data to Grid in any service by using ‘custom-binding’ feature of Grid. In this feature , Grid has ‘dataStateChange’ and ‘dataSourceChanged’ event.  
dataStateChange : this event is called with Grid queries in  every Grid action begins (like paging, sorting , filtering , grouping etc.). So you can call your API here. Please find the code example : 
public dataStateChange(state : DataStateChangeEventArgs) { 
    this.orderService.execute(state).then(( gridData ) => {this.grid.dataSource = gridData} ); 
dataSourceChanged : this event is called with Grid queries when performing CRUD operation . please find the code example 
   public dataSourceChanged(state: DataSourceChangedEventArgs): void { 
      if (state.action === 'add') { 
        this.orderService.addRecord(state).then(() => state.endEdit()); 
      } else if (state.action === 'edit') { 
        this.orderService.updateRecord(state).then(() => state.endEdit()); 
      } else if (state.requestType === 'delete') { 
        this.orderService.deleteRecord(state).then(() => state.endEdit()); 
Please find the demo and documentation for your reference. 
Note : the ‘dataStateChange’ event is not called initially . So you need to call in Grid ‘dataBound’ event. 
Balaji Sekar. 

PA Pantelis January 20, 2020 01:12 PM UTC

Hello again,
we use the following code and we run into the following problems. After each action(edit add or delete) the grid freezes at the waiting popup. The same thing happens if we try to use the Sorting, filterings, etc. We want to use the data fetched from the server as local data to have the advantage of super fast javascript sorting, filtering, etc and just use server side action to persist the data to the server, but if i try to just pass the data from the props, js filtering etc works like a charm but then the dataSourceChanged event doesn't trigger. I tried all the options, the code i am senting you is from my effort to implement a custom servive for my crud operations and it is the one that freezes at the waiting popup.  

import React, { useState, useEffect } from "react";
import { ColumnDirective, ColumnsDirective, GridComponent, Group, Resize, Toolbar, Page, ExcelExport, PdfExport, Reorder } from '@syncfusion/ej2-react-grids';
import { Inject, Sort, Filter, Edit, } from '@syncfusion/ej2-react-grids';
import { getUsers, addUser, updateUser, deleteUser } from "../services/users_service";

const Users = () => {

        const toolbarOptions = ['ExcelExport', 'PdfExport', 'CsvExport', 'Print', 'Search', 'Add', 'Edit', 'Delete', 'Update', 'Cancel']; 
        const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' }//mode: 'Dialog' };
        const [datasetData= useState();
        useEffect(() => {
            getUsers().then(data => {
        }, [])

        let grid;

        const dataSourceChanged = (state) => {
            if(state.action === "add") {
            } else if (state.action === "edit") {
            } else if (state.requestType === "delete") {

        const dataStateChange = (state) => {

        const actionFailure = (state) => {
            console.log("failure", state)

    const toolbarClick = (args) => {
        switch (args.item.text) {
            case 'PDF Export':
            case 'Excel Export':
            case 'CSV Export':

        <br /><br />
        <div className='control-pane'>
        <div className='control-section'>
          <GridComponent dataSource={data} 
            ref={g => grid = g }
            dataStateChange = {dataStateChange}
                    <ColumnDirective field='id' headerText='id' allowEditing={falseisPrimaryKey={truewidth='150' />
                    <ColumnDirective field='email' headerText='email' width='150' />
                    <ColumnDirective field='username' headerText='username' width='150' />
                    <ColumnDirective field='contact_id' headerText='contact_id' width='150' />
                    <ColumnDirective field='created_at' headerText='created_at' allowEditing={falsewidth='150' />
                    <ColumnDirective field='updated_at' headerText='updated_at' allowEditing={falsewidth='150' />
            <Inject services={[Page, Toolbar, ExcelExport, PdfExport, Group, Sort, Filter, Resize, Reorder, Edit]}/>


export default Users;

BS Balaji Sekar Syncfusion Team January 23, 2020 06:44 PM UTC

Hi Pantelis, 
Thanks for your patience. 
From your query we can understand that dataSourceChanged event is not triggered during CRUD operations. We have validated your query and checked from our end. The dataSourceChanged event triggers fine from our side. Ensure that you have returned dataSource with the result and count format. We have attached a screenshot for your reference. 
Please share more details that will be helpful for us to validate. 
  1. Please share the sample from your side.
  2. Please share if you faced any script error.
Balaji Sekar. 

Live Chat Icon For mobile
Up arrow icon