Edit this page

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

<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();
  console.log(view.length); // displays "1"
  console.log(view[0].name); // displays "Jane Doe"
});
</script>

Example - set filter as conjunction (and)

<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 "Beverage" and not "Coffee"
    { field: "category", operator: "eq", value: "Beverages" },
    { field: "name", operator: "neq", value: "Coffee" }
  ]
});
dataSource.fetch(function(){
  var view = dataSource.view();
  console.log(view.length); // displays "1"
  console.log(view[0].name); // displays "Tea"
});
</script>

Example - set filter as disjunction (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();
  console.log(view.length); // displays "2"
  console.log(view[0].name); // displays "Tea"
  console.log(view[1].name); // displays "Ham"
});
</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();
  console.log(view.length); // displays "1"
  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 - 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();
  console.log(view.length); // displays "2"
  console.log(view[0].name); // displays "Tea"
  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();
  console.log(view.length); // displays "2"
  console.log(view[0].name); // displays "Tea"
  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"
  • "endswith"
  • "contains"
  • "doesnotcontain"
  • "isempty"
  • "isnotempty"

The last five 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();
  console.log(view.length); // displays "1"
  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();
  console.log(view.length); // displays "1"
  console.log(view[0].name); // displays "Jane Doe"
});
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy