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

Messages

configuration

The text messages displayed in the filter. Use it to customize or localize the filter messages.

messages

Object

<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,
    applyButton: true,
    messages: {
        and: "And",
        or: "Or",
        apply: "Apply"
    },
    fields: [
      { name: "age", type:"number", label: "Age" },
      { name: "name", type:"string", label: "Name" }
    ]
  });
</script>

messages.addExpression

String

The title of the add expression button.

Default: "Add Expression"

<div id="filter"></div>
<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,
    messages: {
        addExpression: "Add New Filter"
    },
    fields: [
      { name: "age", type: "number", label: "Age" },
      { name: "name", type: "string", label: "Name" }
    ]
  });
</script>

messages.addGroup

String

The title of the add group button.

Default: "Add Group"

<div id="filter"></div>
<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,
    messages: {
        addGroup: "Add Filter Group"
    },
    fields: [
      { name: "age", type: "number", label: "Age" },
      { name: "name", type: "string", label: "Name" }
    ]
  });
</script>

messages.and

String

The text of the option which represents the "and" logical operation.

Default: "And"

<div id="filter"></div>
<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,
    messages: {
        and: "AND"
    },
    fields: [
      { name: "age", type: "number", label: "Age" },
      { name: "name", type: "string", label: "Name" }
    ]
  });
</script>

messages.apply

String

The title and text inside the apply button.

Default: "Apply"

<div id="filter"></div>
<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,
    applyButton: true,
    messages: {
        apply: "Filter Data"
    },
    fields: [
      { name: "age", type: "number", label: "Age" },
      { name: "name", type: "string", label: "Name" }
    ]
  });
</script>

messages.close

String

The title of the close button.

Default: "Close"

<div id="filter"></div>
<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,
    messages: {
        close: "Exit Filter"
    },
    fields: [
      { name: "age", type: "number", label: "Age" },
      { name: "name", type: "string", label: "Name" }
    ]
  });
</script>

messages.fields

String

The title of the fields drop down.

Default: "Fields"

<div id="filter"></div>
<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,
    messages: {
        fields: "Select Field"
    },
    fields: [
      { name: "age", type: "number", label: "Age" },
      { name: "name", type: "string", label: "Name" }
    ]
  });
</script>

messages.filterExpressionLabel

String

The text that will be used as an aria-label of the filter expression groups.

Default: "filter expression"

<div id="filter"></div>
<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,
    messages: {
        filterExpressionLabel: "filter condition"
    },
    fields: [
      { name: "age", type: "number", label: "Age" },
      { name: "name", type: "string", label: "Name" }
    ]
  });
</script>

messages.filterLogicLabel

String

The text that will be used as an aria-label of the filter logic toolbars.

Default: "filter logic"

<div id="filter"></div>
<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,
    messages: {
        filterLogicLabel: "logical operator"
    },
    fields: [
      { name: "age", type: "number", label: "Age" },
      { name: "name", type: "string", label: "Name" }
    ]
  });
</script>

messages.mainFilterLogicLabel

String

The text that will be used as an aria-label of the main filter logic toolbar.

Default: "main filter logic"

<div id="filter"></div>
<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,
    messages: {
        mainFilterLogicLabel: "primary filter logic"
    },
    fields: [
      { name: "age", type: "number", label: "Age" },
      { name: "name", type: "string", label: "Name" }
    ]
  });
</script>

messages.operators

String

The title of the operators drop down.

Default: "Operators"

<div id="filter"></div>
<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,
    messages: {
        operators: "Filter Operators"
    },
    fields: [
      { name: "age", type: "number", label: "Age" },
      { name: "name", type: "string", label: "Name" }
    ]
  });
</script>

messages.or

String

The text of the option which represents the "or" logical operation.

Default: "Or"

<div id="filter"></div>
<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,
    messages: {
        or: "OR"
    },
    fields: [
      { name: "age", type: "number", label: "Age" },
      { name: "name", type: "string", label: "Name" }
    ]
  });
</script>