Как предотвратить изменение страницы в сетке кендо

Question

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

$(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

Или вы можете использовать сетку page событие

Запускается, когда пользователь собирается изменить текущий индекс страницы источника данных через пользовательский интерфейс пейджера.

Контекст функции обработчика событий (доступный через ключевое слово this) будет установлен на экземпляр виджета.

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

Answer 2

Попробуйте написать 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 3

Наконец-то я получил решение. Событие должно быть «pageChange», а не «change». Так что это правильный код:

pager.bind ('pageChange', onPageChange);

вместо:

pager.bind ('change', onPageChange);