messagesObject
The text messages displayed in the filter menu. Use it to customize or localize the filter menu messages.
Example - customize filter menu messages
<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.additionalValueString(default: "Additional value")
The text of the additional filter value editor.
Example
<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.additionalOperatorString(default: "Additional operator")
The text of the additional filter operator editor.
Example
<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.andString(default: "And")
The text of the option which represents the "and" logical operation.
Example
<div id="filtermenu"></div>
<script>
$("#filtermenu").kendoFilterMenu({
dataSource: [
{ name: "John", age: 25 },
{ name: "Jane", age: 30 }
],
field: "age",
messages: {
and: "AND"
}
});
</script>messages.buttonTitleString(default: "{0} filter column settings")
The title of the button that displays the FilterMenu.
The {0} argument represents the field name
Example - set the "buttonTitle" message
<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.clearString(default: "Clear")
The text of the button which clears the filter.
Example
<div id="filtermenu"></div>
<script>
$("#filtermenu").kendoFilterMenu({
dataSource: [
{ name: "John", age: 25 },
{ name: "Jane", age: 30 }
],
field: "age",
messages: {
clear: "Reset Filter"
}
});
</script>messages.filterString(default: "Filter")
The text of the button which applies the filter.
Example
<div id="filtermenu"></div>
<script>
$("#filtermenu").kendoFilterMenu({
dataSource: [
{ name: "John", age: 25 },
{ name: "Jane", age: 30 }
],
field: "age",
messages: {
filter: "Apply Filter"
}
});
</script>messages.infoString(default: "Show items with value that: ")
The text of the information message on the top of the filter menu.
Example - set the "info" message
<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.isFalseString(default: "is false")
The text of the radio button for false values. Displayed when filtering Boolean fields.
Example
<div id="filtermenu"></div>
<script>
$("#filtermenu").kendoFilterMenu({
dataSource: [
{ name: "John", active: true },
{ name: "Jane", active: false }
],
field: "active",
messages: {
isFalse: "No"
}
});
</script>messages.isTrueString(default: "is true")
The text of the radio button for true values. Displayed when filtering Boolean fields.
Example
<div id="filtermenu"></div>
<script>
$("#filtermenu").kendoFilterMenu({
dataSource: [
{ name: "John", active: true },
{ name: "Jane", active: false }
],
field: "active",
messages: {
isTrue: "Yes"
}
});
</script>messages.logicString(default: "Filters logic")
The text of the filter logic editor.
Example
<div id="filtermenu"></div>
<script>
$("#filtermenu").kendoFilterMenu({
dataSource: [
{ name: "John", age: 25 },
{ name: "Jane", age: 30 }
],
field: "age",
messages: {
logic: "Logical Operator"
}
});
</script>messages.orString(default: "Or")
The text of the option which represents the "or" logical operation.
Example
<div id="filtermenu"></div>
<script>
$("#filtermenu").kendoFilterMenu({
dataSource: [
{ name: "John", age: 25 },
{ name: "Jane", age: 30 }
],
field: "age",
messages: {
or: "OR"
}
});
</script>messages.selectValueString(default: "-Select value-")
The text of the DropDownList displayed in the filter menu for columns whose values option is set.
Example - set the "selectValue" message
<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.titleString(default: "Show items with value that: ")
The text rendered for the title attribute of the filter menu form.
Example
<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>In this article