toolbar - API Reference - Kendo UI PropertyGrid

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

configuration

If a String value is assigned to the toolbar configuration option, it will be treated as a single string template for the whole PropertyGrid toolbar and the string value will be passed as an argument to a kendo.template() function.
If a Function value is assigned (it may be a kendo.template() function call or a generic function reference), then the return value of the function will be used to render the contents of the PropertyGrid toolbar.
If an Array value is assigned, it will be treated as the list of commands which are displayed in the PropertyGrid toolbar. Commands can be custom or built-in. The supported built-in commands are:
- search—Adds a Search input to the ToolBar of the PropertyGrid. Search is performed by property name.
- sort—Adds a DropDownList with sorting options. Properties are sorted by property name.
- group—Renders a button for toggling between List and Group layout.
- details—Renders a button for toggling the Details/Info box.
- separator—Renders a separator element.
- spacer—Renders a spacer element.
- excel—Exports the data in MS Excel format.
- pdf—Exports the data in PDF format.
If an Object value is assigned, it will propagate these properties to the underlying Toolbar:
- items - an array of commands as explained above
- overflow - an object that configures the overflow behavior of the toolbar. The same as Toolbar.overflow property

String|Function|Array|Object

<div id="propertyGrid"></div>
<script>
  $("#propertyGrid").kendoPropertyGrid({
    columns: {
        fieldColumn: { width: 200 },
        valueColumn: { width: 250 }
    },
    toolbar: ["search", "spacer", "sort"],
    model: {
        foo: "bar",
        baz: 5
    },
    items: [
        {field: "foo", description: "I am foo!"},
        {field: "baz", description: "I am baz!" }
    ]
  });
</script>

<div id="propertyGrid"></div>
<script>
  $("#propertyGrid").kendoPropertyGrid({
    columns: {
        fieldColumn: { width: 200 },
        valueColumn: { width: 250 }
    },
    toolbar: "<p>My string template in a paragraph.</p>",
    model: {
        foo: "bar",
        baz: 5
    },
    items: [
        {field: "foo", description: "I am foo!"},
        {field: "baz", description: "I am baz!" }
    ]
  });
</script>

Apart from the built-in tools, the PropertyGrid fully exposes the ToolBar.items API. This way you can specify any custom tools in the component using the components available in the ToolBar itself. Note that all tools (commands) must have their name specified, as demonstrated in the next example:

<div id="propertyGrid"></div>
<script>
  $("#propertyGrid").kendoPropertyGrid({
    columns: {
        fieldColumn: { width: 200 },
        valueColumn: { width: 250 }
    },
    toolbar: [
        "search",
        "spacer",
        "sort",
        {
            name: "splitbtn",
            type: "splitButton",
            text: "SplitButton",
            menuButtons: [
                {text: "Option 1"},
                {text: "Option 2"}]
        }],
    model: {
        foo: "bar",
        baz: 5
    },
    items: [
        {field: "foo", description: "I am foo!"},
        {field: "baz", description: "I am baz!" }
    ]
  });
</script>

toolbar.click

Function

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

<div id="propertyGrid"></div>
<script>
  $("#propertyGrid").kendoPropertyGrid({
    toolbar: [
      "search",
      { name: "custom", click: function() { alert("custom"); } }
    ],
    model: {
        foo: "bar",
        baz: 5
    },
    width: 500
  });
</script>

toolbar.icon

String

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: [{name: "custom", text: "About", icon: "info-circle", imageClass: "custom-info" }],
    model: {
        foo: "bar",
        baz: 5
    },
    width: 500
  });
</script>

toolbar.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: [{name: "custom", text: "About", icon: "info-circle", imageClass: "custom-info" }],
    model: {
        foo: "bar",
        baz: 5
    },
    width: 500
  });
</script>

toolbar.items

Array

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

<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.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: [
      "search",
      { name: "custom", click: function() { alert("custom"); } }
    ],
    model: {
        foo: "bar",
        baz: 5
    },
    width: 500
  });
</script>

toolbar.overflow

Object

Specifies Toolbar.overflow configuration for the toolbar.

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    toolbar: {
        items: [
            { name: "search" },
            { name: "sort" },
            { name: "group" }
        ],
        overflow: {
            mode: "scroll",
            scrollButtons: "auto",
            scrollButtonsPosition: "split",
            scrollDistance: 100
        }
    },
    model: {
        foo: "bar",
        baz: 5
    }
});
</script>

toolbar.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: [
      { name: "custom", text: "My Command" }
    ],
    model: {
        foo: "bar",
        baz: 5
    },
    width: 500
  });
</script>

Related Members