Как динамически устанавливать размер страницы в сетке пользовательского интерфейса kendo в asp.net mvc

#jquery #asp.net-mvc #kendo-ui #kendo-grid

#jquery #asp.net-mvc #kendo-ui #kendo-grid

Вопрос:

Я использую сетку пользовательского интерфейса kendo в asp.net приложение mvc. У меня есть требование, что мне нужно привязать значение некоторого целого числа, назначенного в контроллере (ViewBag). Я определил сетку, как показано ниже:

 <div id="clientsDb">
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.ContactName).Width(140);
        columns.Bound(c => c.ContactTitle).Width(190);
        columns.Bound(c => c.CompanyName);
        columns.Bound(c => c.Country).Width(110);
    })
    .HtmlAttributes(new { style = "height: 380px;" })
    .Scrollable()
    .Groupable()
    .Sortable()
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .PageSize((int)ViewBag.ItemsPerPage)
        .ButtonCount(5))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Customers_Read", "Grid"))
    )
)
</div>
  

В контроллере я определил как

 public ActionResult GridDisplay()
{
   ViewBag.ItemsPerPage = 10;
   return View("gridpage");
}
  

если я пытаюсь, как

 @{
   var ItemsPerPage = ViewBag.ItemsPerPage;
}


var ItemsPerPage = '@(ItemsPerPage)'
$("#grid").data("kendoGrid").dataSource().query({ page: 1, pageSize: ItemsPerPage });
  

Он работает, но источник данных вызывается дважды, что снижает производительность.
Я хочу напрямую загружать сетку с динамическим размером.

Ответ №1:

Попробуйте установить размер страницы в источнике данных вашей сетки вместо самой сетки. У меня есть следующее:

 .DataSource(ds=> ds
  .Ajax()
  .PageSize(50)
  .ServerOperation(false)
  .Read(read => read.Action("xx", "xx", new { ID = @Model.ID })
  

Вы должны быть в состоянии заменить .Размер страницы (50) с вашим значением ViewBag

   .PageSize((int)ViewBag.ItemsPerPage)