This is a migrated thread and some comments may be shown as answers.
Optional Grouping
2 Answers 13 Views
This is a migrated thread and some comments may be shown as answers.
Erik
Top achievements
Rank 1
Erik asked on 13 Feb 2018, 10:27 PM

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.

2 Answers, 1 is accepted

Sort by
0
Accepted
Georgi
Telerik team
answered on 15 Feb 2018, 03:02 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Erik
Top achievements
Rank 1
answered on 15 Feb 2018, 03:31 PM

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();
  }
})
Tags
Grid
Asked by
Erik
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Erik
Top achievements
Rank 1
Share this question
or