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

Groupable

configuration

If set to true the user could group the grid by dragging the column header cells. By default grouping is disabled.

Can be set to a JavaScript object which represents the grouping configuration.

groupable.enabled

Boolean

When set to false grouping is considered disabled.

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" },
    { productName: "Ham", category: "Food" },
    { productName: "Bread", category: "Food" }
  ],
  groupable: {
    enabled: false
  }
});
</script>

groupable.messages

Object

The text messages displayed during grouping.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" },
    { field: "unitPrice" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages", unitPrice: 2.5 },
    { productName: "Coffee", category: "Beverages", unitPrice: 3.0 },
    { productName: "Bread", category: "Food", unitPrice: 1.5 }
  ],
  groupable: {
    messages: {
      empty: "Drop column headers here to group your data"
    }
  }
});
</script>

groupable.showFooter

Boolean

When enabled the group footer rows will remain visible when the corresponding group is collapsed.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName", groupFooterTemplate: "this is a footer" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Beer", category: "Beverages" },
    { productName: "Cheese", category: "Food" },
  ],
  groupable: {
    showFooter: true
  }
});
</script>

groupable.sort

Object

Sets the sort configuration when grouping.

<div id="grid"></div>

<script>
    $("#grid").kendoGrid({
        dataSource: {
            data: [
                { id: 1, name: "Salmon", category: "Seafood" },
                { id: 3, name: "Ice cream", category: "Desserts" },
                { id: 2, name: "Mackerel", category: "Seafood" },
                { id: 4, name: "Cake", category: "Desserts" },
                { id: 5, name: "Lemonade", category: "Beverages" },
                { id: 6, name: "Tea", category: "Beverages" },
                { id: 7, name: "Coffee", category: "Beverages" },
            ],
            pageSize: 10
        },
        pageable: true,
        groupable: {
            sort: {
                dir: "desc",
                compare: function(a, b) {
                    if (a.items.length === b.items.length) {
                        return 0;
                    } else if (a.items.length > b.items.length) {
                        return 1;
                    } else {
                        return -1;
                    }
                }
            }
        },
        height: 550,
        columns: [
            { field: "id", title: "Id", width: "120px" },
            { field: "name", title: "Name", width: "120px" },
            { field: "category", title: "Category", width: "120px" }
        ]
    });
</script>

When enabled the group footer rows will stick to the bottom of the scrollable content area while scrolling through the group's data rows. Requires the scrollable option to be enabled. The columns must have a groupFooterTemplate defined.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName", groupFooterTemplate: "Count: #=count#" },
    { field: "category" }
  ],
  dataSource: {
    data: [
      { productName: "Tea", category: "Beverages" },
      { productName: "Coffee", category: "Beverages" },
      { productName: "Ham", category: "Food" },
      { productName: "Bread", category: "Food" }
    ],
    group: { field: "category", aggregates: [{ field: "productName", aggregate: "count" }] }
  },
  height: 200,
  scrollable: true,
  groupable: {
    stickyFooters: true
  }
});
</script>

groupable.stickyHeaders

Boolean

When enabled the group header rows will stick to the top of the scrollable content area while scrolling through the group's data rows. Requires the scrollable option to be enabled.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    columns: [
        { field: "productName" },
        { field: "category" }
    ],
    dataSource: {
        data: [
            { productName: "Tea", category: "Beverages" },
            { productName: "Coffee", category: "Beverages" },
            { productName: "Ham", category: "Food" },
            { productName: "Bread", category: "Food" }
        ],
        group: { field: "category" }
    },
    height: 200,
    scrollable: true,
    groupable: {
        stickyHeaders: true
    }
});
</script>

Related Members