Question

与Kendo ui Paging on grid类似的问题。我有3,000项可以退回Grid的项目。过滤可以将其减少为零。我希望能够将3,000个项目分页到网格中，并且只返回出现在每个页面上的50个项目（对于任何给定的过滤器）。

    <div class="col-md-10">
    <div class="clearfix" name="funddetail" id="funddetail" style="display: inline-block">
        @(Html.Kendo().Grid<InvestmentViewModel>()
                .Name("grid")
                .ToolBar(tools =>
                {
                    tools.Create();
                })
                .HtmlAttributes(new { @class = "k-widget k-grid" })
                .Selectable()
                .Columns(columns =>
                {
                    columns.Bound(c => c.EMSFundId).Hidden(true);
                    columns.Bound(c => c.FundId).Hidden(true);
                    columns.Bound(c => c.ManagerId).Hidden(true);
                    columns.Bound(c => c.Status).Hidden(true);
                    columns.Bound(c => c.ManagerId).Hidden(true);
                    columns.Bound(c => c.ManagerName).Sortable(true).Title("Entity").Filterable(false);
                    columns.Bound(c => c.FundName).Sortable(true);
                    columns.Bound(c => c.AssetClass).Sortable(true);
                    columns.Bound(c => c.Strategy).Sortable(true);
                    columns.Bound(c => c.SubStrategy).Sortable(true);
                    columns.Bound(c => c.OwnerFullName).Sortable(true);
                    columns.Bound(c => c.StatusDescription).Sortable(true).Filterable(f => f.Cell(c => c.Operator("startswith").SuggestionOperator(FilterType.StartsWith)));

                })
                .Resizable(r => r.Columns(true))
                .Scrollable()
                .Sortable(sortable => sortable
                    .AllowUnsort(false)
                    .SortMode(GridSortMode.SingleColumn))
                .Pageable(pageable => pageable
                    .Refresh(true)
                    .PageSizes(new int[] { 50, 100, 500 })
                    .ButtonCount(10))
                .DataSource(dataSource =>
                    dataSource
                    .WebApi()
                    .PageSize(50)
                    .Model(model =>
                    {
                        model.Id(p => p.FundId);
                    })
                    .Events(events => events.Error("error_handler"))
                    .Read(read => read.Action("GetInvestmentsAsync", "Views"))
                )
        )
    </div>

我已经设置了Web API以将Page和PageSize传输到服务。我可以有效地查询数据模型并仅返回Kendo Grid要求的页面（例如，第3页的50行）。这就是我遇到的问题：Kendo Grid仅显示一页包含50个元素的页面。如何告诉网格共有3,000个项目和10个可能的页面？

Answer 1

您的方法应如下所示。请注意，这不是经过测试的代码，但足以让您了解可能会出错的地方。

public ActionResult GetInvestmentsAsync([DataSourceRequest] DataSourceRequest request)
{
  DataSourceRequest fakeRequest = new DataSourceRequest()
          {
              Groups = request.Groups,
              Filters = request.Filters,
              Sorts = request.Sorts
          };

    var investments = // fetch your data here, use a viewmodel to hold data and Total records
    DataSourceResult result;
          try
          {
              result = investments.ToDataSourceResult(fakeRequest);
          }
          catch
          {
              result = dataTable.ToDataSourceResult(new DataSourceRequest());
          }

    result.Total = investments.TotalRecords; // Assign Total here
    return JsonResults(result);
}

用Kendo UI实现服务器端分页的正确方法是什么？

1 个答案: