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

ContextMenu.head.items

configuration

Specifies the items of the item.

contextMenu.head.items

Array

<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
        contextMenu: {
            head: [
                {
                    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.head.items.command

String

Specifies the command of the item.

<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 }
  ],
  editable: "inline",
  contextMenu: {
    head: [
      {
        name: "actions",
        text: "Actions",
        items: [
          { name: "edititem", text: "Edit", command: "edit" },
          { name: "deleteitem", text: "Delete", command: "destroy" }
        ]
      }
    ]
  }
});
</script>

contextMenu.head.items.icon

String

Specifies the icon of the item.

<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: {
    head: [
      {
        name: "actions",
        text: "Actions",
        items: [
          { name: "edititem", text: "Edit", icon: "k-icon k-i-edit", command: "edit" },
          { name: "deleteitem", text: "Delete", icon: "k-icon k-i-delete", command: "destroy" }
        ]
      }
    ]
  }
});
</script>

contextMenu.head.items.name

String

Specifies the name of the item.

<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: {
    head: [
      {
        name: "actions",
        text: "Row Actions",
        items: [
          { name: "edititem", text: "Edit", command: "edit" },
          { name: "deleteitem", text: "Delete", command: "destroy" }
        ]
      }
    ]
  }
});
</script>

contextMenu.head.items.text

String

Specifies the text of the item.

<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: {
    head: [
      {
        name: "actions",
        text: "Actions",
        items: [
          { name: "edititem", text: "Edit Row", command: "edit" },
          { name: "deleteitem", text: "Delete Row", command: "destroy" }
        ]
      }
    ]
  }
});
</script>