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

Toolbar.items

configuration

A JavaScript array that contains the ToolBar's commands configuration.

toolbar.items

Array

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    toolbar: {
        items: [
            { name: "search" },
            { name: "sort" },
            { name: "custom", text: "Custom Action", icon: "k-icon k-i-gear" }
        ]
    },
    model: {
        foo: "bar",
        baz: 5
    }
});
</script>

toolbar.items.click

Function

The click handler of the toolbar command. Used for custom toolbar commands.

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    toolbar: {
        items: [
            { 
                name: "custom", 
                text: "Custom Action",
                click: function(e) {
                    console.log("Custom button clicked");
                    alert("Custom action executed!");
                }
            }
        ]
    },
    model: {
        foo: "bar",
        baz: 5
    }
});
</script>

Specifies the icon's name that will be rendered inside the toolbar button. When you set this option, the PropertyGrid renders an additional span element inside the toolbar button which has a name set to the option value. This approach allows you to display an icon inside your custom toolbar commands.

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    toolbar: {
        items: [
            { 
                name: "custom", 
                text: "Settings",
                icon: "k-icon k-i-gear"
            }
        ]
    },
    model: {
        foo: "bar",
        baz: 5
    }
});
</script>

toolbar.items.imageClass

String

A class name that will be rendered inside the toolbar button. When you set this option, the PropertyGrid renders an additional span element inside the toolbar button which has a class name set to the option value. This approach allows you to display an icon inside your custom toolbar commands.

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    toolbar: {
        items: [
            { 
                name: "custom", 
                text: "Action",
                imageClass: "custom-icon"
            }
        ]
    },
    model: {
        foo: "bar",
        baz: 5
    }
});
</script>

toolbar.items.name

String

The name of the toolbar command. Can be either a built-in ("search", "sort", "group" or "details") or a custom string. The name is output in the HTML as a value of the data-command attribute of the button.

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    toolbar: {
        items: [
            { name: "search" },
            { name: "sort" },
            { name: "customAction", text: "Custom" }
        ]
    },
    model: {
        foo: "bar",
        baz: 5
    }
});
</script>

toolbar.items.text

String

The text that is displayed by the command button. If not set, the PropertyGrid will use the name option as the button text instead.

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    toolbar: {
        items: [
            { name: "search", text: "Find Properties" },
            { name: "sort", text: "Sort Items" },
            { name: "custom", text: "Custom Action" }
        ]
    },
    model: {
        foo: "bar",
        baz: 5
    }
});
</script>

Toolbar.items

toolbar.items

toolbar.items.click

toolbar.items.icon

toolbar.items.imageClass

toolbar.items.name

toolbar.items.text