Load More Data in ListBox
Just like with infinite scrolling, you can load more data into the ListBox on demand, in this case by using a 'Load More Button'. You can place this button at the list bottom and when clicked load a new data into the list.
In this article, you will learn how to load more data on demand into the ListBox, by clicking a button. Sample code is available in JavaScript, Angular, React and Vue.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
As demo shows, a semi-transparent Load More Button is placed at the end of the list. With button click, a new data is added to the list. You can repeat this process until all data is fully loaded into the list, after which this button disappears.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
Load More Data into ListBox using a Button
The ListBox by default don't have an option to place a custom content at the bottom side. However, you can create your own button and place it on top of the list at the bottom using CSS and absolute positioning.
In this case, at first you need to create a semi-transparent container that will become fully visible on mouse over. You can place this element at list end using absolute positioning and with small animation to its opacity using CSS transition. The button is placed inside this container.
The container is not required, if transition is not used. You can just place the button at the bottom side.
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
You can load data on demand in different ways, by loading a JSON file, sending data requests to your server, having data preloaded and only showing small part of it etc. In this example, the list is already preloaded and set in code, but only small part is added to the ListBox. Based on current load number a new data is added to the list, whenever the Load More Button is clicked.
Now you need to handle the button click event, where you can show a custom loading animation during loading process and when complete add more data to the list. During loading animation the button is hidden and replaced by a rotating icon, which shows that something is loading.
You can replace this code with a request to load more data from your server. The code that starts and stops the animations is the same.
Because the loading animation is the same as with infinite scrolling example, you can find more information on how is created in that article. In general, the loading starts as soon as the button is clicked, the data is loaded into the list and then the loading icon disappears. If there is no more data to load, the button also disappears.
Conclusion
One way to load more data into the ListBox component is by using a Load More Button. In this example, this button is created and placed at the list end, which when clicked adds new data into the list. A loading animation accompanies this process, where a spinning icon appears and shows that something is loading. When loading is complete, more data is loaded from custom data source into the list.
A sample code is available in JavaScript, Angular, React and Vue that shows how to load more data on demand with a button click. The ListBox is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.