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

Ruby on Rails

Thread ID:

Created:

Updated:

Platform:

Replies:

150647 Jan 14,2020 01:42 PM UTC Jan 23,2020 06:44 PM UTC React - EJ 2 3
loading
Tags: Grid
Pantelis
Asked On January 14, 2020 01:42 PM UTC

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.


Balaji Sekar [Syncfusion]
Replied On 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. 
 
Regards, 
Balaji Sekar. 


Pantelis
Replied On 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 => {
                setData(data);
            })
        }, [])

        let grid;

        const dataSourceChanged = (state) => {
            console.log(state);
            if(state.action === "add") {
                addUser(state.data);
                 state.endEdit();
                
                //state.endEdit();
            } else if (state.action === "edit") {
                updateUser(state.data);
                 state.endEdit();
            } else if (state.requestType === "delete") {
                deleteUser(state.data[0].id);
                 state.endEdit();
            }
        } 

        const dataStateChange = (state) => {
            console.log(state);
        }

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

    const toolbarClick = (args) => {
        switch (args.item.text) {
            case 'PDF Export':
                grid.pdfExport();
                break;
            case 'Excel Export':
                grid.excelExport();
                break;
            case 'CSV Export':
                grid.csvExport();
                break;
            default:
                break;
        }
    }



    return(
    <>
        <br /><br />
        <div className='control-pane'>
        <div className='control-section'>
          <GridComponent dataSource={data} 
           editSettings={editSettings} 
           allowResizing={true
           allowReordering={true}  
           toolbar={toolbarOptions} 
            allowSorting={true
            allowFiltering={true
            allowPaging={true
            allowExcelExport={true
            allowPdfExport={true
            allowGrouping={true
            toolbarClick={toolbarClick.bind(this)}
            ref={g => grid = g }
            actionFailure={actionFailure}
            dataSourceChanged={dataSourceChanged}
            dataStateChange = {dataStateChange}
            >
            <ColumnsDirective>
                    <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' />
             </ColumnsDirective>
            <Inject services={[Page, Toolbar, ExcelExport, PdfExport, Group, Sort, Filter, Resize, Reorder, Edit]}/>
          </GridComponent>
        </div>
      </div>


    </>
    )
}



export default Users;




Balaji Sekar [Syncfusion]
Replied On 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.
 
Regards, 
Balaji Sekar. 


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