kendoui paging - идентифицирует «последний пейджер» в событии изменения - PullRequest
Новая
       60

kendoui paging - идентифицирует «последний пейджер» в событии изменения

0 голосов
/ 11 января 2020

В настоящее время я использую сетку из Kendo UI версии v2016.2.504 и включил функциональность пейджера.

Когда я нажимаю кнопку «последняя страница», я смотрю, как определить источник или отправителя - это определенно кнопка «последняя страница» при использовании события изменения в источнике данных кендо. Я не вижу никакого видимого пути в событии "e" или свойстве отправителя. Кто-нибудь знает?

kendouipager 

var dataSource = new kendo.data.DataSource({
    data: $scope.datasource,
    pageSize: 15,
    change: function (e) {
        var sender = e.sender; // help
    },
});

1 Ответ

0 голосов
/ 12 января 2020

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

См. Фрагмент демо. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="grid"></div>
<script>
  var isLast = false;
  
  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    dataSource: {
      data: [
        { id: 1, name: "Jane Doe", age: 30 },
        { id: 2, name: "John Doe", age: 35 },
        { id: 3, name: "John Smith", age: 40 }
      ],
      pageSize: 1,
      schema: {
        model: { id: "id" }
      }
    },
    pageable: true,
    page: function(e) {
      console.log("Page change", e.page);
      console.log("isLast", isLast);
      
      if (isLast) {
      // You can do what you want to do here - option 2
      }
      
      isLast = false;
    }
  });
  
  document.getElementsByClassName("k-pager-last")[0].addEventListener("click", (e) => {
    isLast = true;
    
    // You can do what you want to do here - option 1
  });
</script>
</body>
</html>
...