columnMenu.messagesObject
The text messages displayed in the column menu. Use it to customize or localize the column menu messages.
Example - customize column menu messages
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
columnMenu: {
messages: {
columns: "Choose columns",
filter: "Apply filter",
sortAscending: "Sort (asc)",
sortDescending: "Sort (desc)"
}
},
sortable: true,
filterable: true,
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>columnMenu.messages.applyString(default: "Apply")
The text of the button which applies the columns filter.
The button is visible when the column menu componentType is set to
modernortabbed.
Example - column menu apply button text
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "id", width:200 },
{ field: "name", width:400 },
{ field: "age", width:400 }
],
columnMenu: {
componentType: "modern",
messages: {
apply: "Apply Columns"
}
},
sortable: true,
dataSource: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
]
});
</script>columnMenu.messages.autoSizeColumnString(default: "Autosize This Column")
The text of the autosize single column option.
The autosize option is visible when the column menu componentType is set to
tabbed.
Example - column menu apply button text
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "id", width:200 },
{ field: "name", width:400 },
{ field: "age", width:400 }
],
columnMenu: {
componentType: "tabbed",
autoSize: true,
messages: {
autoSizeColumn: "Custom Autosize this column"
}
},
sortable: true,
dataSource: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
]
});
</script>columnMenu.messages.autoSizeAllColumnsString(default: "Autosize All Columns")
The text of the autosize single column option.
The autosize option is visible when the column menu componentType is set to
tabbed.
Example - column menu apply button text
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "id", width:200 },
{ field: "name", width:400 },
{ field: "age", width:400 }
],
columnMenu: {
componentType: "tabbed",
autoSize: true,
messages: {
autoSizeAllColumns: "Custom Autosize all columns"
}
},
sortable: true,
dataSource: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
]
});
</script>columnMenu.messages.buttonTitleString(default: "{0} edit column settings")
The title of the button that displays the ColumnMenu.
The {0} argument represents the field name
Example - set the ColumnMenu "buttonTitle" message
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name", width:400 },
{ field: "age", width:400 }
],
columnMenu: {
messages: {
buttonTitle: "{0} Column Menu"
}
},
sortable: true,
dataSource: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
]
});
</script>columnMenu.messages.clearString(default: "Clear")
The text of the Clear button in the column menu in mobile Grid.
Example - set the clear button in the mobile column menu
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
mobile: true,
columns: [
{ field: "id", width:200 },
{ field: "name", width:400 },
{ field: "age", width:400 }
],
toolbar: [
{ name: "columns" }
],
columnMenu: {
messages: {
clear: "Custom Clear Text"
}
},
dataSource: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
]
});
</script>columnMenu.messages.clearAllFiltersString(default: "Clear All Filters")
The text of the clearAllFilters button in the global column menu.
Example - set the clear all filter button message
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "id", width:200 },
{ field: "name", width:400 },
{ field: "age", width:400 }
],
toolbar: [
{ name: "columns" }
],
columnMenu: {
clearAllFilters: true,
messages: {
clearAllFilters: "Custom Clear All Filters Message"
}
},
filterable: true,
dataSource: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
]
});
</script>columnMenu.messages.columnString(default: "Column")
The text of the column label in the column menu in mobile Grid.
Example - set the column label in the mobile column menu
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
mobile: true,
columns: [
{ field: "id", width:200 },
{ field: "name", width:400 },
{ field: "age", width:400 }
],
toolbar: [
{ name: "columns" }
],
columnMenu: {
messages: {
column: "Custom Column label"
}
},
dataSource: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
]
});
</script>columnMenu.messages.columnsString(default: "Columns")
The text message displayed for the column selection menu item.
Example - set the column selection message
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
columnMenu: {
messages: {
columns: "Choose columns"
}
},
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>columnMenu.messages.columnVisibilityString(default: "Column Visibility")
The text of the column visibility menu item in the global column menu.
Example - set the column visibility message
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "id", width:200 },
{ field: "name", width:400 },
{ field: "age", width:400 }
],
toolbar: [
{ name: "columns" }
],
columnMenu: {
messages: {
columnVisibility: "Custom Column Visbility Message"
}
},
filterable: true,
dataSource: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
]
});
</script>columnMenu.messages.filterString(default: "Filter")
The text message displayed for the filter menu item.
Example - set the filter message
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
columnMenu: {
messages: {
filter: "Apply filter",
}
},
filterable: true,
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>columnMenu.messages.lockString(default: "Lock Column")
The text message displayed in the column menu for locking a column.
Example - column menu lock button text
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ locked: true, field: "id", width:200 },
{ field: "name", width:400 },
{ field: "age", width:400 }
],
columnMenu: {
messages: {
lock: "Pin this column"
}
},
sortable: true,
dataSource: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
]
});
</script>columnMenu.messages.moveNextString(default: "Move next")
The text message that is displayed for the Move to next position column menu item.
Example
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" },
{ field: "unitPrice" }
],
dataSource: [
{ productName: "Tea", category: "Beverages", unitPrice: 2.5 },
{ productName: "Coffee", category: "Beverages", unitPrice: 3.0 }
],
columnMenu: {
messages: {
moveNext: "Move Right"
}
}
});
</script>columnMenu.messages.movePrevString(default: "Move previous")
The text message that is displayed for the Move to previous position column menu item.
Example
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" },
{ field: "unitPrice" }
],
dataSource: [
{ productName: "Tea", category: "Beverages", unitPrice: 2.5 },
{ productName: "Coffee", category: "Beverages", unitPrice: 3.0 }
],
columnMenu: {
messages: {
movePrev: "Move Left"
}
}
});
</script>columnMenu.messages.groupColumnString(default: "Group column")
The text message that is displayed for the Group column menu item.
Example
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" },
{ field: "unitPrice" }
],
dataSource: [
{ productName: "Tea", category: "Beverages", unitPrice: 2.5 },
{ productName: "Coffee", category: "Beverages", unitPrice: 3.0 }
],
groupable: true,
columnMenu: {
messages: {
groupColumn: "Group by this column"
}
}
});
</script>columnMenu.messages.ungroupColumnString(default: "Ungroup column")
The text message that is displayed for the Ungroup column menu item.
Example
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" },
{ field: "unitPrice" }
],
dataSource: [
{ productName: "Tea", category: "Beverages", unitPrice: 2.5 },
{ productName: "Coffee", category: "Beverages", unitPrice: 3.0 }
],
groupable: true,
columnMenu: {
messages: {
ungroupColumn: "Remove grouping"
}
}
});
</script>columnMenu.messages.resetString(default: "Reset")
The text of the button which resets the columns filter.
The button is visible when the column menu componentType is set to
modernortabbed.
Example - column menu reset button text
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "id", width:200 },
{ field: "name", width:400 },
{ field: "age", width:400 }
],
columnMenu: {
componentType: "modern",
messages: {
reset: "Reset Columns"
}
},
sortable: true,
dataSource: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
]
});
</script>columnMenu.messages.sortAscendingString(default: "Sort Ascending")
The text message displayed for the menu item which performs ascending sort.
Example - set the sort ascending message
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
columnMenu: {
messages: {
sortAscending: "Sort (asc)",
}
},
sortable: true,
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>columnMenu.messages.sortDescendingString(default: "Sort Descending")
The text message displayed for the menu item which performs descending sort.
Example - set the sort descending message
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
columnMenu: {
messages: {
sortDescending: "Sort (desc)",
}
},
sortable: true,
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>columnMenu.messages.setColumnPositionString(default: "Set Column Position")
The text message displayed in the column menu for the column position item.
Example - column menu set column position text
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "id", width: 800 },
{ field: "name", width: 400, sticky: true, stickable: true },
{ field: "age", width: 800 }
],
columnMenu: {
messages: {
setColumnPosition: "Change Position"
}
},
dataSource: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
]
});
</script>columnMenu.messages.settingsString(default: "Column Settings")
The text message displayed in the menu header (available in mobile mode only).
Example - mobile column menu header
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
columnMenu: {
messages: {
settings: "Column Options",
}
},
mobile: "phone",
height: 550,
sortable: true,
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>columnMenu.messages.stickString(default: "Stick Column")
The text message displayed in the column menu for sticking a column.
Example - column menu stick button text
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "id", width: 800 },
{ field: "name", width: 400, sticky: true, stickable: true },
{ field: "age", width: 800 }
],
columnMenu: {
messages: {
stick: "Stick this column"
}
},
dataSource: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
]
});
</script>columnMenu.messages.unstickString(default: "Unstick Column")
The text message displayed in the column menu for unsticking a column.
Example - column menu unstick button text
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "id", width: 800 },
{ field: "name", width: 400, sticky: true, stickable: true },
{ field: "age", width: 800 }
],
columnMenu: {
messages: {
unstick: "Unstick this column"
}
},
dataSource: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
]
});
</script>columnMenu.messages.unlockString(default: "Unlock Column")
The text message displayed in the column menu for unlocking a column.
Example - column menu unlock button text
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ locked: true, field: "id", width:200 },
{ field: "name", width:400 },
{ field: "age", width:400 }
],
columnMenu: {
messages: {
unlock: "Unpin this column"
}
},
sortable: true,
dataSource: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
]
});
</script>In this article