toolbar String|Function|Array
- If a
Stringvalue is assigned to thetoolbarconfiguration 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
Functionvalue is assigned (it may be akendo.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
Arrayvalue 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.
Example - set the ToolBar as an array of commands
<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>
Example - set the ToolBar as a string template
<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:
Example - add split button to the ToolBar
<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>