How to dynamically change new filters to the kendo grid

4 posts, 0 answers
  1. Karthik
    Karthik avatar
    6 posts
    Member since:
    Oct 2015

    Posted 22 Aug 2017 Link to this post

    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 ?
      

  2. Karthik
    Karthik avatar
    6 posts
    Member since:
    Oct 2015

    Posted 22 Aug 2017 Link to this post

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

  3. Karthik
    Karthik avatar
    6 posts
    Member since:
    Oct 2015

    Posted 23 Aug 2017 Link to this post

    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;

  4. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 23 Aug 2017 Link to this post

    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.
Back to Top