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

ContextMenu

configuration

Configures the ContextMenus of the Grid.

contextMenu

Object|Boolean

Default: false

<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
        contextMenu: true,
        editable: true,
        sortable: true,
        draggable: true,
        reorderable: true,
        dataSource: new kendo.data.DataSource({
            schema: {
                model: {
                    id: "foo",
                    fields: {
                        name: "name",
                        foo: "foo",
                    },
                },
            },
            data: [
                { foo: "bar", name: "tom" },
                { foo: "baz", name: "jerry" },
            ],
        }),
    });
</script>

contextMenu.activate

Function

Fires when a sub menu or the ContextMenu gets opened and its animation finished. ContextMenu Events.

<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 }
  ],
  contextMenu: {
    activate: function(e) {
      console.log("Context menu activated");
    }
  }
});
</script>

Configures the items of the ContextMenu for the table body element. Those are some valid predifined tools: "separator", "create", "edit", "destroy", "select", "copySelection",."copySelectionNoHeaders", "reorderRow", "exportPDF", "exportExcel", "sortAsc", "sortDesc".

You can also specify a custom item and accosiate it with a command.

<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
        contextMenu: {
            body: [
                "exportPDF",
                "exportExcel",
                { name: "MyCustomCommand", text: "My Custom Command", icon: "gear", command: "CustomCommand" }
            ]
            // You can also concat to the default tools
            // body: kendo.ui.grid.defaultBodyContextMenu.concat([
            //     { name: "MyCustomCommand", text: "My Custom Command", icon: "gear", command: "CustomCommand" }
            // ])
        },
        editable: true,
        sortable: true,
        draggable: true,
        reorderable: 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;

            grid.saveAsPDF();
        }
    });
</script>

contextMenu.close

Function

Fires before a sub menu or the ContextMenu gets closed. You can cancel this event to prevent closure. ContextMenu Events.

<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 }
  ],
  contextMenu: {
    close: function(e) {
      console.log("Context menu is closing");
    }
  }
});
</script>

contextMenu.deactivate

Function

Fires when a sub menu or the ContextMenu gets closed and its animation finished. ContextMenu Events.

<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 }
  ],
  contextMenu: {
    deactivate: function(e) {
      console.log("Context menu deactivated");
    }
  }
});
</script>

contextMenu.groups

Array

Configures 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.

<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>

contextMenu.head

Array

Configures the items of the ContextMenu for the table head element. Those are some valid predifined tools: "separator", "create", "edit", "destroy", "select", "copySelection",."copySelectionNoHeaders", "reorderRow", "exportPDF", "exportExcel", "sortAsc", "sortDesc".

You can also specify a custom item and accosiate it with a command.

<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
        contextMenu: {
            head: [
                "sortAsc",
                "sortDesc",
                "exportExcel",
                { name: "MyCustomCommand", text: "My Custom Command", icon: "gear", command: "CustomCommand" }
            ]
            // You can also concat to the default tools
            // head: kendo.ui.grid.defaultHeadContextMenu.concat([
            //     { name: "MyCustomCommand", text: "My Custom Command", icon: "gear", command: "CustomCommand" }
            // ])
        },
        editable: true,
        sortable: true,
        draggable: true,
        reorderable: 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;

            grid.saveAsPDF();
        }
    });
</script>

contextMenu.open

Function

Fires before a sub menu or the ContextMenu gets opened. You can cancel this event to prevent opening the sub menu. ContextMenu Events.

<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 }
  ],
  contextMenu: {
    open: function(e) {
      console.log("Context menu is opening");
    }
  }
});
</script>

contextMenu.select

Function

Fires when a menu item gets selected. ContextMenu Events.

<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 }
  ],
  contextMenu: {
    select: function(e) {
      console.log("Context menu item selected:", e.item.text);
    }
  }
});
</script>

Related Members