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()
          .姓名("gridFORECASTREPORT")
          .Columns(列 => { ... }
          .DataKeys(键 => keys.Add(c => c.OpportunityId))
          .DataBinding(dataBinding => dataBinding.Ajax().OperationMode(GridOperationMode.Client))
          .Groupable(分组=> grouping.Groups(组=>
          {
              groups.Add(c => c.AccountName);
              groups.Add(c => c.OpportunityName);
              groups.Add(c => c.OpportunityId);
          }).可见(假))
          .EnableCustomBinding(真)
          .Pageable(p => p.PageSize(396)))

Answer 1

经过大量研究，我决定自己用JS实现排序。 对于我的网格使用的页面大小等于 396，工作速度很快，当然可以做得更快。这些链接的 12 个项目中的每一个都已经有一个 SortOrder 字段，在这个 12 项目组中具有正确的顺序。又快又脏，尽情享受吧！如果您知道更好的解决方案，请分享。到目前为止标记为已回答。真正有效的解决方案，由我的 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)))