Telerik Extensions for ASP.NET MVC - GRID - randomly sorted items inside group in Chrome when GridOperationMode.Client

Question

Data source contains many records, but each 12 records represent 12 characteristic of 1 entity sorted in fixed order. Then rows are grouped by 3 columns (by 'AccountName', 'OportunityName' and 'OpportunityId'), and the group on deepest level contains those 12 characteristic. All worked OK when 'GridOperationMode.Server' was used:

But to increase performance we decided to change operation mode to client - 'GridOperationMode.Client'. After that performance became better, but those 12 characteristic lost they sorting in Chrome - for each group they are rendered in random order. I checked the issue in IE and FF - and found that they don't have such a problem. Any ideas how to fix the wrong order in chrome?

Wrong order in Chrome when GridOperationMode.Client is used

JS (shortened) - binds grid:

function populateForecastClosedGrid(controllerActionUrl) {
    var gridForecastClosed = $("#gridFORECASTREPORT").data("tGrid");
    var accountId = $('#accountsFilterCombo').data('tComboBox').value();
    gridForecastClosed.ajax.selectUrl = controllerActionUrl + '?checkDate=' + new Date().formatMMDDYYYY() + '&accountId=' + accountId;
    gridForecastClosed.showBusy();
    $.post(gridForecastClosed.ajax.selectUrl, function (data) {
        gridForecastClosed.dataSource.data([]);;
        gridForecastClosed.dataBind(data);
    });
}

Grid (shortened):

@(Html.Telerik().Grid()
          .Name("gridFORECASTREPORT")
          .Columns(columns => { ... }
          .DataKeys(keys => keys.Add(c => c.OpportunityId))
          .DataBinding(dataBinding => dataBinding.Ajax().OperationMode(GridOperationMode.Client))
          .Groupable(grouping => grouping.Groups(groups =>
          {
              groups.Add(c => c.AccountName);
              groups.Add(c => c.OpportunityName);
              groups.Add(c => c.OpportunityId);
          }).Visible(false))
          .EnableCustomBinding(true)
          .Pageable(p => p.PageSize(396)))

Answer 1

After a lot of researching I decided to implement sorting by myself using JS. Works fast for page size equals 396 my grid uses, of course can be made faster. Each from those linked 12 items already has a field SortOrder with correct order inside this 12-items group. Quick and dirty, enjoy! If you know better solution please share. So far marked as answered. Really working solution, approved by my TL as no other ways found, can be adapted to any other grid.

function onGridForecastClosedDataBound() {
    var grid = $(this).data('tGrid');
    // Request came to increase Forecast (Closed) grid performance. The only way (w/o touching SQL)
    // I found is to change grid operation mode from Server to GridOperationMode.Client (~50% increase).
    // But Telerik Grid + Chrome (OK on IE, FF) has a problem - wrong sorted items inside group
    // when grouping is performed on client side. This is a quick and dirty workaround for this
    // particular grid - to perform "sorting" manually using JS.
    // IMPORTANT! Pay attention, that if you change number of rows per
    // opportunity (currently 12) then the grid will be broken w/o changing the code below.
    if ('@Request.Browser.Browser' == 'Chrome') {
        var numberOfRowsPerOpportunity = 12;

        var rows = grid.$tbody.find('tr');
        var rowsSorted = [];

        while (rows.length > 0) {
            var partGroups = rows.splice(0, rows.slice(0, grid.groups.length).filter('.t-grouping-row').length);
            var partRows = rows.splice(0, numberOfRowsPerOpportunity);
            partRows.sort(function (a, b) {
                var sortOrderA = parseInt($(a).find('td.sort-order').text());
                var sortOrderB = parseInt($(b).find('td.sort-order').text());
                return sortOrderA - sortOrderB;
            });

            $.each(partRows, function (index, item) {
                $(item).removeClass('t-alt');
                if (index % 2 != 0) $(item).addClass('t-alt');
            });

            $.merge(rowsSorted, partGroups);
            $.merge(rowsSorted, partRows);
        }
        rows.remove();
        grid.$tbody.append(rowsSorted);
    }
    grid.hideBusy();
}

function populateForecastClosedGrid(controllerActionUrl) {
    var gridForecastClosed = $("#gridFORECASTREPORT").data("tGrid");
    var accountId = $('#accountsFilterCombo').data('tComboBox').value();
    gridForecastClosed.ajax.selectUrl = controllerActionUrl + '?checkDate=' + new Date().formatMMDDYYYY() + '&accountId=' + accountId;
    gridForecastClosed.showBusy();
    gridForecastClosed.dataSource.data([]);
    gridForecastClosed.ajaxRequest();
}

Grid (shortened):

@(Html.Telerik().Grid<mForecastReport>()
      .Name("gridFORECASTREPORT")
      .DataKeys(keys => keys.Add(c => c.OpportunityId))
      .ClientEvents(e => e.OnDataBound("onGridForecastClosedDataBound"))
      .DataBinding(dataBinding => dataBinding.Ajax().OperationMode(GridOperationMode.Client))
      .Columns(columns => {
          ...
          columns.Bound(c => c.SortOrder).Hidden(true).HtmlAttributes(new {  @class = "sort-order" });
      }
      .Groupable(grouping => grouping.Groups(groups => 
      {
          groups.Add(c => c.AccountName);
          groups.Add(c => c.OpportunityName);
          groups.Add(c => c.OpportunityId);
      }).Visible(false))
      .Pageable(p => p.PageSize(396)))