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

Create Custom Tool in the ToolBar Similar to the Grid ColumnMenu


Product Progress® Kendo UI® ToolBar for jQuery


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


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>
          <button id="first-btn">Button 1</button>
          <button id="second-btn">Button 2</button>

      <div id="expansionPanel2">
        <label for="products">Products:</label>
        <input id="products" />
        items: [
          { type: 'button', icon: 'menu', text: 'Custom Menu', click: onClick }

        anchor: $(".k-button")

      function onClick(){

        title: 'CheckBoxGroup example',
        expanded: true

        title: 'DropDownList example',

        items: [ "one", "two", "three" ],
        value: ["two", "one"]

        filter: "startswith",
        dataTextField: "ProductName",
        dataValueField: "ProductID",
        dataSource: {
          type: "odata",
          serverFiltering: true,
          transport: {
            read: {
              url: "",

        text: 'Button 1',
        themeColor: "success"

        text: 'Button 2',
        themeColor: "primary"

See Also

In this article