ContextMenu.groups
configurationConfigures the items of the ContextMenu for the group elements in the Grid header. Those are some valid predifined tools: "separator", "moveGroupPrevious", "moveGroupNext".
You can also specify a custom item and accociate it with a command.
contextMenu.groups
Array<div id="grid"></div>
<script>
$("#grid").kendoGrid({
contextMenu: {
groups: [
"moveGroupPrevious",
"moveGroupNext",
{ name: "MyCustomCommand", text: "My Custom Command", icon: "gear", command: "CustomCommand" }
]
// You can also concat to the default tools
// body: kendo.ui.grid.defaultGroupsContextMenu.concat([
// { name: "MyCustomCommand", text: "My Custom Command", icon: "gear", command: "CustomCommand" }
// ])
},
groupable: true,
dataSource: new kendo.data.DataSource({
schema: {
model: {
id: "foo",
fields: {
name: "name",
foo: "foo",
},
},
},
data: [
{ foo: "bar", name: "tom" },
{ foo: "baz", name: "jerry" },
],
}),
});
kendo.ui.grid.commands["CustomCommand"] = kendo.ui.grid.GridCommand.extend({
exec: function() {
var that = this,
grid = that.grid;
// e.g., clear groups
grid.dataSource.group([]);
}
});
</script>Specifies the command of the item.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" }
],
groupable: true,
contextMenu: {
groups: [
{
text: "Export Group",
command: "ExportGroupCommand"
}
]
}
});
</script>contextMenu.groups.icon
StringSpecifies the icon of the item.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" }
],
groupable: true,
contextMenu: {
groups: [
{
text: "Group Settings",
icon: "gear",
command: "GroupSettingsCommand"
}
]
}
});
</script>Specifies the items of the item.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
contextMenu: {
groups: [
{
text: "Custom Command",
icon: "calendar",
items: [
{ text: "Nested Custom Command", icon: "home", command: "NestedCustomCommand" }
]
},
'select'
]
},
dataSource: new kendo.data.DataSource({
schema: {
model: {
id: "foo",
fields: {
name: "name",
foo: "foo",
},
},
},
data: [
{ foo: "bar", name: "tom" },
{ foo: "baz", name: "jerry" },
],
}),
});
kendo.ui.grid.commands["NestedCustomCommand"] = kendo.ui.grid.GridCommand.extend({
exec: function(e) {
alert("Custom Command Executed")
}
});
</script>contextMenu.groups.name
StringSpecifies the name of the item.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" }
],
groupable: true,
contextMenu: {
groups: [
{
name: "groupAction",
text: "Group Action",
command: "GroupCommand"
}
]
}
});
</script>contextMenu.groups.text
StringSpecifies the text of the item.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" }
],
groupable: true,
contextMenu: {
groups: [
{
text: "Manage Group",
command: "ManageGroupCommand"
}
]
}
});
</script>Related Members
- contextMenu.groups.items - Specifies the items of the item.