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

Develop and Register Custom ToolBar Tools


Product Progress® Kendo UI® ToolBar for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I develop and register custom tools in the Kendo UI for jQuery ToolBar?


The example below demonstrates how to achieve the desired scenario.

The following approach works in the Kendo UI versions from Q3 2015 to R3 2022.

If you are using Kendo UI version R1 2023 or later, please refer to the Custom Tools documentation article.

  <div id="toolbar"></div>
    //ToolBar tool - inherits from base tool
    var OptionList = kendo.toolbar.Item.extend({
      init: function(options, toolbar) {
        this.options = options;
        this.toolbar = toolbar;

        //build kendoDropDownList from the provided options in ToolBar configuration
        var dropDownList = $("<select />").kendoDropDownList({
          height: "auto",
          dataTextField: "text",
          dataValueField: "value",
          optionLabel: options.text, //use tool's text as option label
          change: $.proxy(this._change, this), //do something on change
          dataSource: options.list

        this.dropDownList = dropDownList;
        this.element = dropDownList.wrapper;

        //the following methods add attributes in the HTML that are used for the resizable functionality
      _change: function(e) {

    //Overflow tool - inherits from the existing tool
    var OptionDialog = kendo.toolbar.OverflowButton.extend({
      init: function(options, toolbar) {, options, toolbar);

        this.options = options;
        this.element.on("click", $.proxy(this._click, this)); //open the dialog on click

        this._dialog(); //build dialog
        this._listView(); //build listView
      _dialog: function() {
        this.dialog = $("<div />", { html: "<div class='k-list'></div>" }).kendoWindow({
          title: this.options.text,
          width: 280,
          height: 220
      _listView: function() {
        this.listView = this.dialog.element.find("div").kendoListView({
          dataSource: this.options.list,
          template: "<div class='k-item'>#= text #</div>",
          selectable: true,
          change: $.proxy(this._change, this) //do something when item is selected
      open: function() {;
      _change: function(e) {
        var listView = e.sender;
        var dataItem = listView.dataSource.getByUid("uid"));
      _click: function() {;

    //register the tool
    kendo.toolbar.registerComponent("optionList", OptionList, OptionDialog);

      items: [
        { //initialize standard tool
          type: "button",
          id: "myButton",
          text: "My Button",
          click: onMyButtonClick
        { //initialize the tool with options
          type: "optionList", //specify the tool type as it is registered via the registerComponent method
          text: "Choose an option",
          list: [ //we will use this array as data for the DropDownList/ListView
            { text: "Option 1", value: 1 },
            { text: "Option 2", value: 2 },
            { text: "Option 3", value: 3 },
            { text: "Option 4", value: 4 },
            { text: "Option 5", value: 5 }
          change: function(value) { //do something when the value changes
            console.log("Option " + value + " is selected");

    function onMyButtonClick(e) {
      console.log("myButton click");

See Also

In this article