CODEWITHSUNDEEP
jqueryarrayskendo-uikendo-grid
Jacob Banner
Jacob Banner

Reputation: 109

Kendo grid - Group by a maximum of 3 columns

I need to limit grouping in my Kendo jQuery Grid to a maximum of 3 columns. I know that I need to do this using the databound event and will need to use grid.dataSource.group() and remove the new column from the array. Perhaps the best way is to store the 'previous' grouping and then compare the old and new arrays to see which column is the new one, then remove that?

Upvotes: 1

Views: 1004

Answers (1)

Shai
Shai

Reputation: 3872

You can cancel the grouping in the group event like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="grid"></div>
<script>

  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { field: "age" },
      { field: "test" }
    ],
    dataSource: {
      data: [
        { id: 1, name: "Jane Doe", age: 30, test: 1 },
        { id: 2, name: "John Doe", age: 33, test: 2 }
      ],
      schema: {
        model: { id: "id" }
      }
    },
    groupable: true,
    group: function(e) {
      if (e.groups.length > 2) {
        e.preventDefault();
        console.log("Group prevented");
      }
    }
  });
</script>
</body>
</html>

Upvotes: 4

Related Questions