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

Messages

configuration

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

messages

Object

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

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

  $("#filter-menu").kendoFilterMenu({
  	dataSource: dataSource,
    field: "age",
    messages: {
        and: "and",
        or: "or",
        filter: "Apply filter",
        clear: "Clear filter"
      }
  });

  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    dataSource: dataSource
  });
</script>

messages.additionalOperator

String

The text of the additional filter operator editor.

Default: "Additional operator"

<div id="filtermenu"></div>
<script>
$("#filtermenu").kendoFilterMenu({
    dataSource: [
        { name: "John", age: 25 },
        { name: "Jane", age: 30 }
    ],
    field: "age",
    messages: {
        additionalOperator: "Select another operator"
    }
});
</script>

messages.additionalValue

String

The text of the additional filter value editor.

Default: "Additional value"

<div id="filtermenu"></div>
<script>
$("#filtermenu").kendoFilterMenu({
    dataSource: [
        { name: "John", age: 25 },
        { name: "Jane", age: 30 }
    ],
    field: "age",
    messages: {
        additionalValue: "Enter another value"
    }
});
</script>

messages.and

String

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

Default: "And"

<div id="filtermenu"></div>
<script>
$("#filtermenu").kendoFilterMenu({
    dataSource: [
        { name: "John", age: 25 },
        { name: "Jane", age: 30 }
    ],
    field: "age",
    messages: {
        and: "AND"
    }
});
</script>

messages.buttonTitle

String

The title of the button that displays the FilterMenu.

The {0} argument represents the field name

Default: "{0} filter column settings"

<div id="filter-menu"></div>
<br /><br />
<div id="grid"></div>
<script>
  var data = [
    { productName: "Tea", category: 1 },
    { productName: "Ham", category: 2 }
  ];

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

  $("#filter-menu").kendoFilterMenu({
    values: [
        { text: "Beverages", value: 1 },
        { text: "Food", value: 2 },
      ],
    dataSource: dataSource,
    field: "category",
    messages: {
      buttonTitle: "{} Filter Menu"
    }
  });

  $("#grid").kendoGrid({
    columns: [
      { field: "productName" },
      { field: "category"}
    ],
    dataSource: dataSource
  });
</script>

messages.clear

String

The text of the button which clears the filter.

Default: "Clear"

<div id="filtermenu"></div>
<script>
$("#filtermenu").kendoFilterMenu({
    dataSource: [
        { name: "John", age: 25 },
        { name: "Jane", age: 30 }
    ],
    field: "age",
    messages: {
        clear: "Reset Filter"
    }
});
</script>

messages.filter

String

The text of the button which applies the filter.

Default: "Filter"

<div id="filtermenu"></div>
<script>
$("#filtermenu").kendoFilterMenu({
    dataSource: [
        { name: "John", age: 25 },
        { name: "Jane", age: 30 }
    ],
    field: "age",
    messages: {
        filter: "Apply Filter"
    }
});
</script>

messages.info

String

The text of the information message on the top of the filter menu.

Default: "Show items with value that: "

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

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

  $("#filter-menu").kendoFilterMenu({
  	dataSource: dataSource,
    field: "age",
    messages: {
      	info: "<h4>Filter by age</h4>"
      }
  });

  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    dataSource: dataSource
  });
</script>

messages.isFalse

String

The text of the radio button for false values. Displayed when filtering Boolean fields.

Default: "is false"

<div id="filtermenu"></div>
<script>
$("#filtermenu").kendoFilterMenu({
    dataSource: [
        { name: "John", active: true },
        { name: "Jane", active: false }
    ],
    field: "active",
    messages: {
        isFalse: "No"
    }
});
</script>

messages.isTrue

String

The text of the radio button for true values. Displayed when filtering Boolean fields.

Default: "is true"

<div id="filtermenu"></div>
<script>
$("#filtermenu").kendoFilterMenu({
    dataSource: [
        { name: "John", active: true },
        { name: "Jane", active: false }
    ],
    field: "active",
    messages: {
        isTrue: "Yes"
    }
});
</script>

messages.logic

String

The text of the filter logic editor.

Default: "Filters logic"

<div id="filtermenu"></div>
<script>
$("#filtermenu").kendoFilterMenu({
    dataSource: [
        { name: "John", age: 25 },
        { name: "Jane", age: 30 }
    ],
    field: "age",
    messages: {
        logic: "Logical Operator"
    }
});
</script>

messages.or

String

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

Default: "Or"

<div id="filtermenu"></div>
<script>
$("#filtermenu").kendoFilterMenu({
    dataSource: [
        { name: "John", age: 25 },
        { name: "Jane", age: 30 }
    ],
    field: "age",
    messages: {
        or: "OR"
    }
});
</script>

messages.selectValue

String

The text of the DropDownList displayed in the filter menu for columns whose values option is set.

Default: "-Select value-"

<div id="filter-menu"></div>
<br /><br />
<div id="grid"></div>
<script>
  var data = [
    { productName: "Tea", category: 1 },
    { productName: "Ham", category: 2 }
  ];

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

  $("#filter-menu").kendoFilterMenu({
    values: [
        { text: "Beverages", value: 1 },
        { text: "Food", value: 2 },
      ],
    dataSource: dataSource,
    field: "category",
    messages: {
      selectValue: "Select category"
    }
  });

  $("#grid").kendoGrid({
    columns: [
      { field: "productName" },
      { field: "category"}
    ],
    dataSource: dataSource
  });
</script>

messages.title

String

The text rendered for the title attribute of the filter menu form.

Default: "Show items with value that: "

<div id="filtermenu"></div>
<script>
$("#filtermenu").kendoFilterMenu({
    dataSource: [
        { name: "John", age: 25 },
        { name: "Jane", age: 30 }
    ],
    field: "age",
    messages: {
        title: "Filter data by criteria:"
    }
});
</script>