Develop and Register Custom ToolBar Tools

The example below demonstrates how to develop and register custom ToolBar tools, and in particular how to close ToolBar popup manually.
Important

The following approach works in the Kendo UI Q3 2015 release, while not in previous versions of the framework
Example

  <div id="toolbar"></div>
  <script>
    //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
        }).data("kendoDropDownList");

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

        //the following methods add attributes in the HTML that are used for the resizable functionality
        this.attributes();
        this.addUidAttr();
        this.addOverflowAttr();
      },
      _change: function(e) {
        this.options.change(e.sender.value());
      }
    });

    //Overflow tool - inherits from the existing tool
    var OptionDialog = kendo.toolbar.OverflowButton.extend({
      init: function(options, toolbar) {
        kendo.toolbar.OverflowButton.fn.init.call(this, 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
        }).data("kendoWindow");
      },
      _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
        }).data("kendoListView");
      },
      open: function() {
        this.dialog.open();
      },
      _change: function(e) {
        var listView = e.sender;
        var dataItem = listView.dataSource.getByUid(listView.select().data("uid"));
        this.options.change(dataItem.value);
      },
      _click: function() {
        this.open();
      }
    });

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

    $("#toolbar").kendoToolBar({
      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");
    }
  </script>
Example

See Also

Give article feedback
