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

Fields

configuration

The configuration of the filter fields. An array of JavaScript objects that hold information regarding the filter field, it's editor, default values used for filter and etc.

fields

Array

<div id="filter"></div>
<br /><br />
<script>
  var data = [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
    ];

  var dataSource = new kendo.data.DataSource({
  	data: data
  });

  $("#filter").kendoFilter({
  	dataSource: dataSource,
    expressionPreview: true,
    expression: {
        logic: "or",
        filters: [
            { field: "name", value: "Jane Doe", operator: "eq" },
            { field: "name", value: "John Doe", operator: "eq" },
            { field: "age", value: 33, operator: "eq" },
            { field: "age", value: 30, operator: "eq" }
        ]
    },
    fields: [
      { name: "age", type:"number", label: "Age" },
      { name: "name", type:"string", label: "Name" }
    ]
  });
</script>

fields.defaultValue

Object

A value which will be initially set as a filter value when an expression item for the specific field is created.

<div id="filter"></div>
<br /><br />
<script>
  var data = [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
    ];

  var dataSource = new kendo.data.DataSource({
  	data: data
  });

  $("#filter").kendoFilter({
  	dataSource: dataSource,
    expressionPreview: true,
    fields: [
      { name: "age", type:"number", defaultValue: 31 },
      { name: "name", type:"string", defaultValue: "Rick" }
    ]
  });
</script>

fields.editorTemplate

String|Function

The template which the widget will use to create the field editor.

<div id="filter"></div>
<br /><br />
<script>
  var data = [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
    ];

  var dataSource = new kendo.data.DataSource({
  	data: data
  });

  $("#filter").kendoFilter({
  	dataSource: dataSource,
    expressionPreview: true,
    fields: [
      {
        name: "age",
        type:"number",
        editorTemplate: function (container, options) {
            $('<input data-bind="value: value" name="' + options.field + '"/>')
                .appendTo(container).kendoNumericTextBox();
        }
      },
      { name: "name", type:"string", editorTemplate : "<input type='text' class='k-textbox' data-bind='value: value'/>" }
    ]
  });
</script>

fields.label

String

Defines a value which will be visualized instead of the data feild name.

Note: By default if a value is not provided the data field name will be used.

<div id="filter"></div>
<br /><br />
<script>
  var data = [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
    ];

  var dataSource = new kendo.data.DataSource({
  	data: data
  });

  $("#filter").kendoFilter({
  	dataSource: dataSource,
    expressionPreview: true,
    expression: {
        logic: "or",
        filters: [
            { field: "name", value: "Jane Doe", operator: "eq" },
            { field: "name", value: "John Doe", operator: "eq" },
            { field: "age", value: 33, operator: "eq" },
            { field: "age", value: 30, operator: "eq" }
        ]
    },
    fields: [
      { name: "age", type:"number", label: "Age" },
      { name: "name", type:"string", label: "Name" }
    ]
  });
</script>

fields.name

String

A value matching a field name from the datasource model.

<div id="filter"></div>
<br /><br />
<script>
  var data = [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
    ];

  var dataSource = new kendo.data.DataSource({
  	data: data
  });

  $("#filter").kendoFilter({
  	dataSource: dataSource,
    expressionPreview: true,
    expression: {
        logic: "or",
        filters: [
            { field: "name", value: "Jane Doe", operator: "eq" },
            { field: "name", value: "John Doe", operator: "eq" },
            { field: "age", value: 33, operator: "eq" },
            { field: "age", value: 30, operator: "eq" }
        ]
    },
    fields: [
      { name: "age", type:"number", label: "Age" },
      { name: "name", type:"string", label: "Name" }
    ]
  });
</script>

fields.operators

Object

The text of the filter operators displayed for the current field.

<div id="filter"></div>
<br /><br />
<script>
  var data = [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
    ];

  var dataSource = new kendo.data.DataSource({
  	data: data
  });

  $("#filter").kendoFilter({
  	dataSource: dataSource,
    expressionPreview: true,
    expression: {
        logic: "or",
        filters: [
            { field: "name", value: "Jane Doe", operator: "eq" },
            { field: "name", value: "John Doe", operator: "eq" },
            { field: "age", value: 33, operator: "eq" },
            { field: "age", value: 30, operator: "eq" }
        ]
    },
    fields: [
      { name: "age", type:"number", label: "Age" },
      { name: "name", type:"string", label: "Name", operators: {
          string:{
            eq: 'Custom equal message'
          }
        }
      }
    ]
  });
</script>

fields.previewFormat

String

The format of the value displayed in the preview.

<div id="filter"></div>
<br /><br />
<script>
  var data = [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
    ];

  var dataSource = new kendo.data.DataSource({
  	data: data
  });

  $("#filter").kendoFilter({
  	dataSource: dataSource,
    expressionPreview: true,
    fields: [
      {
        name: "age",
        type:"number",
        previewFormat:'n2'
      },
      { name: "name", type:"string" }
    ]
  });
</script>

fields.type

String

Defines the value type of the field.

Note: By default if a value is not provided the type will be string.

The available dataType options are:

"string"
"number"
"boolean"
"date"

<div id="filter"></div>
<br /><br />
<script>
  var data = [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
    ];

  var dataSource = new kendo.data.DataSource({
  	data: data
  });

  $("#filter").kendoFilter({
  	dataSource: dataSource,
    expressionPreview: true,
    expression: {
        logic: "or",
        filters: [
            { field: "name", value: "Jane Doe", operator: "eq" },
            { field: "name", value: "John Doe", operator: "eq" },
            { field: "age", value: 33, operator: "eq" },
            { field: "age", value: 30, operator: "eq" }
        ]
    },
    fields: [
      { name: "age", type:"number", label: "Age" },
      { name: "name", type:"string", label: "Name" }
    ]
  });
</script>