toolbar - API Reference - Kendo UI Grid

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 grid 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 Grid Toolbar contents.

If the grid is instantiated with MVVM, The template passed will not be bound to the grid view model context. You may bind the toolbar element manually afterwards, using kendo.bind(gridWidgetInstance.element.find("k-grid-toolbar"))

If an Array value is assigned, it will be treated as the list of commands displayed in the grid's Toolbar. Commands can be custom or built-in ("cancel", "create", "save", "excel", "pdf").

The "cancel" built-in command reverts any data changes done by the end user.

The "create" command adds an empty data item to the grid.

The "save" command persists any data changes done by the end user. When executed fires saveChanges grid event.

The "excel" command exports the grid data in MS Excel format. Fires excelExport grid event.

The "pdf" command exports the grid data in PDF format. Fires pdfExport grid event.

The "search" command renders the built-in search panel for the grid.

The "columns" command renders a global column menu.

The "columns" command generates a button to open a global columns menu.

The "paste" command enables the user to switch between the "replace" and "insert" modes of the paste functionality. The allowPaste configuration must enabled for the dropdown to appear.

The "sort" command enables the user to use the sorting functionallity of the grid.

The "filter" command enables the user to use the filtering functionallity of the grid.

The "columnChooser" command enables the user to change the visibillity of the grid's columns.

The "selectAll" command enables the user to select all rows if the grid is selectable. Requires enabled checkbox selection and multiple row selection.

The "aiAssistant" command renders the AI assistant tool in the toolbar.

The "smartBox" command renders the smart search box tool in the toolbar.

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="grid"></div>
<script>
$("#grid").kendoGrid({
  toolbar: "<button class='k-button' onclick='myClick()'>My Button</button>",
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33},
    ],
    schema: {
      model: { id: "id" }
    }
  },
  editable: true
});

function myClick() {
  kendo.alert("Clicked!")
}
</script>

<script type="x-kendo/template" id="template">
	<button class='k-button' onclick='myClick()'>My Button</button>
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  toolbar: kendo.template($("#template").html()),
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33},
    ],
    schema: {
      model: { id: "id" }
    }
  },
  editable: true
});

function myClick() {
  kendo.alert("Clicked!")
}
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  toolbar: [
    { name: "create" },
    { name: "save" },
    { name: "cancel" }
  ],
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33},
    ],
    schema: {
      model: { id: "id" }
    }
  },
  editable: true
});
</script>

Apart from the built-in tools, the Grid fully exposes the ToolBar.items API. This way you can specify any custom tools in the widget using the components available in the ToolBar itself:

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    toolbar: [ {
      type: "button",
      text: "Button"
    }, {
      type: "button",
      text: "Toggle",
      togglable: true,
      icon: "cancel"
    }, {
      type: "splitButton",
      text: "SplitButton",
      menuButtons: [{text: "Option 1"}, {text: "Option 2"}]
    },{
      name: "dropDownButton",
      type: "dropDownButton",
      text: "Country",
      menuButtons: [
        { id: "1", text: "Belgium" },
        { id: "2", text: "France" }
      ]
    },{
      name: "buttonGroup",
      type: "buttonGroup",
      buttons: [
        { text: "Option 1", togglable: true },
        { text: "Option 2", togglable: true },
        { text: "Option 3", togglable: true }
      ]
    }],
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    dataSource: {
      data: [
        { id: 1, name: "Jane Doe", age: 30 },
        { id: 2, name: "John Doe", age: 33},
      ],
      schema: {
        model: { id: "id" }
      }
    },
    editable: true
  });
</script>

toolbar.iconClass

String

The class for the web font icon of the button that will be rendered in the toolbar.

Grid commands are rendered as anchors (<a>) with a span inside. The icon for the button depends on the iconClass which is rendered as a class for the inner span. Built-in commands have a predefined iconClass value.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  toolbar: [
    { name: "copy", iconClass: "k-icon k-i-copy" },
    { name: "save" },
    { name: "custom" }
  ],
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ],
    schema: {
      model: { id: "id" }
    }
  },
  editable: true
});
</script>

toolbar.items

An array collection of items to be rendered in the toolbar. Each item will be treated as the list of commands displayed in the grid's Toolbar. Commands can be custom or built-in ("cancel", "create", "save", "excel", "pdf").

