Adding filters to Grid's source

3 Answers 3732 Views
Grid
dccxz
Top achievements
Rank 1
dccxz asked on 22 Mar 2012, 01:42 PM
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

3 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 23 Mar 2012, 03:21 PM
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!
0
Scott
Top achievements
Rank 1
answered on 28 Aug 2012, 08:45 PM
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);
}
Michael
Top achievements
Rank 1
commented on 30 Sep 2014, 06:34 PM

@Scott, Thank you very much for the function, very useful.
Michael
Top achievements
Rank 1
commented on 01 Oct 2014, 08:34 PM

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.
0
Michael
Top achievements
Rank 1
answered on 01 Oct 2014, 08:56 PM
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;
    }
Gal
Top achievements
Rank 2
commented on 20 Aug 2015, 10:19 PM

Thank you the function works ! 
Tags
Grid
Asked by
dccxz
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Scott
Top achievements
Rank 1
Michael
Top achievements
Rank 1
Share this question
or