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

ColumnMenu

configuration

If set to true, the TreeList displays the column menu when the user clicks the Chevron icon in the column headers. The column menu allows the user to show and hide columns, and, if filtering and sorting are enabled, filter and sort the data. By default, the column menu is disabled. Can be set to a JavaScript object which represents the column menu configuration.

columnMenu

Boolean|Object

Default: false

<div id="treeList"></div>
<script>
    $("#treeList").kendoTreeList({
        columns: [
            { field: "name" },
            { field: "age" }
        ],
        columnMenu: true,
        dataSource: {
            data: [
                { id: 1, parentId: null, name: "Jane Doe", age: 22 },
                { id: 2, parentId: 1, name: "John Doe", age: 24 }
            ]
        }
    });
</script>

columnMenu.columns

Boolean

If set to true, the column menu allows the user to select (show and hide) TreeList columns. By default, the column menu allows column selection.

Default: true

<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    columnMenu: {
      columns: false
    },
    sortable: true,
    dataSource: {
      data: [
        { id: 1, parentId: null, name: "Jane Doe", age: 22 },
        { id: 2, parentId: 1, name: "John Doe", age: 24 },
        { id: 3, parentId: 1, name: "Jenny Doe", age: 14 }
      ]
    }
  });
</script>

columnMenu.componentType

String

Specifies the component type of the column menu.

"classic" - Uses the standard rendering of the column menu.
"modern" - Uses new rendering with a fresh and modern look and feel.
"tabbed" - Uses the rendering of the "modern" menu, but splits its content into different tabs.

Default: "classic"

<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    columnMenu: {
      componentType: "modern"
    },
    sortable: true,
    dataSource: {
      data: [
        { id: 1, parentId: null, name: "Jane Doe", age: 22 },
        { id: 2, parentId: 1, name: "John Doe", age: 24 },
        { id: 3, parentId: 1, name: "Jenny Doe", age: 14 }
      ]
    }
  });
</script>

columnMenu.filterable

Boolean

If set to true, the column menu will allow the user to filter the TreeList. By default, if filtering is enabled through filterable, the column menu allows the user to filter.

Default: true

<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    filterable: true,
    columnMenu: {
      filterable: false
    },
    dataSource: {
      data: [
        { id: 1, parentId: null, name: "Jane Doe", age: 22 },
        { id: 2, parentId: 1, name: "John Doe", age: 24 }
      ]
    }
  });
</script>

columnMenu.messages

Object

The text messages that is played in the column menu. Use it to customize or localize the column menu messages.

<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    sortable: true,
    filterable: true,
    columnMenu: {
      messages: {
        columns: "Choose columns",
        filter: "Apply filter",
        sortAscending: "Sort (asc)",
        sortDescending: "Sort (desc)"
      }
    },
    dataSource: {
      data: [
        { id: 1, parentId: null, name: "Jane Doe", age: 22 },
        { id: 2, parentId: 1, name: "John Doe", age: 24 },
        { id: 3, parentId: 1, name: "Jenny Doe", age: 14 }
      ]
    }
  });
</script>

columnMenu.sortable

Boolean

If set to true, the column menu will allow the user to sort the TreeList by the column field. By default, if sorting is enabled through sortable, the column menu allows the user to sort the data.

If this option is set to false, the user will still be able to sort by clicking the column header cell.

Default: true

<div id="treeList"></div>
<script>
    $("#treeList").kendoTreeList({
        columns: [
            { field: "name" },
            { field: "age" }
        ],
        sortable: true,
        columnMenu: {
            sortable: false
        },
        dataSource: {
            data: [
                { id: 1, parentId: null, name: "Jane Doe", age: 22 },
                { id: 2, parentId: 1, name: "John Doe", age: 24 },
                { id: 3, parentId: 1, name: "Jenny Doe", age: 14 }
            ]
        }
    });
</script>

ColumnMenu

columnMenu

columnMenu.columns

columnMenu.componentType

columnMenu.filterable

columnMenu.messages

columnMenu.sortable

Related Members