Trying to implement paging in a Syncfusion Grid within a class component of a Vue 2 project using TypeScript. I have added the GridPlugin using "Vue.use" in main.ts.
My understanding is that I need to:
- Import the Page class from ej2-vue-grids
- Create a service named grid with the Page class in an array
- Set allowPaging="true" and provide pageSettings
The pageSettings seem to be working as expected since leaving it out displays all rows.
Below is the simplified code snippet:
<template>
<ejs-grid
:data-source="data"
:allow-paging="true"
:page-settings="pageSettings"
>
</ejs-grid>
</template>
<script lang="ts">
import { Component, Provide, Vue } from "vue-property-decorator";
import { Page } from "@syncfusion/ej2-vue-grids";
@Component
export default class Organizations extends Vue {
@Provide("grid") private grid = [Page];
data = [
{ ID: 1, Name: "Widget 1" },
{ ID: 2, Name: "Widget 2" },
{ ID: 3, Name: "Widget 3" },
{ ID: 4, Name: "Widget 4" },
{ ID: 5, Name: "Widget 5" },
{ ID: 6, Name: "Widget 6" },
{ ID: 7, Name: "Widget 7" },
{ ID: 8, Name: "Widget 8" },
{ ID: 9, Name: "Widget 9" },
{ ID: 10, Name: "Widget 10" },
];
pageSettings = { pageSize: 5 };
}
</script>