Prevent multiple column filtering

2 posts, 0 answers
  1. Georg
    Georg avatar
    1 posts
    Member since:
    May 2017

    Posted 10 Aug 2017 Link to this post

    Hi,

    I have a scenario where an API I'm using is only able to filter by one column at a time. So either name, or email, or phone number, stuff like that. 

    How can I prevent multiple filters being set at the same time?

     

    I tried binding a mousedown handler to the filter button in the filter menu and iterating over the existing filters to set them to an empty string. Something like this, which I found here on the forums:

    1.$(".k-filter-menu").find("button[type='submit']").on("mousedown", function() {
    2.    var dataSource = $("#myGrid").data("kendoGrid").dataSource;
    3.    for (var i = 0; i < dataSource.options.fields.length - 1; i++) {
    4.         dataSource.filter({ field: dataSource.options.fields[i].field, value: "" });
    5.    }
    6.    dataSource.filter([]);
    7.});

     

    This triggered several ajax calls though with filters like "Name~undefined~''".

    Is there a better way to handle this scenario?

     

    Kind regards,

    Georg

  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 14 Aug 2017 Link to this post

    Hello Georg,

    Thank you for the provided information.

    I can suggest using the filter event of the Grid. Then on the event to check if the filters are more than one and if there are to prevent the default filtering. Then to loop through all filters and send separate requests:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-filter

    filter:function(e){
     if(e.filter.filters.length > 1){
      e.preventDefault()
      for (let i =0; i <e.filter.filters.length; i++ ){
       var nextFilter = e.filter.filters[i]
       e.sender.dataSource.filter(nextFilter)                           
      }                  
     }
    },

    I hope this will help to achieve the desired result.

    Regards,
    Stefan
    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