Lazy Loading

Sorry, we can't retrieve the data from server. Please comeback later.

Lazy loading (or on-demand loading) is a technique that delays loading non-critical data until it is required. This technique improves performance and reduces form load time. SurveyJS Form Library allows you to lazy-load choices in the Single-Select Dropdown and Multi-Select Tag Box question types. This feature is configured in the same manner for both types. Users can also type in a search string to filter the choice list on the server.

In this example, you can see a Dropdown question that lazy-loads a list of countries. Open the Dropdown and scroll it to the bottom to see how new list items are loaded. Switch between available JavaScript frameworks to view a dedicated demo version for jQuery, React, Angular, Vue.js, or Knockout.

Configure On-Demand Loading

To configure lazy loading, follow the steps below:

  1. Handle the onChoicesLazyLoad event
    This event occurs when a question requests the next portion of choice items. Within the event handler, you need to send a request for the next portion to the server. Refer to the event description for information on the handler's parameters.

  2. Enable a question's choicesLazyLoadEnabled property
    This property specifies that choices for the given question should be loaded on demand.

Preload the Default Value

When you load choices from a server, choice display texts become available only after data is loaded, which does not happen until a user opens the Dropdown or Tag Box. However, a display text for a default choice item is required before that. In this case, you can individually load data for the default item within the onGetChoiceDisplayValue event handler. Refer to the event description for information on the handler's parameters.

In this demo, the onGetChoiceDisplayValue event handler is used to get the display text "France" for the default value "FRA".

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.