Clear the filtering with out clicking clear button

Question

I have kendo-grid in my application.And its have filterable "true".When we apply the filtering then grid items are filtered and grid size also re-sized. when we clear the text in filter column then automatically grid display the items which is displayed in the page-load with out pressing clear button.is it possible? My grid code is

var grid = $("#grid").kendoGrid({
  dataSource: {
    type  : "odata",
    transport      : {
      read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    schema         : {
      model: {
        fields: {
          OrderID  : { type: "number" },
          Freight  : { type: "number" },
          ShipName : { type: "string" },
          OrderDate: { type: "date" },
          ShipCity : { type: "string" }
        }
      }
    },
    pageSize       : 10
  },
  filterable: true,
  sortable  : true,
  pageable  : true,
  columns   : [
    {
    field     : "OrderID",
    filterable: false
  },
  "Freight",
  {
    field : "OrderDate",
    title : "Order Date",
    width : 100,
    format: "{0:MM/dd/yyyy}"
  },
  {
    field: "ShipName",
    title: "Ship Name",
    width: 200
  },
  {
    field: "ShipCity",
    title: "Ship City"
  }
  ]
}).data("kendoGrid");

Solution 1

You need to use the filter method of the grid's data source:

$("#grid").data("kendoGrid").dataSource.filter([]);

Solution 2

if you call

grid.dataSource.filter({})

there is a possibility, that you erase whole dataSource filter, not only fields which are in grid. I mean dataSource can be prefiltered for some reason.

I developed method, which remove only filter of grid.

kendo.ui.Grid.prototype.clearFilters = function(args){
    var ignore = [];
    // test arguments
    if(typeof args === 'object'){
        if(args.hasOwnProperty('ignore')){
            if(args.ignore.length > 0){
                ignore = args.ignore;
            }
        }
    }

    // get dataSource of grid and columns of grid
    var fields = [], filter = this.dataSource.filter(), col = this.columns;
    if( $.isEmptyObject(filter) || $.isEmptyObject(filter)) return;

    // Create array of Fields to remove from filter and apply ignore fields if exist
    for(var i = 0, l = col.length; i < l; i++){
        if(col[i].hasOwnProperty('field')){
            if(ignore.indexOf(col[i].field) === -1){
                fields.push(col[i].field)
            }
        }
    }

    if($.isEmptyObject(fields)) return;

    // call "private" method
    var newFilter = this._eraseFiltersField(fields, filter)

    // set new filter
    this.dataSource.filter(newFilter);
}

And here is second method. It is separated because it can be call recursively:

kendo.ui.Grid.prototype._eraseFiltersField = function(fields, filter){
    for (var i = 0; i < filter.filters.length; i++) {

        // For combination 'and' and 'or', kendo use nested filters so here is recursion
        if(filter.filters[i].hasOwnProperty('filters')){
            filter.filters[i] = this._eraseFiltersField(fields, filter.filters[i]);
            if($.isEmptyObject(filter.filters[i])){
                filter.filters.splice(i, 1);
                i--;
                continue;
            }
        }

        // Remove filters
        if(filter.filters[i].hasOwnProperty('field')){
            if( fields.indexOf(filter.filters[i].field) > -1){
                filter.filters.splice(i, 1);
                i--;
                continue;
            }
        }
    }

    if(filter.filters.length === 0){
        filter = {};
    }

    return filter;
}

Method can be called like this:

$('#my-grid').data('kendoGrid').clearFilters({
    ignore: ['Field1', 'Field2']
})

Recursion is there because dataSource filter can look like:

{
    logic: "and"
    filters: [
        {
            logic: "or"     
            filters:[
                        {
                            field: "Field1"
                            operator: "contains"
                            value: "val1"
                        },
                        {
                            field: "Field1"
                            operator: "contains"
                            value: "val2"
                        }
            ],
        },
        {
            field: "Field3"
            operator: "contains"
            value: "val3"
        }
    ],
}

and method is recursively called on all nested 'filters' arrays. Filter above is like:

("Field3" === "val3" && ("Field1" === "val1" || "Field1" === "val2" ) )

The method is not perfect and a few tested. I hope this helps someone.

Comments

[user2138545]

thank you for quick reply,I tried that one but i didn't get any result.here is the fiddle jsfiddle.net/SZBrt/17.

[Atanas Korchev]

There is a JavaScript error in your jsfiddle. This is why it isn't working.

[OnaBai]

What is val in your filter conditions? What are you trying to do?

[user2138545]

while debugging i got an error i am not having lowercase method in my code but why i am geting this error, "Uncaught TypeError: Object 10248 has no method 'toLowerCase'" can i know where is wrong in code?

[user2138545]

I Tried to filter the data in column filtering,in the first time we entered the value in column filter then filtered the data,then grid displays filtered data,when we click on clear button then grid displays actual data,but i want to disply the actual data without clicking on clear button