Premium support for our pure JavaScript UI components


Post by elise.kain »

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!


Post by pmiklashevich »

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

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.

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.


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