如何获得剑道网格页面更改选项？答案

【问题标题】：How to get Kendo grid page change options?如何获得剑道网格页面更改选项？
【发布时间】：2016-12-28 17:51:24
【问题描述】：

我已经为我的 web api 设置了 kendo UI 网格（angularJs 版本）。我已经包括服务器端分页。它为每个页面更改请求发送 take、skip、page 和 pageSize 选项。

这里我想在 api 中创建自己的搜索模型，将这些值绑定到 JS 对象，然后将数据发布到服务器。

我想知道是否可以获得与网格相关的事件的值，例如：页面更改、pageSize。

要发送的我的自定义数据字段：`

    public class SearchModel 
{
    ....
    .......
    public int PageNo { get; set; }
    public int PageSize { get; set; }
    public string SortOrder { get; set; }
    public string SortColumn { get; set; }
}

所以需要填充服务器端的这些指定字段。为此，可以在 JS 中使用这些相同的字段创建一个对象，并且应该从网格分页事件中填充值。喜欢 pageNo 和 page Size。

如何使用 Angular js 做到这一点？

【问题讨论】：

标签： angularjs kendo-grid asp.net-core-webapi

【解决方案1】：

通常，您会使用 dataSource.transport.read.data 配置 (http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read.data) 将您的值添加到 kendo 数据源参数，而不是提取数据源参数并添加您的参数。

看看这个例子http://dojo.telerik.com/@Stephen/uXAjU。这是一个修改后的用于远程数据绑定的剑道网格演示。

我只是添加了一个 read.data 配置数据源的传输配置：

transport: {
    read: {
      url: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders",
      data: customData
    }
}

customData 所在的位置（这是您从搜索模型中添加参数的位置）：

function customData() {
    return {
        custom1: 1,
        custom2: "Two",
        custom3: new Date()
    };
}

现在，每当网格查询远程服务时，除了您的自定义 transport.read.data 方法返回的数据之外，它还会传递数据源功能中内置的参数，即分页/过滤/分组参数。查看开发工具网络选项卡，了解 customData 已附加到网格/数据源读取请求。

【讨论】：

@Stephen 你能再次看到更新的问题吗？发送自定义数据不是我的问题，但在使用带有角度 js 的 kendogrid 时填充页码和页面大小是。

【解决方案2】：

看看这个。

var grid = $('#test_grid').data('kendoGrid');
var pager = grid.pager;
pager.bind('change', test_pagechange);

function test_pagechange(e){
   console.log(e);
}

你也可以试试这个

dataBound 事件在页面更改时触发。您可以通过网格数据源的 page() 方法获取当前页面索引。

$("#grid").data("kendoGrid").dataSource.page();

还可以查看文档http://docs.telerik.com/kendo-ui/api/javascript/ui/pager#events-change

【讨论】：