Optional Grouping

[Erik]

I want to perform automatic grouping at run-time under certain conditions.  I am currently handling it by attaching to .DataBound event and if a js flag variable is set then I call:

var grid = $("#myGrid").data("kendoGrid");
grid.dataSource.group({ field: "FieldToBeGrouped" });

 

Is there a more recommended way?

 

 

Reason I am asking is I am noticing some oddities when it executes the grouping where it takes longer than expected and results in browser error Uncaught RangeError: Maximum call stack size exceeded.  The end result does have the grid grouped as I would expect but the error and execution time is worrisome.

Note the field that is being grouped is listed as Hidden.  Also I do not want to give the ability for the user to group other columns (or think that they can) so I have not included .Groupable() in order to not show the grouping toolbar.  I did try including .Groupable() and still noticed same issues.

[Georgi]

Hi Erik,

The described behavior is expected since when the grid is grouped it rebinds and therefore the dataBound event is triggered. This causes an infinite loop and the stack overflow exception is thrown. Have in mind that calling a method which is related with the data binding mechanism within the dataBound handler causes an endless loop.

A possible workaround is to disable AutoBind and group the grid within the document ready event handler:

e.g.

$(function(){
  if(condition){
    var grid = $("#myGrid").data("kendoGrid");
    grid.dataSource.group({ field: "FieldToBeGrouped" });
  }
})

For your convenience attached you will find a sample which demonstrates the above solution.


Regards,
Georgi
Progress Telerik

[Erik]

Thanks for the clarification about the dataBound endless loop.  Your example led to the solution though there was a minor addition to make it all work.

Since AutoBind is disabled, I still needed to initiate a data load when the condition is NOT met.

$(function(){
  if(condition){
    var grid = $("#myGrid").data("kendoGrid");
    grid.dataSource.group({ field: "FieldToBeGrouped" });
  } else {
    grid.dataSource.read();
  }
})