The "cancel" built-in command reverts any data changes done by the end user.
The "create" command adds an empty data item to the grid.
The "canceledit" command cancels the changes to the dataItem that is being currenly edited.
The "update" command save the changes to the dataItem that is being currenly edited.
The "destroy" command removes the selected item. To work as expected, the grid should be selectable. If multiple selection is enabled, the item which will be remoed is the last selected one.
The "edit" command triggers the edit state of currently selected item. To work as expected, the grid should be selectable. If multiple selection is enabled, the item which will be edited is the last selected one.
The "save" command persists any data changes done by the end user. When executed fires saveChanges grid event.
The "excel" command exports the grid data in MS Excel format. Fires excelExport grid event.
The "pdf" command exports the grid data in PDF format. Fires pdfExport grid event.
The "search" command renders the built-in search panel for the grid.
The "columns" command renders a global column menu.
The "columns" command generates a button to open a global columns menu.
The "paste" command enables the user to switch between the "replace" and "insert" modes of the paste functionality. The allowPaste configuration must enabled for the dropdown to appear.
The "sort" command enables the user to use the sorting functionallity of the grid.
The "filter" command enables the user to use the filtering functionallity of the grid.
The "group" command enables the user to use the grouping functionallity of the grid.
The "columnChooser" command enables the user to change the visibillity of the grid's columns.
The "selectAll" command enables the user to select all rows if the grid is selectable.
The "aiAssistant" command renders the AI assistant tool in the toolbar.
The "smartBox" command renders the smart search box tool in the toolbar.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  toolbar: {
    items: [
      { name: "create", text: "Add New" },
      { name: "excel", text: "Export to Excel" },
      { name: "pdf", iconClass: "k-icon k-i-file-pdf" },
      { name: "custom", text: "Custom Action", template: "<button class='k-button' onclick='customAction()'>Custom</button>" }
    ]
  },
  editable: true
});

function customAction() {
  alert("Custom action executed!");
}
</script>

toolbar.name

String

The name of the toolbar command. Either a built-in ("cancel", "create", "save", "excel", "pdf") or custom. When a custom command is added the name is reflected in one of the CSS classes, which is applied to the button - k-grid-name. This class can be used to obtain reference to the button after Grid initialization and attach click handlers.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  toolbar: [
    { name: "create" },
    { name: "save" },
    { name: "custom" }
  ],
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ],
    schema: {
      model: { id: "id" }
    }
  },
  editable: true
});

$(".k-grid-custom").click(function(e){
    // handler body
});
</script>

toolbar.overflow

Object

Specifies Toolbar.overflow configuration for the toolbar.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  toolbar: {
    items: [
      { name: "create" },
      { name: "excel" },
      { name: "pdf" },
      { name: "custom1", text: "Action 1" },
      { name: "custom2", text: "Action 2" }
    ],
    overflow: {
      mode: "scroll",
      scrollButtons: "visible",
      scrollButtonsPosition: "split",
      scrollDistance: 100
    }
  },
  editable: true
});
</script>

toolbar.showInactiveTools

Boolean

If set to true, the toolbar will show the inactive tools in a disabled state. Otherwise the tools will be hidden.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  sortable: true,
  filterable: true,
  groupable: true,
  toolbar: {
    items: [
      { name: "sort" },
      { name: "filter" },
      { name: "group" }
    ],
    showInactiveTools: true
  }
});
</script>

toolbar.template

String|Function

The template which renders the command. By default renders a button.

<div id="grid"></div>
<script id="template" type="text/x-kendo-template">
<a class="k-button" href="\#" onclick="return toolbar_click()">Command</a>
</script>
<script>
function toolbar_click() {
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log("Toolbar command is clicked!");
  return false;
}
$("#grid").kendoGrid({
  toolbar: [
    { template: kendo.template($("#template").html()) }
  ],
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
  ]
});
</script>

Check Toolbar template for a live demo.

<div id="grid"></div>
<script>
function toolbar_click() {
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log("Toolbar command is clicked!");
  return false;
}
$("#grid").kendoGrid({
  toolbar: [
    {
      template: '<a class="k-button" href="\\#" onclick="return toolbar_click()">Command</a>'
    }
  ],
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
  ]
});
</script>

toolbar.text

String

The text displayed by the command button. If not set the name option would be used as the button text instead.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  toolbar: [
    { name: "create", text: "Add new" }
  ],
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
  ],
  editable: true
});
</script>

Related Members