kendoui paging - identify "last pager" click in change event

912 Views Asked by kenny At 10 January 2020 at 21:15

I'm currently using the grid from Kendo UI version v2016.2.504 and have incorporated the pager functionality.

When clicking the "last page" button I'm looking to see how I can identify the source or sender is definitely the "last page" button when using change event in kendo's datasource. I don't see any discernible way in the "e" event or sender property. Does anyone know?

kendouipager

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

Original Q&A

There are 1 best solutions below

Shai On 12 January 2020 at 12:57

You can add an event listener to the button and then either do the what you want to do in the callback or raise a flag and handle it in the page event handler.

See the snippet for a demo.

<!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>

kendoui paging - identify "last pager" click in change event

There are 1 best solutions below

Related Questions in KENDO-UI

Related Questions in KENDO-GRID

Related Questions in KENDO-UI-GRID

Trending Questions

Popular # Hahtags

Popular Questions