[Vuejs]-Pagination in kendo grid in vue js with local data source(client side)

by

0👍

I think you directly bound your data array to the grid, you need to create a DataSource then bind it to the grid.

This is how you can create a DataSource with local data and pagination:

// sample row data
let rows = []
for(let i=0;i<100;i++){
  rows.push({OrderID: i, ShipName: `Name ${i}`});
}


new Vue({
    el: '#vueapp',
    data: function(){
      return {
        //  create data source
        dataSource: new kendo.data.DataSource({
            serverPaging: false,
            pageSize: 5, 
            data: rows
        })
      }
    }
})

Then how you bind it:

<div id="vueapp" class="vue-app">
    <kendo-grid :height="600"
                :data-source="dataSource"
                :pageable='true'>
        <kendo-grid-column :field="'OrderID'"
                           :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'ShipName'"
                           :title="'Ship Name'"
                           :width="240"></kendo-grid-column>
    </kendo-grid>
</div>

0👍

Passing pageable with object rather than true solved the issue.

<template>
  <div>
    <kendo-grid
      :data-source="users"
      :sortable-mode="'single'"
      :pageable="pageable"
    >
      <kendo-grid-column :selectable="true" :width="60"></kendo-grid-column>
      <kendo-grid-column :field="'name'" :title="'Name'" :width="200"></kendo-grid-column>
      <kendo-grid-column :field="'status'" :title="'Status'" :width="100"></kendo-grid-column>
      <kendo-grid-column :field="'role'" :title="'Role'" :width="100"></kendo-grid-column>
      <kendo-grid-column
        :field="'registered'"
        :title="'Registered Date'"
        :sortable="false"
        :format="'{0:MM/dd/yyyy}'"
        :width="120"
      ></kendo-grid-column>
    </kendo-grid>
  </div>
</template>

<script>
import usersData from "./UsersData";
export default {
  mounted() {
    this.users = usersData;
  },
  data: () => {
    return {
      users: null,
      pageable: {
          refresh: true,
          pageSizes: [5, 10, 20, 50, 100],
          buttonCount: 5,
          pageSize: 20
        }
    };
  }
};
</script>

Leave a comment