Optional Grouping

3 posts, 1 answers
  1. Erik
    Erik avatar
    42 posts
    Member since:
    Aug 2012

    Posted 13 Feb 2018 Link to this post

    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. Answer
    Georgi
    Admin
    Georgi avatar
    671 posts

    Posted 15 Feb 2018 Link to this post

    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.
  3. Erik
    Erik avatar
    42 posts
    Member since:
    Aug 2012

    Posted 15 Feb 2018 in reply to Georgi Link to this post

    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();
      }
    })
Back to Top