[REACT] How to add infinite scroll or pagination in grid

[gorakh.nath]

Hi team,
How can we do infinite scroll or pagination on the grid? Is this supported?
Example of grid https://bryntum.com/examples/scheduler-pro/drag-from-grid/

[mats]

By infinite scroll, you mean loading as you scroll? We have a ticket open for this: https://github.com/bryntum/support/issues/1804

Here's how you implement paging:

https://bryntum.com/examples/grid/paged/

(Please note, if you are using the Grid you also need a license for it)

[gorakh.nath]

@mats Can I use this reactjs application?Please provide reactjs example if possible.

[saki]

We do not have a React demo with paging but it is very simple to create it yourself. Take the React basic example and configure it the same way as vanilla paged example.

[gorakh.nath]

Hi @saki I configured it works if only I am adding tbar

 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: pageSize,
          width: '11em',
          min: minCount,
          max: 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: rowCount,
          width: '11em',
          min: minCount,
          max: 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 () {
            console.log('sdsd');
          }
        }
      ],

But Once I am adding bbar config it throwing error:-

 bbar : {
        type  : 'pagingtoolbar',
        items : {
            // Uncomment this to add an extra button
            // click : {
            //     type    : 'button',
            //     text    : 'Click me',
            //     onClick : () => console.log('Clicked button'),
            //     weight  : 1000 // append to the end of default items
            // }
        }
    }

Error that I am getting after adding bbr is TypeError: me.L(...) is not a function. I attached the screen-shot of error. Please guide me the reason of failing.

[mats]

What version are you using?

[gorakh.nath]

Version are:-

"@bryntum/schedulerpro": "4.2.3",
"@bryntum/schedulerpro-react": "4.2.3",

The grid I am using from here:-

import { Grid } from '@bryntum/schedulerpro/schedulerpro.umd';

[mats]

Could you please try using 4.3.0, does that fix it?

[gorakh.nath]

Hi , after updating the version to 4.3.0 again I am getting error TypeError: me.L(...) is not a function. I attached the screenshot of error for reference.

[saki]

I have modified our React Scheduler Drag from Grid demo adding the paging toolbar to the unplanned grid and it worked. I'm attaching the code so that you can use it as the starting point.

Note: Loading next page does not work in this demo as we do not have the appropriate backend.