DataStateChange event not triggering in Syncfusion JS grid.

Question

I am trying to use Syncfusion js2 grid.I am using dataStateShange event in grid API but it's not triggering.Could you please provide a demo or example of how to use it?I am sending you the example that I tried and you can see nothing is showing in console.https://stackblitz.com/edit/zt6jop?file=index

Rajapandi Ravi · Accepted Answer

Hi Varun,Thanks for the update.The infinite scrolling feature will work based on the lazy
load concept which means the buffer data is loaded
only when the scrollbar reaches the end of the scroller. So, when you use
custom binding in the grid component, the dataStateChange event will be triggered
when the scrollbar reaches the end of the scroller, so using the event you can
fetch and return the next set of records based on the skip and take
values, here you can perform the action in your service and return the
data in object format with result(current page records) and count(total
records count) value pair. Please refer the below
code example and screenshot for more information.

import { enableRipple } from '@syncfusion/ej2-base';
  enableRipple(true);
   
  import { Grid, Page, Selection, InfiniteScroll } from
  '@syncfusion/ej2-grids';
  import { orderData } from './data-source';
  import { Ajax } from '@syncfusion/ej2-base';
   
  Grid.Inject(Page, Selection, InfiniteScroll);
   
  /**
  * Default Page sample
  */

let grid: Grid = new Grid(
          {
             
  enableInfiniteScrolling:
  true,
             
  dataStateChange: dataStateChange,
             
  created: created,
             
  height: 400,
             
  columns: [
                 
  { field: 'OrderID', headerText: 'Order ID' },
                 
  { field: 'Freight', format: 'C2' },
                 
  { field: 'ShipCity', headerText: 'Ship City' },
                 
  { field: 'ShipCountry', headerText: 'Ship Country' }
             
  ],
             
  pageSettings: { pageSize: 40 }
          });
      grid.appendTo('#Grid');
   
  function getData(gridquery: any) {
      let state = gridquery;
      let BASE_URL = "https://services.odata.org/V4/Northwind/Northwind.svc/Orders";
   
      let sortQuery = "";
      const skipquery = state.skip ? `$skip=${state.skip}` :
  null;
      let pageQuery = "";
     
  const takeQuery =
  state.take ? `$top=${state.take}` : null;
     
  if (skipquery) {
         
  pageQuery = `${skipquery}&`;
     
  }
     
  if (takeQuery) {
         
  pageQuery = `${pageQuery}${takeQuery}`;
     
  }
     
  // you can perform your query here.
     
  var ajax = new Ajax(
         
  `${BASE_URL}?${pageQuery}${sortQuery}&$count=true`
     
  );
     
  ajax.send();
     
  ajax.onSuccess = (data: any) => {
         
  let final: any = JSON.parse(data);
         
  grid.dataSource = {
  result: final.value, count: final["@odata.count"] };
      };
  }
  function dataStateChange(state: any) {
      //
  Get grid queries from the Grid action
      getData(state);
  }
   
  function created() {
      let state = { skip: 0, take: 150 }; // for infinite scrolling, we need to bind three times
  of grid’s pageSize records at initial redering
      getData(state);
  }

Sample: https://stackblitz.com/edit/imgghl-uglpdl?file=package.json,index.ts,index.htmlRegards,Rajapandi R

Rajapandi Ravi · Answer

Hi Varun,Greetings from Syncfusion supportWe have checked your shared information and from validating
your sample we could see that you are bind the datasource as JSON data. To
trigger the dataStateChange event, you need bind the data in Object
format with result and count keys to the Grid’s dataSource at initial
render. The result property contains array of current page records and count
property contains total records length. Then only the dataStateChange event
will be triggered in the Grid. For every grid action(such
as Filter, Page, etc.,), we have
triggered the dataStateChange event and, in that event
arguments we have send the corresponding action details(like skip,
take, filter field, value, sort direction, etc.,) based on that, you can
perform the action in your service and return the data as a result and count object.API: https://ej2.syncfusion.com/documentation/api/grid/#datastatechangeNote: ‘dataStateChange’ event is not
triggered at the Grid initial render. If you are using a remote service, you
need to call your remote service by manually with a pagination query (need to
set skip value as 0 and take value
based on your pageSize of pageSettings in
Grid. If you are not defined pageSize in pageSettings,
you need to send the default value 12. Please return the result
like as “{result: […], count: …}” formatto
Grid.  Regards,Rajapandi R

Varun · Answer

Thanks for your reply.Now I understand how it works.I have one more question related to this, If I don't want to use pagination, is it possible to use dataStateChange event for the infinite scroll grid. How the logic will be in that case? and if I can't, is there any way to get all data of the current grid, I know getcurrentviewdata method but that's not gonna show for all pages.As per requirement, we don't use pagination, and for every filter or sort event change, we need to update the graphs.