ASP.NET MVC的Telerik扩展 - GRID - 在GridOperationMode.Client中随机对Chrome中的组内的项目进行排序

Question

数据源包含许多记录，但每12条记录代表按固定顺序排序的1个实体的12个特征。然后行按3列分组（通过'AccountName'，'OportunityName'和'OpportunityId'），最深层次的组包含12个特征。当使用'GridOperationMode.Server'时，所有工作正常：

但为了提高性能，我们决定将操作模式更改为客户端 - 'GridOperationMode.Client'。在此表现变得更好之后，但这12个特征在Chrome中排序 时失去了 - 对于每个组，它们以随机顺序呈现。我检查了IE和FF中的问题 - 并发现它们没有这样的问题。任何想法如何修复chrome中的错误订单？

使用GridOperationMode.Client时Chrome中的订单错误

JS（缩写） - 绑定网格：

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);
    });
}

网格（缩短）：

    @(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

经过大量的研究，我决定用JS自己实现排序。 快速适用于页面大小等于我网格使用的396，当然可以更快。来自这些链接的12个项目中的每一个都已经在这个12项目组中具有正确顺序的字段SortOrder。快速又脏，享受！如果你知道更好的解决方案请分享。到目前为止标记为已回答。我的TL认可的真正有效的解决方案可以适用于任何其他网格。

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

网格（缩短）：

@(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)))