filter Array|Object

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.

Example - set a single filter

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

Example - set the filter as a conjunction (and)

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

Example - set the filter as a disjunction (or)

<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.

Example - set the filter field

<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.ignoreCase Boolean (default: true)

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

Example - set the filter ignoreCase

<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.filters Array

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

Example - set nested filters

<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.logic String

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

The supported values are:

  • "and"
  • "or"

Example - set the filter logic

<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.

Example - set the filter operator

<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.

Example - specify the filter value

<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>
In this article
Related articles
Not finding the help you need? Improve this article