[Solved] Prevent grouping dynamically?

[Andreas]

We have  a grid with many groupable columns. But for various performance reasons, we need to limit how many columns can be grouped at any one time. If we for example have 10 groupable columns, the user should at any one time be able to group at most any two of those columns. 

My initial idea was to listen to a grid event that is fired after the user drops a group header into the grouping area. This same event need to be fired before the command is propagated to the datasource, giving me the possibility to prevent the grouping and alerting the user that the maximum number of groups is reached already. The UI also need to be reset, leaving the correct number of elements in the grouping area.

However, I cant seem to find such an event. Do you have any tips on how I could implement the above?

[Rosen]

Hi Andreas,

Although, there is no such event, you can use the Draggable instance used by the Grid groupable to implement the requested functionality. Here you can find a small sample which demonstrates this approach in action. 

var draggable = grid.groupable.draggable;
draggable.bind("dragstart", function(e) {
  if (grid.dataSource.group().length == 2) {
    alert("Grouping on more than two fields is not allowed");
    e.preventDefault();
  }
});

Regards,
Rosen
Telerik