如何防止 kendo 网格中的页面更改

Question

我正在尝试验证 kendo 网格列中的空输入。我想在您转到其他页面之前验证当前页面。我的问题是当输入为空时我无法阻止页面更改。

$(function () {       
    bindPaging();        
});


function bindPaging() {
  var grid = $('#paramsGrid').data('kendoGrid');
  var pager = grid.pager;
  pager.bind('change', onPageChange);
}


function onPageChange(e) {
    var empty = $("#paramsGrid").find("input").filter(function () {
        return this.value === "" || this.value === "null";
    });
    if (empty && empty.length) {
        for (var i = 0; i < empty.length; i++) {
            $("#" + empty[i].id).addClass("input-validation-error");
        }
        e.preventDefault();        
    }   

}

"e.preventDefault" 不工作。

Answer 1

尝试将e.preventDefault();写成函数的第一行。

function onPageChange(e) {
    e.preventDefault(); // Pull this line as a first line of code in the function.
    var empty = $("#paramsGrid").find("input").filter(function () {
        return this.value === "" || this.value === "null";
    });
    if (empty && empty.length) {
        for (var i = 0; i < empty.length; i++) {
            $("#" + empty[i].id).addClass("input-validation-error");
        }        
    }   

}

Answer 2

终于找到解决办法了。事件必须是 "pageChange" 而不是 "change"。所以这是正确的代码：

pager.bind('pageChange', onPageChange);

而不是：

pager.bind('change', onPageChange);

Answer 3

或者您可以使用网格的 page 事件

Fired when the user is about change the current page index of DataSource via the pager UI.

The event handler function context (available via the this keyword) will be set to the widget instance.

function bindPaging() {
  var grid = $('#paramsGrid').data('kendoGrid');
  grid.bind('page', onPageChange);
}

如何防止 kendo 网格中的页面更改

How to prevent page changing in kendo grid

javascript

asp.net-mvc

grid

jquery

kendo-ui