[REACT] Pagination "Page of of undefined"

Post by **jjenks** » Thu Dec 28, 2023 4:13 pm

Sorry, I'm still learning React, Javascript and the Bryntum system so I'm sure this is really a simple problem.

At the bottom of my grid, my PagingToolbar is not working and reads "of undefined".

The following is the code I am using. I have been working from the default template that came installed with the Bryntum Grid when I installed it. I got it all working except the pagination part. My suspicion is that it's not working with the "Ajax Store" - do I need to put something different in for the bbar section?

Thanks
Josh

import './GridTable.scss';

const gridConfig = {
    bbar : {
        type  : 'pagingtoolbar'
    },
    features : {
        cellMenu  : false,
        filterBar : { filter: { property : 'Active', value : 'On' } },
        stripe: true,
        quickFind: true,
        search: true,
    },
    columns : [ // all of our columns are here
    ],

store : {
    // When Grid finds readUrl in the store config it will create an AjaxStore
    readUrl : 'eqlist/output_equipmentlist_json',
    // Load upon creation
    autoLoad : true,
},

};

export { gridConfig };

Post by **marcio** » Thu Dec 28, 2023 5:13 pm

Hey Josh,

We have a working demo here https://bryntum.com/products/grid/examples/paged/.

Could you provide more context about the data that you're using?

In the demo, you'll see a response example that you need to return from your backend. Can you share what is the error message that you're seeing?

You can check our guidelines for better understanding of how to provide more information regarding your case https://www.bryntum.com/forum/viewtopic.php?f=1&t=772

Post by **jjenks** » Thu Dec 28, 2023 5:37 pm

Hello marcio,

I am creating a grid of equipment for a construction company. Everything is displaying fine in that. I am only having issues with the pagination loading. Here is a screenshot of the issue, let me know if it doesn't work.

https://drive.google.com/file/d/1_iRE8C2qbwnfccGLTChW1fvea5pb5oEM/view

Post by **marcio** » Thu Dec 28, 2023 7:11 pm

Hey,

The link that you provided is not working, it's asking for authorization.

Are you able to attach in the post the screenshot that you're sharing?

Post by **Animal** » Fri Dec 29, 2023 8:03 am

https://bryntum.com/products/grid/docs/api/Core/data/AjaxStore#pagination

The store does not know that it has to request data in pages unless you tell it so.

A Store configured with a readUrl will, as you would expect just load itself with the dataset (When you tell it to, or if you configure it with autoLoad)

Post by **jjenks** » Fri Dec 29, 2023 6:00 pm

What is the simplest way to implement pagination without doing changes to the backend? Is setup of a backend required for pagination?

When I added

pageStartParamName : 'page',
pageSize : 50,

I received the error

Data synchronization failed!
http://localhost/eq/eqlist/output_equipmentlist_json?page=-50&pageSize=50
Server response:
A paged store must receive its responseTotalProperty in each data packet

/**
 * Application configuration
 */
import './GridTable.scss';

const gridConfig = {
    bbar : {
        type  : 'pagingtoolbar'
    },
    features : {
        cellMenu  : false,
        filterBar : { filter: { property : 'Active', value : 'On' } },
        stripe: true,
        quickFind: true,
        search: true,
    },
    columns : [
        { text : 'Eq. No', field : 'EquipmentName', flex : 1, editor:false },
        { text : 'Name', field : 'simpleDisplayEquipmentDescription', flex : 1, editor:false },
        { text : 'Serial Number', field : 'SerialNumber', flex : 1, editor:false },
        { text : 'Year', field : 'EquipmentYear', flex : 1, hidden : true, editor:false },
        { text : 'Make', field : 'ManufacturerShortName', flex : 1, hidden : true, editor:false },
        { text : 'Model', field : 'EquipmentModel', flex : 1, hidden : true, editor:false },
        { text : 'Display Note', field : 'DisplayNote', flex : 1, hidden : true, editor:false },
        { text : 'Plate Number', field : 'PlateNumber', flex : 1, hidden : true, editor:false },   

        { text : 'License Number', field : 'LicenseNumber', flex : 1, hidden : true, editor:false },    

        { text : 'Detail Note', field : 'EquipmentDetailNote', flex : 1, hidden : true, editor:false },
        { text : 'Description', field : 'EquipmentDescription', flex : 1, hidden : true, editor:false },
        { text : 'Serial Number', field : 'SerialNumber', flex : 1, hidden : true, editor:false },
        { text : 'VIN', field : 'VinNumber', flex : 1, editor:false },
        { text : 'Equipment Type', field : 'EquipmentTypeShortName', flex : 1, editor:false,
        filterable : {
            filterField : {
                type         : 'combo',
                multiSelect  : true,
                valueField   : 'EquipmentTypeShortName',
                displayField : 'EquipmentTypeShortName'
            }
        } },
        { text : 'Location', field : 'locationFormatted', flex : 1, htmlEncode : false, editor:false,
        filterable : {
            filterField : {
                type         : 'combo',
                multiSelect  : true,
                valueField   : 'locationFormatted',
                displayField : 'locationFormatted'
            }
        },
        renderer({ cellElement, record }) {
            // Add/remove classNames on the row
            cellElement.style.backgroundColor = record.locationColor;
            cellElement.style.color = '#fff';
            return record.locationFormatted;
        } },
        { text : 'Status', field : 'Active', flex : 1, htmlEncode : false, editor:false,
        filterable : {
            filterField : {
              type        : 'combo',
              multiSelect : false,
              items       : ['On', 'Off']
            }
          },
        renderer({ cellElement, value }) {
            if (value == 'On') {
            cellElement.style.backgroundColor = 'rgba(0, 255, 0, 0.3)';
            cellElement.style.color = '#fff';
                return `On`
            }
            if (value == 'Off') {
            cellElement.style.backgroundColor = 'rgba(255, 0, 0, 0.3)';
            cellElement.style.color = '#fff';
                return `Off`
            }
            return value;
        } },
        { text : 'Telematics', field : 'HasTelematics', flex : 1, htmlEncode : false, hidden : true, editor:false,
        filterable : {
            filterField : {
              type        : 'combo',
              multiSelect : false,
              items       : ['Yes', 'No']
            }
          },
        renderer({ cellElement, value }) {
            if (value == 'Yes') {
            cellElement.style.backgroundColor = 'rgba(0, 255, 0, 0.3)';
            cellElement.style.color = '#fff';
                return `Yes`
            }
            if (value == 'No') {
            cellElement.style.backgroundColor = 'rgba(255, 0, 0, 0.3)';
            cellElement.style.color = '#fff';
                return `No`
            }
            return value;
        } },
        { text : 'Link', field : 'EquipmentID', flex : 1, editor:false, htmlEncode : false,
        renderer({ cellElement, value }) {
            cellElement.innerHTML = `<a class="w-100 btn btn-lg btn-primary" style="color:#ffffff;" href="../../equipment/equipmentDetail/${value}">View</a>`
        }
         },
    ],

store : {
    // When Grid finds readUrl in the store config it will create an AjaxStore
    readUrl : 'eqlist/output_equipmentlist_json',
    // Load upon creation
    autoLoad : true,
    pageStartParamName : 'page',
    pageSize : 50,
},

};

export { gridConfig };

Post by **Animal** » Fri Dec 29, 2023 8:39 pm

I think you will have to configure this as false: https://bryntum.com/products/grid/docs/api/Core/data/AjaxStore#config-syncDataOnLoad

We should fix that. If there are pagination settings passed in, we should set that to false.

Post by **Animal** » Fri Dec 29, 2023 8:41 pm

But your JSON packet must return the total dataset size.

The client has to know that so that it knows how many pages it may ask for.

Post by **Animal** » Fri Dec 29, 2023 8:45 pm

See this example: https://bryntum.com/products/grid/examples/php-paged/

You can use the debugger network tab to see the returned JSON format.

Post by **Animal** » Sat Dec 30, 2023 4:39 pm

That link to pagination was a bit sparse. An example of the response JSON is needed. The new version of the docs will look like this:

: Screenshot 2023-12-30 at 15.37.41.png (363.98 KiB) Viewed 8933 times

Support Forum

[REACT] Pagination "Page of of undefined"