Ruby on Rails

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.

Reply | Reply with quote

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.

https://ej2.syncfusion.com/react/demos/#/material/grid/custom-binding

https://ej2.syncfusion.com/react/documentation/grid/data-binding/?no-cache=1#custom-binding

Note : the ‘dataStateChange’ event is not called initially . So you need to call in Grid ‘dataBound’ event.

Regards,

Balaji Sekar.

Reply | Reply with quote

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 [data, setData] = 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={false} isPrimaryKey={true} width='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={false} width='150' />
                    <ColumnDirective field='updated_at' headerText='updated_at' allowEditing={false} width='150' />
             </ColumnsDirective>
            <Inject services={[Page, Toolbar, ExcelExport, PdfExport, Group, Sort, Filter, Resize, Reorder, Edit]}/>
          </GridComponent>
        </div>
      </div>


    </>
    )
}



export default Users;

Reply | Reply with quote

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.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US