Ej2 Grid: It seems Grid dataBound event handler is called twice?

[ISMAIL HAMZAH]

Hello,

It seems Grid dataBound is called twice? is it default behavior?

Best regards,

Ismail

[Vignesh Sivagnanam]

Hi ISMAIL 

Greetings from Syncfusion support 

Based on your query, we found that you have faced issue that the EJ2 Grid dataBound event is triggered twice. Based on your query, we have validated the reported issue at our end and the dataBound event is  triggered at once. 

  

Please refer the below sample and screenshot for your reference, 

Sample : https://stackblitz.com/edit/xavbb9 

 

If your still faced the reported issue at your end, please share the below details to validate further, 

1. If possible share the issue reproduced sample or replicate the issue in the above sample. 

2. Share the full grid rendering code. 

3. Syncfusion package version. 

Please get back to us for further assistance 

Regards 

Vignesh Sivagnanam 

[ISMAIL HAMZAH]

Hello Vignesh,

By using your code, I have replicate the issue:

import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

import { Grid, Selection } from '@syncfusion/ej2-grids';

import { Query, DataManager } from '@syncfusion/ej2-data';

import { orderData } from './data-source';

Grid.Inject(Selection);

/**

 * Default Grid sample

 */

function datobound(args: any): void {

  console.log('datobound is triggered');

}

let data: Object = new DataManager(orderData as JSON[]).executeLocal(

  new Query().take(15)

);

let grid: Grid = new Grid({

  columns: [

    {

      field: 'OrderID',

      headerText: 'Order ID',

      width: 120,

      textAlign: 'Right'

    },

    { field: 'CustomerName', headerText: 'Customer Name', width: 150 },

    {

      field: 'OrderDate',

      headerText: 'Order Date',

      width: 130,

      format: 'yMd',

      textAlign: 'Right'

    },

    { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },

    {

      field: 'ShippedDate',

      headerText: 'Shipped Date',

      width: 140,

      format: 'yMd',

      textAlign: 'Right'

    },

    { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }

  ],

  dataBound: datobound

});

loadGrid();

function loadGrid(){  

grid.appendTo('#Grid');

grid.dataSource = data;

}

[Vignesh Sivagnanam]

Hi ISMAIL 

Thanks for the update 

Based on your query, we have validated your code example and our end and found that you have append the grid inside the function and provide the grid dataSource dynamically after appending the grid. The EJ2 Grid’s dataBound event is triggered due to the appending of dataSource dynamically after the grid component is created.  

To resolve the issue at your end, we suggest you to provide datasource before grid append. 

Please refer the below code example for your reference,  

function loadGrid() { 

  grid.dataSource = data; 

  grid.appendTo('#Grid'); 

} 

Please get back to us for further assistance, 

Regards 

Vignesh Sivagnanam 

[ISMAIL HAMZAH]

Hello Vignesh,

Thank you for your update. The solution you provide, successfully solve the problem.

Thank you for your help and support.

Best regards,

Ismail

[Vignesh Sivagnanam]

Hi ISMAIL 

Thanks for the update 

We are happy to hear that the provided solution works fine at your end. 

Please get back to us if you need any further assistance. 

Regards, 

Vignesh Sivagnanam