Filter Dropdown with multiple grids on one page for the same column (name) not working

[Martin Strojek]

Hi,

I have a view component with 3 grid components which shows some prefiltered (different) view on a data source which is working fine.

Unfortunaltely it seems there is a bug in the filter (only tried with custom dropdown), because all dropdowns have the same id (filter for same column name on each grid)

So choosing the filter only work once for one grid, after dropdown opened the other 2 are not opening any more.

It's working again if I reload one of the grids, then for one selection the dropdown will work and after that the other 2 filters are not opening any more again.

Is there a way to set the id of the filter control via parameters?

Or a option to make the id unique?

...

-----------

...

-----------

...

-----------

-----------

The following definitions for each grid 

this.filterOptions1 = {

showPredicate: false,

filteredColumns: [

{

field: 'Column1', matchCase: false, operator: [ej.FilterOperators.equal], value: '0'

}

]

};  

...

this.filterBarTemplate1 = {

read: function (args: any) {

this.filterColumn(args.column.field, "equal", args.element.val(), "and", true)

},

write: function (args: any) {

let data = new Array();

data.push({ text: "All", value: 0 });

data.push({ text: "Type 1", value: 1 })

data.push({ text: "Type 2", value: 2 })

data.push({ text: "Type 3", value: 3 })

var selectedVal = this.model.filterSettings.filteredColumns[0].value;

args.element.ejDropDownList({ width: "100%", dataSource: data, value: selectedVal, change: ej.proxy(args.column.filterBarTemplate.read, this, args) })

}

};

I'm using V 15.4

[Prasanna Kumar Viswanathan]

Hi Martin, 

Thanks for using Syncfusion products. 

According to your query, we suspect that you are facing issue while using filterBarTemplate in three ejGrid which has the same column name. we have prepared a sample and we are able to reproduce the reported issue at our end.  

We suggest you to change the id of the filterbartemplate while rendering dropdown. Refer the below code snippet 

constructor() { 

        this.gridData = window.gridData;  

..            .         .       .       .  

           this.CustomerIDFilterBarTemp = { 

            create: function (args) { 

                return "<input>" 

            }, 

            write: function (args: any) { 

 

                let data = new Array(); 

                data.push({ text: "All", value: 0 }); 

                data.push({ text: "Type 1", value: 1 }) 

                data.push({ text: "Type 2", value: 2 }) 

                data.push({ text: "Type 3", value: 3 }) 

                args.element.attr("id",this._id + args.element.attr("id")) 

              //  var selectedVal = this.model.filterSettings.filteredColumns[0].value; 

                args.element.ejDropDownList({ width: "100%", dataSource: data, value: "2",change: ej.proxy(args.column.filterBarTemplate.read, this, args)}) 

            }, 

            read: function (args) { 

                this.filterColumn(args.column.field, "equal", args.element.val(), "and", true) 

            } 

        }; 

    }    

 

      

Please get back to us if you have further queries. 

Regards, 

Prasanna Kumar N.S.V 

 

[Martin Strojek]

Thanks a lot - that line fixed the problem.

[Prasanna Kumar Viswanathan]

Hi Martin, 

 

We are happy to hear that your issue has been solved. 

 

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

 

Regards, 

Prasanna Kumar N.S.V