Как правильно реализовать пейджинг на стороне сервера с помощью Kendo UI? - PullRequest
Новая
       41

Как правильно реализовать пейджинг на стороне сервера с помощью Kendo UI?

0 голосов
/ 26 июня 2018

Подобный вопрос к Kendo ui Пейджинг на сетке . У меня есть 3000 предметов, которые можно вернуть в сетку. Фильтрация может уменьшить это до нуля. Я хочу иметь возможность разместить 3000 элементов в сетке и вернуть только, скажем, 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>

Я настроил веб-API для передачи Page и размера страницы в службу. Я могу эффективно запросить модель данных и вернуть только ту страницу, которую запрашивает сетка кендо (например, 50 строк на странице 3). Вот где я застрял: сетка кендо показывает только одну страницу из 50 элементов. Как мне сказать, что в сетке всего 3000 элементов и 10 возможных страниц?

1 Ответ

0 голосов
/ 27 июня 2018

Ваш метод должен выглядеть примерно так. Обратите внимание, что это не проверенный код, но достаточно, чтобы дать вам представление о том, где вы можете ошибиться. 

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