Pagination support

[elkhawajah]

If I want to add support for "Load more" feature, so each board at bottom it will have a button to load more or it will auto load more when hitting footer, how do we do it ?

[marcosrocha85]

Hello @elkhawajah. I hope you're doing well. Actually you will have to detect if scroll at every column is reached bottom and if so, load more. I think that way is more "user friendly" solution. I made an integration with jKanban and Vue.js in the past but I don't developed some "Load more" feature like you wanted. Please let me know if you could achieve that or if you need any help with your solution. I'll be happy to see the final result.

[WriterStat]

'If I want to add support for "Load more" feature, so each board at bottom it will have a button to load more or it will auto load more when hitting footer, how do we do it ?'

• If it was me...I'd add CSS -> overflow-y: auto; to .kanban-drag div to get a div scroll (for current or extra items).
• I'd set the .kanban-drag height or use Flex to set all .kanban-drag heights.
• I'd load the items in just as I always have.
• After the above is done, I'd call/add a function to roll through the kanban boards js dom, grab the board id, and add a one line js dom code into this function to add a more button to the bottom of the items in .kanban-drag - that calls an ajax server call function with that board's id to get more items and load them to the bottom of that board's .kanban-drag above the current more button using the board id.

Will leave it up to you as an exercise to do.

But instead why not just do some of the above... simply add a scroll bar using the CSS, set the .kanban-drag height, and a loading icon, then load all the items and keep it simple? Let the scrolling do its job.

Best, -C

[marcosrocha85]

'If I want to add support for "Load more" feature, so each board at bottom it will have a button to load more or it will auto load more when hitting footer, how do we do it ?'

* If it was me...I'd add CSS -> overflow-y: auto; to .kanban-drag div to get a div scroll (for current or extra items).

* I'd set the .kanban-drag height or use Flex to set all .kanban-drag heights.

* I'd load the items in just as I always have.

* After the above is done, I'd call/add a function to roll through the kanban boards js dom, grab the board id, and add a one line js dom code into this function to add a more button to the bottom of the items in .kanban-drag - that calls an ajax server call function with that board's id to get more items and load them to the bottom of that board's .kanban-drag above the current more button using the board id.

Will leave it up to you as an exercise to do.

But instead why not just do some of the above... simply add a scroll bar using the CSS, set the .kanban-drag height, and a loading icon, then load all the items and keep it simple? Let the scrolling do its job.

Best, -C

If @elkhawajah wanted to do a "lazy load" for more items, I think it would be better to detect if column scroll reached the end and load more x items needed. That's a good feature though. But it's beyond the vanilla jKanban.

[WriterStat]

Detecting at end isn't very hard, you just do that for the .kanban-drag div instead of inserting a button in item four in my list. But you have to be careful not to overgenerate/queue up ajax request server calls filling multiple boards during drag and drop between boards, during drag scroll situations, and when having lots of user indication automated requests. On slower internet or internet with lots of users and on smaller servers this could generate some waiting/frustration.

With that said, it can be done, you'll just want to weigh whether it should be done for your app. Some apps may need it, some not.