Question

我正在使用asp.net MVC 4应用程序，其中我正在使用telerik MVC Grid（ NOT KENDO GRID ）。

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-client-api-and-events.html

在我的页面（cshtml）我使用公共部分页面的网格。在页面中，我还有其他输入元素（作为网格数据的过滤条件）。用户从输入元素中选择值并单击提交按钮，相应地填充网格中的数据（使用MVC代码中的post requst）。

我在网格中使用分页，用户可以选择页面大小。网格设置

Html.Telerik().Grid(Model)
            .Name("Employees")
            .Columns(cols =>
            {
                cols.Bound(e => e.FirstName).Title("First Name");
                cols.Bound(e => e.LastName).Title("Last Name");
                cols.Bound(e => e.SSN).Title("SSN");
                cols.Bound(e => e.HireDate).Format("{0:MM/dd/yyyy}").Title("Hire Date");
                cols.Bound(e => e.GroupName).Title("Department GROUP");               

            })
                .Groupable()
                .Sortable(x => x.OrderBy(z=>z.GetType()))
                .Pageable(p => p.PageSize(5).Style(GridPagerStyles.PageSizeDropDown | GridPagerStyles.NextPreviousAndNumeric).PageTo((Model.Any()&&!string.IsNullOrWhiteSpace(Model.First().PageNumber)?Convert.ToInt32(Model.First().PageNumber):1)))
                .Filterable()
                .Render();

员工控制器中的POST方法通过接受模型值并查询数据库来返回过滤后的数据。

现在当更改网格的页面大小时，请求被发送到控制器的GET方法而不是发布。

如何在JavaScript中捕获PageSizeChanged之类的网格事件，以便我可以在用户更改页面大小的任何地方手动发布表单？

编辑：我已编写以下代码，以便在用户点击页面尺寸下拉列表中的数字时获取点击事件

 $(document).on('click', 'ul.t-reset > li.t-item', function (e) {

//how to avoid default functionality of server call?
//tried following
//event.unbind();
                //event.preventDefault();
                //alert("Was preventDefault() called: " + event.isDefaultPrevented());
                //event.stopImmediatePropagation()
//return false;


});

Answer 1

MVC网格刚刚变成了Kendo Grid javascript，因此所有的API方法/事件等都可以与MVC Grid一起使用。

查看kendo网格页面更改事件，然后使用它。

http://docs.telerik.com/kendo-ui/api/javascript/ui/pager#events-change

 var grid = $("#Employees").data('kendoGrid');

现在你有了网格，你可以做任何你想做的事情。订阅页面事件更改，如Kendo API文档中的示例;

<div id="pager"></div>

<script>
    function pager_change() {
      console.log("pager change event");
    }

    var dataSource = new kendo.data.DataSource({
      data: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
      ],
      pageSize: 2
    });

    dataSource.read();

    var pager = $("#pager").kendoPager({
      dataSource: dataSource
    }).data("kendoPager");

    pager.bind("change", pager_change);
</script>

我喜欢用MVC设置网格，如果我需要进入其工作并做很多客户端魔术，我会把它当作剑道网格。

如何捕获telerik MVC Grid的PageSizeChanged事件（NOT KENDO GRID）

1 个答案: