Lazy Loading

Lazy loading (also "on-demand loading" and "pagination") 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 paginate choices in Single- and Multi-Select Dropdown questions. This feature is configured in the same manner for both types. In this example the first Dropdown lazy-loads the entire list of countries, while the other two are cascading Dropdowns: you first select a region, and then lazy-load only the countries within that region. You can also type in a search string to filter the country list on the server. Switch between available JavaScript frameworks to view a dedicated demo version for jQuery, React, Angular, Vue.js, or Vanilla JavaScript.

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.

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".

In cascading dropdowns, the options of a dependent dropdown are determined by the selected value in a parent dropdown. When implementing lazy loading in this scenario, pay attention to the following details:

• In the onChoicesLazyLoad event handler, you need to include the parent dropdown's value in the query string of your API request, along with the skip, take, and filter parameters.

• Use the resetValueIf expression to automatically clear the dependent dropdown's value when the parent dropdown changes. In the following code, region is the name of the parent dropdown:

  "resetValueIf": "{region} empty || {region} notempty"
  

The rest of the setup is the same as for a regular lazy-loaded dropdown.

Lazy Loading for Long Forms