Adding filters to Grid's source

7 posts, 0 answers
  1. dccxz
    dccxz avatar
    25 posts
    Member since:
    Jun 2007

    Posted 22 Mar 2012 Link to this post

    Hello,
    I have a datasource (shared) I use for a grid.
    The grid has server filtering, which works fine. I also have a toolbar with few drop downs.
    I hooked into a change event for those Ddls and call Source filter with them.
    THe issue I have so far - how do I combine filters? If I filter on a single Drop down, then apply a filter on any column in the grid - it's fine, but not the other way around. Doing drop down selection last - kills column filters.

    How can I add filters from drop downs instead of overwriting them?
    The idea is to combine column filtering with drop downs or other fields in the toolbar.
    Thanks
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 23 Mar 2012 Link to this post

    Hi Ivan,

    I believe the problem is caused by the way the filter from the dropDownList is applied. The filter method accepts array of objects and will reset all previous applied filters if they are not passed as an arguments.

    As a solution for that issue I suggest to add the new filter into the filter().filters array and pass it to the method. For example: 
    //get dropDownValue
    var value = this.value();
    //get dataSource
    var ds = grid.data("kendoGrid").dataSource;
    //get dataSource's array of filters
    var curr_filters = ds.filter().filters;
    //create new filter object
    var new_filter = { field: "Id", operator: "eq", value: parseInt(value) };
    //add new_filter to filters
    curr_filters.push(new_filter);
    //apply the filters
    ds.filter(curr_filters)

    I hope this information will help you to solve the problem.

    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Scott
    Scott avatar
    1 posts
    Member since:
    Feb 2007

    Posted 28 Aug 2012 Link to this post

    I developed this function based on info in this post. Thought other people may find it useful: 

    function updateSearchFilters(grid, field, operator, value) {
        var newFilter = { field: field, operator: operator, value: value };
        var dataSource = grid.data("kendoGrid").dataSource;
        var filters = null;
        if ( dataSource.filter() != null){
            filters = dataSource.filter().filters;
        }       
        if ( filters == null ) {
            filters = [newFilter];
        }
        else {
            var isNew = true;
            var index = 0;
            for(index=0; index < filters.length; index++) {
                if (filters[index].field == field) {
                    isNew = false;
                    break;
                }
            }
            if ( isNew){
                filters.push(newFilter);
            }
            else {
                filters[index] = newFilter;
            }
        }
        dataSource.filter(filters);
    }
  5. Michael
    Michael avatar
    8 posts
    Member since:
    Jan 2009

    Posted 30 Sep 2014 in reply to Scott Link to this post

    @Scott, Thank you very much for the function, very useful.
  6. Michael
    Michael avatar
    8 posts
    Member since:
    Jan 2009

    Posted 01 Oct 2014 in reply to Michael Link to this post

    Although I did notice that each time the function is called, the filter is executed (DB is hit, grid re-bind), which is not my desired goal, as I would prefer to pass multiple filters (one at a time) and then execute the filter, so I'll need to rework the function somehow.
  7. Michael
    Michael avatar
    8 posts
    Member since:
    Jan 2009

    Posted 01 Oct 2014 in reply to Michael Link to this post

    Following is my revised function, which just builds an array of filters instead. Also added the "logic" parameter. And also added a check for the "operator" value in case you want to filter a range on the same field (e.g. Order Date).
    function FilterOrdersGrid() {
            var grid = $("#grdOrders").data("kendoGrid");
            var orderDateFromFilter = $("#dpOrderDateFromFilter").data("kendoDatePicker");
            var orderDateToFilter = $("#dpOrderDateToFilter").data("kendoDatePicker");
            var filters = [];
     
            if (orderDateFromFilter.value() != null) {
                filters = UpdateSearchFilters(filters, "OrderDate", "gte", orderDateFromFilter.value(), "and");
            }
     
            if (orderDateToFilter.value() != null) {
                filters = UpdateSearchFilters(filters, "OrderDate", "lte", orderDateToFilter.value(), "and");
            }
     
            grid.dataSource.filter(filters);
        }
     
     
        function UpdateSearchFilters(filters, field, operator, value, logic) {
            var newFilter = { field: field, operator: operator, value: value };
     
            if (filters.length == 0) {
                filters.push(newFilter);
            }
            else {
                var isNew = true;
                var index = 0;
     
                for (index = 0; index < filters.length; index++) {
                    if (filters[index].field == field && filters[index].operator == operator) {
                        isNew = false;
                        break;
                    }
                }
     
                if (isNew) {
                    filters.push(newFilter);
                }
                else {
                    filters[index] = newFilter;
                }
            }
     
            return filters;
        }
  8. Gal
    Gal avatar
    48 posts
    Member since:
    Apr 2009

    Posted 20 Aug 2015 Link to this post

    Thank you the function works ! 
Back to Top
Kendo UI is VS 2017 Ready