在 dataSource.read 之后获取 Kendo Grid 中的记录数答案

【问题标题】：Get record count in Kendo Grid after dataSource.read在 dataSource.read 之后获取 Kendo Grid 中的记录数
【发布时间】：2013-05-29 21:39:38
【问题描述】：

我希望能够在读取（刷新）后从我的剑道网格中推送记录数。

这是我的剑道网格：

    @(Html.Kendo().Grid(Model)
      .Name("SearchWindowGrid")
      .Columns(columns =>
          {
              columns.Bound(p => p.SYSTEM_ITEMS_SEGMENT1).Hidden();
          })
      .ClientRowTemplate(
          "<tr>" +
            "<td>" +
                "<span><b>#: SYSTEM_ITEMS_SEGMENT1#</b></span>&nbsp;<br/>" +
                "<span>#: DESCRIPTION# </span>" +
            "</td>" +
          "</tr>"
      )
      .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("PopulateSearchWindow", "Item").Data("additionalSearchWindowInfo"))
        .Events(ev => ev.Error("onErrorSearchWindow"))
      )
      .Selectable(s => s.Enabled(true).Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
      .Scrollable(s => s.Enabled(true).Height(450))
  )

我的控制器操作：

    public ActionResult PopulateSearchWindow([DataSourceRequest] DataSourceRequest request, string option, string searchText, string searchDesc)
    {
        try
        {
            var derps= _idg.SearchItems(searchText, searchDesc, _adg.OrganizationCode).ToList();

            return Json(derps.ToDataSourceResult(request, ModelState));
        }
        catch (Exception e)
        {
            ModelState.AddModelError("ExceptionErrors", e.Message);
            return Json(new List<Derp>().ToDataSourceResult(request, ModelState));
        }
    }

这是我强制刷新数据的函数：

    function refreshData(){
        $("#SearchWindowGrid").data("kendoGrid").dataSource.read();
        //TODO: get the total count and push to #countElement
        var count = $("#SearchWindowGrid").data("kendoGrid").length; //not sure what to do here
        $("#countElement").val(count);
    }

我将 TODO 放在 jQuery 函数中的位置，我希望能够获取行数并将该数字推送到我页面上的特定元素中。

【问题讨论】：

标签： jquery asp.net-mvc asp.net-mvc-4 kendo-ui kendo-grid

【解决方案1】：

根据 API 参考here

dataSource 有一个 total() 函数。所以理论上你应该能够做到以下几点：

function refreshData(){
        var grid = $("#SearchWindowGrid").data("kendoGrid");
        grid.dataSource.read();
        var count = grid.dataSource.total();
        $("#countElement").val(count);
    }

【讨论】：

感谢您的回答@Quinton Bernhardt。 fetch() 函数让我望而却步，但你发给我的那个参考起到了作用。再次感谢:)
var searchWindowSource = $("#SearchWindowGrid").data("kendoGrid").dataSource; searchWindowSource.fetch(function () { var total = searchWindowSource.total(); });
total() 甚至可以使用过滤器。如果filter 应用于网格dataSource，那么它也会为我们提供过滤记录的计数。

【解决方案2】：

我发现当您在 .read() 函数之后请求 .total() 时，网格不会真正刷新，即使您在读取函数之后立即调用 .refresh() 也是如此。通过定义更改事件，以下内容将使总数变得更加优雅和准确：

@(Html.Kendo().Grid(Model)
  .Name("SearchWindowGrid")
  ...      
 .DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("PopulateSearchWindow", "Item").Data("additionalSearchWindowInfo"))
    .Events(ev => ev.Error("onErrorSearchWindow").Change("OnGridChange"))
  )
)

使用以下脚本：

function refreshData(){
    var grid = $("#SearchWindowGrid").data("kendoGrid");
    grid.dataSource.read();
    grid.refresh();
}

function OnGridChange() {
    var grid = $("#SearchWindowGrid").data("kendoGrid");
    var count = grid.dataSource.total();
    $("#countElement").val(count);
}

【讨论】：

感谢@Shadi，这将是使用来自网格本身的事件的更准确的方式。事实上，我相信在实现这个答案时我最终确实使用了刷新功能，因为我很难刷新数据。

【解决方案3】：

gardarvalur 代码也可以正常工作：

 var gridElements = $("#MyGri").data("kendoGrid").dataSource;
 gridElements.fetch(function ()
 {var total = gridElements.total(); })

【讨论】：