Geek asks and answers

Clear filtering without pressing the clear button

I have a kendo grid in my application. And she has a filtered "truth." When we apply filtering, the mesh elements are filtered, and the mesh size also changes. when we clear the text in the filter column, then the grid automatically displays the elements that are displayed on the page without clicking the clear button. Is it possible? My grid code

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");
+5
source share
2 answers

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

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

if you call

grid.dataSource.filter({})

, dataSource, , . , dataSource - .

, .

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);
}

. , :

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;
}

:

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

, dataSource :

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

'filters'. :

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

. , -.

+3

More articles:


All Articles