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

ContextMenu.body

configuration

Configures the items of the ContextMenu for the table body element. Those are some valid predefined tools: "separator", "copy", "copyName", "copyDeclaration", "resize", "reset", "expandItem", "collpaseItem".

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

contextMenu.body

Array

<div id="propertyGrid"></div>
<script>
    $("#propertyGrid").kendoPropertyGrid({
        columns: {
            fieldColumn: { width: 200 },
            valueColumn: { width: 250 }
        },
        model: {
            foo: "bar",
            baz: 5
        },
        contextMenu: {
            body: [
                "copyDeclaration",
                "separator",
                "resize",
                { name: "MyCustomCommand", text: "Save State", icon: "gear", command: "CustomCommand" }
            ]
            // You can also concat to the default tools
            // body: kendo.ui.propertygrid.defaultBodyContextMenu.concat([
            //     { name: "MyCustomCommand", text: "SaveState", icon: "gear", command: "CustomCommand" }
            // ])
        }
    });

    kendo.ui.propertygrid.commands["CustomCommand"] = kendo.ui.propertygrid.PropertyGridCommand.extend({
        exec: function() {
            var that = this,
                propertyGrid = that.propertyGrid;

            propertyGrid.saveState();
        }
    });
</script>

contextMenu.body.command

String

Specifies the command of the item.

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    contextMenu: {
        body: [{
            name: "customItem",
            text: "Execute Command",
            command: "MyCustomCommand"
        }]
    },
    model: {
        foo: "bar",
        baz: 5
    }
});
</script>

contextMenu.body.icon

String

Specifies the icon of the item.

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    contextMenu: {
        body: [{
            name: "customItem",
            text: "Custom Item",
            icon: "k-icon k-i-gear",
            command: "CustomCommand"
        }]
    },
    model: {
        foo: "bar",
        baz: 5
    }
});
</script>

contextMenu.body.name

String

Specifies the name of the item.

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    contextMenu: {
        body: [{
            name: "custom",
            text: "Custom Action",
            command: "CustomCommand"
        }]
    },
    model: {
        foo: "bar",
        baz: 5
    }
});
</script>

contextMenu.body.text

String

Specifies the text of the item.

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    contextMenu: {
        body: [{
            name: "customItem",
            text: "Custom Menu Item",
            command: "CustomCommand"
        }]
    },
    model: {
        foo: "bar",
        baz: 5
    }
});
</script>