Using dataBound in a grid the filters stop working

[Luis]

Hi,

I have been playing with some of your examples before implement my requirements, and I have notice that:

- Using dataBound to define some properties for the columns the filters stop working automatically. 

- If I remove the dataBound everything works as expected.

Any way for me to do this?

Thanks a lot

Luis

Here you can see my code:

var data = [{ OrderID: 10248, CustomerID: 'VINET', Freight: 32.38, OrderDate: new Date(8364186e5) },

        { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61, OrderDate: new Date(836505e6) },

        { OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83, OrderDate: new Date(8367642e5) },

        { OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34, OrderDate: new Date(8368506e5) },

        { OrderID: 10252, CustomerID: 'SUPRD', Freight: 51.3, OrderDate: new Date(8367642e5) },

        { OrderID: 10253, CustomerID: 'HANAR', Freight: 58.17, OrderDate: new Date(836937e6) },

        { OrderID: 10254, CustomerID: 'CHOPS', Freight: 22.98, OrderDate: new Date(8370234e5) },

        { OrderID: 10255, CustomerID: 'RICSU', Freight: 148.33, OrderDate: new Date(8371098e5) },

        { OrderID: 10256, CustomerID: 'WELLI', Freight: 13.97, OrderDate: new Date(837369e6) }];

        ej.grids.Grid.Inject(ej.grids.Page, ej.grids.Sort, ej.grids.Filter, ej.grids.ExcelExport, ej.grids.Toolbar);

        var grid = new ej.grids.Grid({

            dataSource: data,

            dataBound: dataBound,

            //columns: [

            //    { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },

            //    { field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' },

            //    { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },

            //    { field: 'OrderDate', headerText: 'Order Date', width: 140, format: { type: 'date', format: 'dd/MM/yyyy' } }

            //],

            allowFiltering: true,

            allowPaging: true,

            allowTextWrap: true,

            filterSettings: { type: 'Excel' },

            height: '100%',

            pageSettings: { pageSize: 6 },

            allowSorting: true,

            allowExcelExport: true,

            toolbar: ['ExcelExport']

            

        });

        grid.toolbarClick = function (args) {

            if (args['item'].id === 'Grid_excelexport') {

                grid.excelExport();

            }

        }

        grid.appendTo('#Grid');

        function dataBound(args) {

            for (var i = 0; i < this.columns.length; i++) {

                //this.columns[0].width = 120;

                if (this.columns[i].field === "OrderDate") {

                    this.columns[i].type = "date";

                }

                if (this.columns[i].type === "date") {

                    this.columns[i].format = { type: "date", format: "dd/MM/yyyy" };

                }

                //this.columns[2].format = "P2";

            }

            this.refreshColumns();

        }

[Vignesh Sivagnanam]

Hi Luis 

  

Greetings from Syncfusion support 

  

Based on your query you have faced issue while providing the columnType to the grid columns in the EJ2 Grid dataBound event. The dataBound event is triggered continuously by looping. So we suggest you to use the flag variable to execute the dataBound event once at initial rendering.  

  

Use a global flag variable to ensure that this case is executed only once(since the dataBound event will be triggered each time the Grid data is modified). 

  

Please refer the below code example and sample for your reference, 

  

var flag = true; 

function dataBound(args) { 

  if (flag === true) { 

    flag = false; 

    ………………………………………….. 

  } 

} 

  

Sample : https://stackblitz.com/edit/7644sp?file=index.js 

  

Regards 

Vignesh Sivagnanam