Question

我有一个带有排序事件的多个剑道MVC网格，因此如果在一个网格上应用排序，它也会应用于所有其他网格。这似乎工作正常，直到我需要覆盖排序函数并对2列进行排序。

下面的代码现在将所有其他网格排序为2列，但不是在单击列进行排序时引发事件的网格。

有没有办法解决这个问题，以便点击的网格也能正确排序？

雷蛇：

for (int i = 0; i < grids.Count; i++)
{
    @(Html.Kendo().Grid(dataXYZ)
          .Name($"grid{i}")
          .Deferred()
          .Columns(columns =>
          {
              // Columns

          })
          .Sortable(sortable =>
          {
              sortable.SortMode(GridSortMode.SingleColumn);
          })
          .Events(events => events
              .Sort("onSorting")
              .DataBound("dataBound")
          )
          .DataSource(dataSource => dataSource
              .Ajax()
              .PageSize(50)
              .ServerOperation(false)
          )

   ) 
}

的javascript：

<script>


    function onSorting(arg) {
        $("div[data-role=grid]").each(function () {
            var grid = $(this).data("kendoGrid");

            var dsSort = [];
            dsSort.push({ field: "SortColumnHelper", dir: "desc" });
            dsSort.push({ field: arg.sort.field, dir: arg.sort.dir });

            grid.dataSource.sort(dsSort);

        });
    }


</script>

编辑：我认为发生的事情是在网格排序之前调用sort事件，因此代码可以工作，但真正的排序会在事件代码运行后发生。

Answer 1

我设法想办法做到这一点，dataBound事件在排序后触发，因此每个网格也可以再次循环并捕获未排序的网格。

<script>

    function onSorting(arg) {
        $("div[data-role=grid]").each(function () {
            var grid = $(this).data("kendoGrid");

            grid.dataSource.sort({});
            var dsSort = [];
            dsSort.push({ field: "SortColumnHelper", dir: "desc" });
            dsSort.push({ field: arg.sort.field, dir: arg.sort.dir });
            grid.dataSource.sort(dsSort);


        });
    }

    function dataBound(arg) {

        $("div[data-role=grid]").each(function (e) {
            var grid = $(this).data("kendoGrid");
            var gridData = grid.dataSource.view();

            var sort = grid.dataSource.sort();
            if (sort != null && sort.length > 0 && sort.length <= 1) {

                var sortedField = sort[0].field;
                var sortedDir = sort[0].dir;
                if (sortedField != "SortColumnHelper") {

                    //console.log(this.id + " " + sortedField + " " + sortedDir);
                    var dsSort = [];
                    dsSort.push({ field: "SortColumnHelper", dir: "desc" });
                    dsSort.push({ field: sortedField, dir: sortedDir });
                    grid.dataSource.sort(dsSort);
                }
            }

        });
    }

</script>

这里的关键是应该检查排序长度的上限，否则排序将重新触发dataBound事件然后求助等，这将产生溢出错误。

if (sort != null && sort.length > 0 && sort.length <= 1)

基本上，这会检查网格是否仅在1列上排序，然后对2列应用排序。

看起来有点＆hacky＆＃39;但是可以在MVC kendo docs

上找到另一种方法

排序事件不起作用于引发事件的网格

1 个答案: