How to dynamically change new filters to the kendo grid

[Karthik]

Hi Team,

I have a kendo grid ,that has each 10 column different filterable options.

Eg: column 1,2  and 3  has the below config

columns : [{
field : "xx",
title : 'xx'
filterable :operators: {
string: {
eq: "Equal to",
neq: "Not Equal to",
contains: "Contains",
doesnotcontain: "Does not contains",
startswith: "Starts with",
endswith: "Ends with"
},extra:false
}},

{
field : "yy",
title : 'yy'
filterable :operators: {
string: {
eq: "Equal to",
neq: "Not Equal to"
},extra:false
}},

{
field : "zz",
title : 'zz'
filterable :operators: {
string: {
eq: "Equal to",
neq: "Not Equal to",
contains: "Contains",
doesnotcontain: "Does not contains",
startswith: "Starts with",
endswith: "Ends with"
},extra:false
}}]

Now filter is applied to column 1, I need to change dynamically the column of 2 and 3 ,and I tried the below 

angular.element("#allApsGrid").data("kendoGrid").columns[1].filterable.operators.string = {contains:"Contains to"};
            angular.element("#allApsGrid").data("kendoGrid").columns[2].filterable.operators.string = {contains:"Contains to"};

 

But setting this dynamically is not reflecting in the kendo grid , I still see the old values of all operators. Can someone please help me here as how can I set custom per column filter dynamically ?
  

[Karthik]

I tried using setOptions of the grid element. But looks like it's going to an infinite loop. 

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setOptions

The below function is called in the read of transport method, and when filter is applied. 

var columns1 = angular.element("#xx").data("kendoGrid").getOptions().columns;
columns1.forEach(function(data,i){
if(data.filterable.operators["string"] != undefined ){
columns1[i].filterable.operators.string = {contains:"Contains to"};
};
});

[Karthik]

Found a solution for this

You can use getOptions to get the columns , change the filter that you want and then set it back. While setting back make sure you have a flag to avoid any loop calls back to grid read function.

 

var columns1 = angular.element("#xx").data("kendoGrid").getOptions().columns;
/**your logic to change filters goes here **/
};
});

//Reassign the column here. 
$scope.xx.columns = columns1;

[Tsvetina]

Hello Karthik,

Thank you for sharing your findings with the community. Indeed, there needs to be a check when calling setOptions in the Grid (and DataSource) events to avoid loop calls. This is so because the setOptions() method recreates the Grid using the new options provided as an argument. This triggers a new data read, which goes through the Grid and DataSource binding-related events.

Regards,
Tsvetina
Progress Telerik