This is a migrated thread and some comments may be shown as answers.
How to dynamically change new filters to the kendo grid
3 Answers 87 Views
This is a migrated thread and some comments may be shown as answers.
Karthik
Top achievements
Rank 1
Karthik asked on 22 Aug 2017, 05:29 AM

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 ?
  

3 Answers, 1 is accepted

Sort by
0
Karthik
Top achievements
Rank 1
answered on 22 Aug 2017, 07:14 AM

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"};
};
});

0
Karthik
Top achievements
Rank 1
answered on 23 Aug 2017, 05:16 AM

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;

0
Tsvetina
Telerik team
answered on 23 Aug 2017, 11:21 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Karthik
Top achievements
Rank 1
Answers by
Karthik
Top achievements
Rank 1
Tsvetina
Telerik team
Share this question
or