Having trouble getting help?
Contact Support
Contact Support
Customize pager drop down in Vue Grid component
11 Jun 20243 minutes to read
To customize default values of pager dropdown, you need to define pageSizes
as array of strings.
<template>
<div id="app">
<ejs-grid :dataSource='data' :allowPaging='true' :pageSettings='pageSettings' height='280px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' :isPrimaryKey='true' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='Freight' headerText='Freight' textAlign='Center' format='C2' width=80></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width=120></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, Page } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const pageSettings = { pageSizes: ['5', '10', 'All'] };
provide('grid', [Page]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
<template>
<div id="app">
<ejs-grid :dataSource='data' :allowPaging='true' :pageSettings='pageSettings' height='280px' >
<e-columns>
<e-column field='OrderID' headerText='Order ID' :isPrimaryKey='true' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='Freight' headerText='Freight' textAlign='Center' format='C2' width=80></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width=120></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective,Toolbar, Page } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data: () => {
return {
data: data,
pageSettings: {pageSizes: ['5','10','All']}
};
},
provide: {
grid: [Page]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>