Premium support for our pure JavaScript UI components

Post by elise.kain »


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

      :sortFeature="{ multiSort: false }"
        type: 'pagingtoolbar'

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

Post by pmiklashevich »


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:

    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.


Pavel Miklashevich - Core Developer

Post by elise.kain »

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.

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.

Post by mats »

Good catch, we've now fixed this!

Tired of debugging javascript errors in web applications? Try our powerful error logging service RootCause

Post Reply