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

ColumnMenu.columns.groups

configuration

The user defined groups of the columns visibility list.

columnMenu.columns.groups

Array

Default: null

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name", title: 'Name' },
    { field: "age", title: 'Age' }
  ],
  columnMenu: {
    columns: {
      groups: [
        { title: 'first group', columns: ['Age'] },
        { title: 'second group', columns: ['Name'] }
      ]
    }
  },
  sortable: true,
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
</script>

columnMenu.columns.groups.columns

Array

The titles of the columns that are part of the group. In case some column does not have a specified title, you can use the field instead. Columns that don't have specified either a title or a field, are not displayed in the column menu.

Default: null

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name", title: 'Name' },
    { field: "age" }
  ],
  columnMenu: {
    columns: {
      groups: [
        { title: 'first group', columns: ['age'] }, // field is used instead of title, as the age column does not have a specified title
        { title: 'second group', columns: ['Name'] }
      ]
    }
  },
  sortable: true,
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
</script>

columnMenu.columns.groups.title

String

The text displayed in the header of the group.

Default: null

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName", title: "Product" },
    { field: "unitPrice", title: "Price" },
    { field: "category", title: "Category" }
  ],
  dataSource: [
    { productName: "Tea", unitPrice: 2.5, category: "Beverages" },
    { productName: "Coffee", unitPrice: 3.0, category: "Beverages" }
  ],
  columnMenu: {
    columns: {
      groups: [
        {
          title: "Product Information",
          columns: ["productName", "category"]
        },
        {
          title: "Pricing",
          columns: ["unitPrice"]
        }
      ]
    }
  }
});
</script>