Create Custom Tool in the ToolBar Similar to the Grid ColumnMenu

Environment

Product

Progress® Kendo UI® ToolBar for jQuery

Description

How can I create a custom ToolBar tool that has similar appearance to the Grid`s Column Menu?

Solution

The Kendo UI ColumnMenu can not be used as a standalone component. If you need to have a similar functionality to the ColumnMenu in the ToolBar you can try utilizing the rest of the Kendo components to achieve it.

1. In the ToolBar items.template add an element from which you can initialize a Kendo Popup.
2. In the Popup component, you can add an ExpansionPanels.
3. Next, add the needed components such as CheckBox, CheckBoxGroup, DropDownList, Button, etc.

    <div id="toolbar"></div>

    <div id="popup">
      <div id="expansionPanel">
        <ul id="checkboxgroup"></ul>
        <div>
          <button id="first-btn">Button 1</button>
          <button id="second-btn">Button 2</button>
        </div>
      </div>

      <div id="expansionPanel2">
        <label for="products">Products:</label>
        <input id="products" />
      </div>
    </div>
    <script>
      $("#toolbar").kendoToolBar({
        items: [
          { type: 'button', icon: 'menu', text: 'Custom Menu', click: onClick }
        ] 
      });

      $("#popup").kendoPopup({
        anchor: $(".k-button")
      }).data("kendoPopup")

      function onClick(){
        $("#popup").data('kendoPopup').open()
      }

      $("#expansionPanel").kendoExpansionPanel({
        title: 'CheckBoxGroup example',
        expanded: true
      });

      $("#expansionPanel2").kendoExpansionPanel({
        title: 'DropDownList example',
      });

      $("#checkboxgroup").kendoCheckBoxGroup({
        items: [ "one", "two", "three" ],
        value: ["two", "one"]
      });

      $("#products").kendoDropDownList({
        filter: "startswith",
        dataTextField: "ProductName",
        dataValueField: "ProductID",
        dataSource: {
          type: "odata",
          serverFiltering: true,
          transport: {
            read: {
              url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
            }
          }
        }
      });

      $("#first-btn").kendoButton({
        text: 'Button 1',
        themeColor: "success"
      });

      $("#second-btn").kendoButton({
        text: 'Button 2',
        themeColor: "primary"
      });
    </script>

See Also

• JavaScript API Reference of the ToolBar