Bryntum Support Forums

Hello,

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).

   <grid
      :columns="columns"
      :rowHeight="50"
      :searchFeature="false"
      :filterBarFeature="true"
      :cellEditFeature="false"
      :contextMenuFeature="contextMenuOptions"
      :groupFeature="false"
      :regionResizeFeature="true"
      :sortFeature="{ multiSort: false }"
      :readOnly="true"
      :store="ajaxStore"
      :bbar="{
        type: 'pagingtoolbar'
      }"
    />

Relative newbie to Bryntum Grid here, so apologies if this has been asked before. Thank you!

Hello,

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.

We will fix our wrapper too.

Best,
Pavel

Thank you Pavel - this works for me!

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.

Good catch, we've now fixed this!