1. Home
  2. Forum
  3. React - EJ 2
  4. dataSourceChanged event is not fired.

dataSourceChanged event is not fired.

Nothing is in the console.

import "./App.css";
import {
    GridComponent,
    Page,
    Inject,
    Edit,
    Toolbar,
    Filter,
    Sort,
} from "@syncfusion/ej2-react-grids";

import { getIncidents } from "./service";
import { useEffect, useState } from "react";

function App() {
    const [data, setData] = useState();

    useEffect(() => {
        getIncidents().then((data) => {
            setData(data);
        });
    }, []);

    const editOptions = {
        allowEditing: true,
        allowAdding: true,
        allowDeleting: true,
    };
    const toolbarOptions = ["Add", "Edit", "Delete", "Update", "Cancel"];

    const filterOptions = {
        ignoreAccent: true,
        type: "Menu",
    };

    function dataSourceChanged(a) {
        console.log("h");
        console.log(a);
    }
    return (
        <div style={{ margin: "10%", marginTop: "5%" }}>
            <GridComponent
                dataSource={data}
                editSettings={editOptions}
                toolbar={toolbarOptions}
                allowFiltering
                filterSettings={filterOptions}
                allowSorting
                allowSelection
                dataSourceChanged={dataSourceChanged}
            >
                <Inject services={[Page, Edit, Toolbar, Filter, Sort]} />
            </GridComponent>
        </div>
    );
}

export default App;


//service.js
const baseUrl = "http://localhost:5000";

// get
export function getIncidents() {
    return fetch(baseUrl + "/incident/view").then((res) => res.json());
}

3 Replies 1 reply marked as answer
PG Praveenkumar Gajendiran Syncfusion Team November 9, 2020 12:55 PM UTC

Hi Prajwol, 

Thanks for contacting Syncfusion support. 

We would like to inform you that by default the Grid’s dataSourceChanged event will be triggered only when the data is bound as a result(JSON data source) and count(Total data count) object. Please refer the below document for more information,

API Link:  https://ej2.syncfusion.com/react/documentation/api/grid/#datasourcechanged

Documentation: https://ej2.syncfusion.com/react/documentation/grid/data-binding/#custom-binding 

Please get back to us if you need further assistance.  
 
Regards, 
Praveenkumar G 


PR Prajwol November 9, 2020 01:55 PM UTC

I went through the docs but I am still not sure how we bind to JSON data source. The data is already in JSON format. I am still confused about the count. Can you help me?

PG Praveenkumar Gajendiran Syncfusion Team November 10, 2020 03:26 PM UTC

Hi Prajwol, 

Thanks for your update.

We checked your query. Based on that we suggest you to refer the below code example, sample and documentation. 

Code Example: 
dataStateChange(state) { 
        this.orderService.execute(state).then((gridData) => { this.grid.dataSource = gridData; }); 
    } 
    render() { 
        return (<div className='control-pane'> 
        <div className='control-section'> 
          <GridComponent dataSource={this.data} ref={g => this.grid = g} allowPaging={true} allowSorting={true} pageSettings={{ pageCount: 4, pageSize: 10 }} dataStateChange={this.dataStateChange.bind(this)}> 
            <ColumnsDirective> 
              <ColumnDirective field='OrderID' headerText='Order ID' width='120'></ColumnDirective> 
              <ColumnDirective field='CustomerID' headerText='Customer Name' width='150'></ColumnDirective> 
              <ColumnDirective field='ShipName' headerText='Ship Name' width='120'/> 
              <ColumnDirective field='ShipCity' headerText='Ship City' width='150'></ColumnDirective> 
            </ColumnsDirective> 
            <Inject services={[Page, Group, Sort]}/> 
          </GridComponent> 
        </div> 
      </div>); 
    } 
} 
export class OrderService { 
    constructor() { 
        this.ajax = new Ajax({ 
            type: 'GET', mode: true, 
            onFailure: (e) => { return false; } 
        }); 
        this.BASE_URL = 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders'; 
    } 
    execute(state) { 
        return this.getData(state); 
    } 
    getData(state) { 
        const pageQuery = `$skip=${state.skip}&$top=${state.take}`; 
        let sortQuery = ''; 
        if ((state.sorted || []).length) { 
            sortQuery = `&$orderby=` + (state).sorted.map((obj) => { 
                return obj.direction === 'descending' ? `${obj.name} desc` : obj.name; 
            }).reverse().join(','); 
        } 
        this.ajax.url = `${this.BASE_URL}?${pageQuery}${sortQuery}&$inlinecount=allpages&$format=json`; 
        return this.ajax.send().then((response) => { 
            let data = JSON.parse(response); 
            return { result: data['d']['results'], count: parseInt(data['d']['__count'], 10) }; // return result(JSON data source) and count(Total data count) object 
        }); 
    } 
} 

If this is not your requirement, please get back to us with detailed description of your requirement.  
 
Regards, 
Praveenkumar G 


Marked as answer
Loader.
Up arrow icon