Our blazing fast Grid component built with pure JavaScript


Post by dalia.trujillo »

When adding the pagingtoolbar property I get error this.store.loadPage is not a function. I use Bryntum version 5.0.7

bbar : {
        type : 'pagingtoolbar'
      }

Post by mats »

Please provide full code so we can run and debug.


Post by dalia.trujillo »

const me = this;
    me.grid = new TreeGrid({
      appendTo : 'container',
      height   : 800,
      responsiveLevels : {
        small  : 400,
        medium : 800,
        large  : '*'
      },
      features : {
        filter    : true,
        stripe    : true,
        search : true,
        rowCopyPaste : false,
        cellEdit : false
      },
  
loadMask : 'Loading tree data...', columns: [ { text: 'ID', field : 'id', hidden: true }, { text: this.translate.instant("dolphinFiles.name"), field : 'nombre', width : 205, type : 'tree'} ], tbar : [ { type : 'number', ref : 'fieldPageSize', placeholder : 'Page size', label : 'Page size', tooltip : 'Enter number of records in each page (10 - 100) and press Apply', value : this.pageSize, width : '11em', min : this.minCount, max : this.maxCount, step : 5 }, { type : 'number', ref : 'fieldRowCount', placeholder : 'Total records', label : 'Records', tooltip : 'Enter number of records to generate (10 - 1000) and press Apply', value : this.rowCount, width : '11em', min : this.minCount, max : this.maxCount, step : 10 }, { type : 'button', text : 'Apply', ref : 'buttonApply', icon : 'b-fa-check', tooltip : 'Apply page size and number of records to data loader', onClick() { this.rowCount = me.grid.widgetMap.fieldRowCount.value; this.pageSize = me.grid.store.pageSize = me.grid.widgetMap.fieldPageSize.value; this.currentPage = me.grid.store.currentPage = me.grid.store.currentPage ? Math.min(me.grid.store.currentPage, Math.floor((this.rowCount + this.pageSize - 1) / this.pageSize)) : 1; me.grid.store.loadPage(this.currentPage, { rows : this.rowCount }); } }, ], bbar : { type : 'pagingtoolbar' } }); me.search = me.grid.widgetMap.searchField; me.previousBtn = me.grid.widgetMap.prevBtn; me.nextBtn = me.grid.widgetMap.nextBt; me.grid.store.data = data;

Post by Animal »

So where is the AjaxStore from which it can request the pages?


Post by dalia.trujillo »

Is the use of AjaxStore mandatory? Isn't it possible to do the pagination only from the front without having services to the backend?


Post by Animal »

From the front from where?

Pagination requests pages from somewhere and loads one page at a time into the Store.

You could use https://www.bryntum.com/products/grid/docs/api/Core/helper/AjaxHelper#function-mockUrl-static

Which is what this examples shows: https://bryntum.com/products/grid/examples/paged/


Post Reply