Can you please help me understand how to enable the pagination toolbar on a Vue grid with an AjaxStore? I have the AjaxStore working okay (sorting/filtering/making additional requests).
I saw in the documentation for migrating to 4.0.0 that Grid now extends Panel, and so bbar and tbar should be able to be embedded in the grid itself.
:bbar="{type: 'pagingtoolbar'}", bbar="{type: 'pagingtoolbar'}", and :bbarFeature="{type: 'pagingtoolbar'}"are all failing to display a pagination toolbar (in case it was a feature config and I misunderstood to documentation).
We haven't updated the wrapper after we made Grid to extend Panel. Please modify Grid/examples/vue/javascript/_shared/src/Grid.vue and add tbar and bbar configs:
<script>
import { Grid } from 'bryntum-grid';
// Defines a Vue component that wraps Bryntum Grid
export default {
name : 'grid',
props : {
// Configs
....
tbar : { type : [ Object, Array ], default : undefined },
bbar : { type : [ Object, Array ], default : undefined },
Then rebuild the wrapper and you can use the bbar the way you defined in your code snippet.
One other thing I noticed while implementing the AjaxStore is that the pageSize property in the AjaxStoreConfig in grid.d.ts says it is a string. When I pass the pageSize in as a string, it calculates my number of pages incorrectly in the paging toolbar (it says there are 240 when there are only 3).
If I pass the pageSize in as a number, the calculations complete correctly, but I get a typescript error because I am passing in the wrong type. Example error below.
ERROR
100:7 Type 'number' is not assignable to type 'string'.
98 | pageParamName: "page",
99 | pageSizeParamName: "pageSize",
100 | pageSize: this.pageSize,
| ^
101 | sortParamName: "sortBy",
102 | filterParamName: "filter",
103 | responseTotalProperty: "totalItems"
Version: typescript 3.9.7
Time: 22422ms
This is not blocking me, so no additional help is needed. Just wanted to pass it on. Thanks again.