Kendo UI MVC Helper 网格分页答案

【问题标题】：KendoUI MVC Helper Grid PagingKendo UI MVC Helper 网格分页
【发布时间】：2014-03-18 19:17:42
【问题描述】：

我正在使用 Asp.Net KendoUI Grid MVC 帮助程序，但无法使分页正常工作。具体来说，我无法获得要显示的总记录。这是代码：

@(Html.Kendo().Grid(Model.FunctionList.AsEnumerable())
        .Name("Grid")
        .DataSource(dataSource => dataSource
            .Server()
            .Total(50)
            .Model(model => model.Id(f => f.FunctionId))
            .Read(read => read.Action("Index", "Function"))
            .Update(update => update.Action("Edit", "Function"))
            .Destroy(destroy => destroy.Action("Delete", "Function"))
            )

  .Columns(columns =>
  {
      columns.Bound(f => f.FunctionName);
      columns.Bound(f => f.FunctionDescription);
      columns.Command(command => { command.Custom("Edit").Action("Edit", "Function").SendDataKeys(true); command.Destroy(); }).Width(200);

  })
.Scrollable()
.Groupable()
.Sortable()

.Pageable(pageable => pageable
                    .PageSizes(true)
                    .ButtonCount(5))

.Filterable(filterable => filterable
                    .Extra(false)
                    .Operators(ops => ops
                        .ForString(str => str.Clear()
                        .Contains("Contains")
                        .StartsWith("Starts with")
                        .EndsWith("Ends with")
                        .IsEqualTo("Equal to")
                        .IsNotEqualTo("Not Equal To")
                    )))    
    )

注意 .Total(50)。无论选择的页面大小（5、10 或 20）我只得到 1 页，即网格显示“1 到 n 个项目”，其中 n 是页面大小。对于 5 的页面大小和 50 条记录，它应该显示“1 -5 of 50 items”。

生成的javascript（查看源码）显示Total(50)没有效果：

"pageSize":5,"page":1,"total":5,"serverPaging":true

注意 "total":5 应该是 "total":50

【问题讨论】：

标签： asp.net-mvc kendo-grid

【解决方案1】：

http://docs.telerik.com/kendo-ui/tutorials/ASP.NET/Hello%20Kendo%20UI/asp-net-hello-kendo-ui-part-1

这是一个很好的分页教程！

你需要跳过并采取。

如果你的页面大小是 10，而你的页码是 2，那么你基本上想要做这个总和

skip.((page - 1) * pageSize).Take(pageSize)

soo if 将记录 10-20 并显示其中的 10 个！

这可能没有意义，但链接很好！ :)

【讨论】：

【解决方案2】：

将kendogrid的serverPaging设置为false：

serverPaging: false,

【讨论】：

【解决方案3】：

我正在发布在我的应用程序上运行良好的整个网格。但我看了你的代码，你的数据源属性有问题，你缺少 .Ajax() 和 .ServerOperation(false)（加了这两个后我做了分页），和我的对比一下，你就会发现真正的原因

    Html.Kendo().Grid(Model.asdry).Name("abc").Columns(c =>
     {
c.Bound(p => p.datetimecalculated).Format("{0:dd-MM-yyyy}");
         c.Bound("").ClientTemplate("#= purchaseCriteria(data) #").Title("Sold/Bought");
         c.Bound(p => p.numcontracts);
         c.Bound(p => p.entityid);
         c.Bound(p => p.leagueid);
         c.Bound("")
             .ClientTemplate("#= setSeasonYear(data) #")
             .Sortable(false)
             .Title("Year");

         c.Bound("")
             .ClientTemplate("#= setSeason(data) #")
             .Sortable(false)
             .Title("Season");
         c.Bound(p => p.contractmeasurable);
         c.Bound(p => p.price).ClientTemplate("#= moneyformat_at(price) #");
         c.Bound(p => p.profitorloss).ClientTemplate("#= moneyFormat(profitorloss) #");

     }).DataSource(
    d => d
        .Ajax()
        .ServerOperation(false)

    )
    .Pageable()
    .Sortable()
    .Resizable(resizing => resizing.Columns(true))
            )

更新使用这些的原因如下 .Ajax() // 指定使用ajax绑定 .ServerOperation(false) // 分页、排序、过滤和分组将在客户端完成

【讨论】：