Adding filters to Grid's source

[dccxz]

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

[Alexander Valchev]

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

[Sean]

hi @Alexander,

 

busy working in a project at the moment, wandering if there is a way to add 2 fields into a single filter.

the way the program has been set up is in such a way that we have a fullname field which hosts (LastName), (FirstName). In our filter settings, im required to add fullName and not one of them, however i keep getting errors regardless of what I try. 

Might be important to note that the data is being pulled from a nav.

[Nikolay]

Hi Sean,

You need to add two separate filter expressions to the filter object. For example:

var filter = { logic: 'or', filters: [] };
            filter.filters.push({
              field: field,
              operator: 'contains',
              value: FirstName
            },
            {
              field: field,
              operator: 'contains',
              value: LastName
            });
            
            var grid = $('#grid').data('kendoGrid');
            grid.dataSource.filter(filter);

Let me know if this helps.

Regards,

Nikolay

[Scott]

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]

@Scott, Thank you very much for the function, very useful.

[Michael]

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.

[Michael]

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]

Thank you the function works !