Bryntum grid with paging using vue2

[peachaws]

Dear Team,

We are using the Bryntum grid version 5.6.6. and want to implement the pagination using vue2 using options API. We have installed the library @bryntum/grid-vue.
It is becoming difficult for us to implement the bryntum grid with vue due to limited example access and missing documentation. We have tried implementing the simple grid and it works with vue but dealing with complex examples becomes difficult.
This is not about the pagination but for all the advance examples that we would like to implement.
We would like to have all vanilla JS samples in vue so that implementation becomes easier and more understandable.
This would be a great help if your team can provide. Thanks in advance!

[marcio]

Hey peachaws,

You have all the sources of vanillaJS demos online by clicking on the icon marked in red in the screenshot.

Also, the Vue demo source codes are available by downloading in the customer zone.

[peachaws]

Hey peachaws,

You have all the sources of vanillaJS demos online by clicking on the icon marked in red in the screenshot.

Also, the Vue demo source codes are available by downloading in the customer zone.

Hello Marcio,
Thanks for your reply, I think there is some misunderstanding. We are good with the Vanilla JS examples and demo section. Even though we have downloaded grid 5.6.6 from the customer zone it contains limited examples for VueJS(vue2,vue3). We can see that all the examples are available only for the Vanilla JS but not for VueJS. It would have been easier if the examples were there for VueJS same as Vanilla JS.
It would be a great help if you could help us with the bryntum grid pagination example with VueJS, we have provided the configuration for the grid component but it does not give the pagination information like total records, number of pages, etc. You can refer the attached image for clarity.

pagination issue

btgridpg.png (46.59 KiB) Viewed 594 times

Let us know if we are on the right path or not.

[alex.l]

Hi,

Thanks for the feedback! We are working hard to add more and more demos for all platforms. Most of things about internal logic of components are framework agnostic, pagination is one of such things.
Please share your app and we will help you with the problem, it's hard to know what's wrong without seeing the code. Thanks in advance!

[peachaws]

Hi,

Thanks for the feedback! We are working hard to add more and more demos for all platforms. Most of things about internal logic of components are framework agnostic, pagination is one of such things.
Please share your app and we will help you with the problem, it's hard to know what's wrong without seeing the code. Thanks in advance!

Hi Alex,
Thanks for your reply and sorry for the delayed response. We have tried building the sample for pagination and you can find it attached here. You can If you can guide us on the best approach to implement, it would be a great help. Many thanks!!!

[Animal]

There is not really a difference. A Grid is a Grid is a Grid.

The configuration is the same. Through an object containing properties.

As documented in the Store documentation and as shown in the example code, to enable paging, you have to configure the Grid's store with certain parameters so that it knows how to ask the server for pages, and how big the pages are.

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

[Animal]

You can see how the config properties in the store are used to get the right data from the server when you examine the network requests your app sends:

Screenshot 2024-02-09 at 08.02.07.png (230.9 KiB) Viewed 422 times

[peachaws]

You can see how the config properties in the store are used to get the right data from the server when you examine the network requests your app sends:

Screenshot 2024-02-09 at 08.02.07.png

OK, thanks for your reply. Tell me if I want to use the bryntum grid with vue 2 and have the pagination feature plus all other features provided in the JS examples, would I be able to use them all with only bryntumgrid-vue installed or do I have to install the version for JS as well? We have installed the below versions, you can guide us and let us know which one to use the bryntum grid with its full capabilities?

"@bryntum/grid": "^5.4.0",
"@bryntum/grid-vue": "^5.6.6",
"@bryntum/grid-vue-3": "^5.4.0",
"@bryntum/schedulerpro": "^5.4.1",
"@bryntum/schedulerpro-vue": "^5.4.1",
"@bryntum/schedulerpro-vue-3": "^5.4.1",

Moreover, we noticed that if we use only bryntum-grid with vue then we are unable to use the GridRowModel, AjaxStore, AjaxHelper, CollectionFilter, Store, DomHelper

if we use the above imports with a bryntum grid then it allows us to use them all.
import {} from "@bryntum/grid";

Please suggest!!!!

[alex.l]

Hi,

You can use all features of JS Grid in Grid Vue wrapper, that's just a wrapper for more comfortable use with Vue, that contains same Grid instance inside.

Please use same versions for all packages, we do not support multi-versioning in bounds of single application.

Moreover, we noticed that if we use only bryntum-grid with vue then we are unable to use the GridRowModel, AjaxStore, AjaxHelper, CollectionFilter, Store, DomHelper

What did you mean - not able to use? It would be great to see your test case with instructions how to build and run it, steps to reproduce, actual and expected results described.

[peachaws]

Hi,

You can use all features of JS Grid in Grid Vue wrapper, that's just a wrapper for more comfortable use with Vue, that contains same Grid instance inside.

Please use same versions for all packages, we do not support multi-versioning in bounds of single application.

Moreover, we noticed that if we use only bryntum-grid with vue then we are unable to use the GridRowModel, AjaxStore, AjaxHelper, CollectionFilter, Store, DomHelper

What did you mean - not able to use? It would be great to see your test case with instructions on how to build and run it, steps to reproduce, and the actual and expected results described.

Hi Alex,
We tried implementing the grid with paging and the grid data binds well.
We face the issue in binding the paging toolbar. It does not show the display information like page number, total records, etc... We are sending you the example with paging with vue2 where the initial data bind happens and we have put the delay of 2second which is like an API call. The data is not binding when that delay function calls.

Other scenario: We bind the grid using the component and want to use that component multiple times on our vue page. But when binding the second grid's data the first grid's data vanishes. We tried adding a key to both grid components, but it doesn't work.
Could you please help us with the solution of the above scenarios?

Thanks!