New to Kendo UI for jQuery? Start a free 30-day trial

Filter

configuration

The filters which are applied over the data items. By default, no filter is applied.

The data source filters the data items client-side unless the serverFiltering option is set to true.

filter

Array|Object

<h3>All names(no filters)</h3>
<div id="non-filtered"></div>
<h3>All names that start with "Ja"</h3>
<div id="filtered"></div>
  
<script>
var data = [
  { name: "Jane Doe" },
  { name: "John Doe" },
  { name: "Jane Sam" },
  { name: "John Doe" },
  { name: "Jane Mike" }
];
var dataSource = new kendo.data.DataSource({
  data: data,
  filter: { field: "name", operator: "startswith", value: "Ja" }
});
dataSource.fetch(function(){
  var view = dataSource.view();
	view.forEach(function(item) {
    $("#filtered").append("name - " + item.name + "<br>");
  });
});
  
data.forEach(function(item) {
  $("#non-filtered").append("name - " + item.name + "<br>");
});
</script>

<h3>All products(no filters)</h3>
<div id="non-filtered"></div>
<h3>All products with category "Beverages" that are not "Coffee".</h3>
<div id="filtered"></div>

<script>
var data = [{ name: "Tea", category: "Beverages" },
    { name: "Coffee", category: "Beverages" },
    { name: "Ham", category: "Food" }];
  
var dataSource = new kendo.data.DataSource({
  data: data,
  filter: [
    // leave data items which are "Beverage" and not "Coffee"
    { field: "category", operator: "eq", value: "Beverages" },
    { field: "name", operator: "neq", value: "Coffee" }
  ]
});
dataSource.fetch(function(){
  var view = dataSource.view();
  view.forEach(function(item) {
    $("#filtered").append("name - " + item.name + ", category - " + item.category + "<br>");
  });
});
  
data.forEach(function(item) {
  $("#non-filtered").append("name - " + item.name + ", category - " + item.category + "<br>");
});
</script>

<h3>All products(no filters)</h3>
<div id="non-filtered"></div>
<h3>All products with category "Food" or name "Tea".</h3>
<div id="filtered"></div>
  
<script>
var data = [
    { name: "Tea", category: "Beverages" },
    { name: "Coffee", category: "Beverages" },
    { name: "Ham", category: "Food" }
  ];
  
var dataSource = new kendo.data.DataSource({
  data: data,
  filter: {
    // leave data items which are "Food" or "Tea"
    logic: "or",
    filters: [
      { field: "category", operator: "eq", value: "Food" },
      { field: "name", operator: "eq", value: "Tea" }
    ]
  }
});
dataSource.fetch(function(){
  var view = dataSource.view();
  view.forEach(function(item) {
    $("#filtered").append("name - " + item.name + ", category - " + item.category + "<br>");
  });
});
  
data.forEach(function(item) {
  $("#non-filtered").append("name - " + item.name + ", category - " + item.category + "<br>");
});
</script>

filter.field

String

The data item field to which the filter operator is applied.

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe" },
    { name: "John Doe" }
  ],
  filter: { field: "name", operator: "startswith", value: "Jane" }
});
dataSource.fetch(function(){
  var view = dataSource.view();
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(view.length); // displays "1"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(view[0].name); // displays "Jane Doe"
});
</script>

filter.filters

Array

The nested filter expressions. Supports the same options as filter. Filters can be nested indefinitely.

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages" },
    { name: "Coffee", category: "Beverages" },
    { name: "Ham", category: "Food" }
  ],
  filter: {
    // leave data items which are "Food" or "Tea"
    logic: "or",
    filters: [
      { field: "category", operator: "eq", value: "Food" },
      { field: "name", operator: "eq", value: "Tea" }
    ]
  }
});
dataSource.fetch(function(){
  var view = dataSource.view();
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(view.length); // displays "2"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(view[0].name); // displays "Tea"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(view[1].name); // displays "Ham"
});
</script>

filter.ignoreCase

Boolean

The filter will ignore the casing of the value by default.

Default: true

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe" },
    { name: "John Doe" }
  ],
  filter: { field: "name", operator: "startswith", value: "Jane", ignoreCase: false } // Value will be treated as "Jane" instead of "jane".
});
dataSource.fetch(function(){
  var view = dataSource.view();
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(view.length); // displays "1"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(view[0].name); // displays "Jane Doe"
});
</script>

filter.logic

String

The logical operation to use when the filter.filters option is set.

The supported values are:

"and"
"or"

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages" },
    { name: "Coffee", category: "Beverages" },
    { name: "Ham", category: "Food" }
  ],
  filter: {
    // leave data items which are "Food" or "Tea"
    logic: "or",
    filters: [
      { field: "category", operator: "eq", value: "Food" },
      { field: "name", operator: "eq", value: "Tea" }
    ]
  }
});
dataSource.fetch(function(){
  var view = dataSource.view();
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(view.length); // displays "2"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(view[0].name); // displays "Tea"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(view[1].name); // displays "Ham"
});
</script>

filter.operator

String|Function

The filter operator (comparison).

The supported operators are:

"eq" (equal to)
"neq" (not equal to)
"isnull" (is equal to null)
"isnotnull" (is not equal to null)
"lt" (less than)
"lte" (less than or equal to)
"gt" (greater than)
"gte" (greater than or equal to)
"startswith"
"doesnotstartwith"
"endswith"
"doesnotendwith"
"contains"
"doesnotcontain"
"isempty"
"isnotempty"

The last eight are supported only for string fields.

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe" },
    { name: "John Doe" }
  ],
  filter: { field: "name", operator: "startswith", value: "Jane" }
});
dataSource.fetch(function(){
  var view = dataSource.view();
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(view.length); // displays "1"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(view[0].name); // displays "Jane Doe"
});
</script>

filter.value

Object

The value to which the field is compared. The value has to be of the same type as the field.

By design, the "\n" is removed from the filter before the filtering is performed. That is why an "\n" identifier from the filter will not match data items whose corresponding fields contain new lines.

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", birthday: new Date(1983, 1, 1) },
    { name: "John Doe", birthday: new Date(1980, 1, 1)}
  ],
  filter: { field: "birthday", operator: "gt", value: new Date(1980, 1, 1) }
});
dataSource.fetch(function(){
  var view = dataSource.view();
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(view.length); // displays "1"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(view[0].name); // displays "Jane Doe"
});
</script>