Lazy load the items of the KendoReact MultiSelectTree component.

Environment

Product Version	6.0.3
Product	Progress® KendoReact MultiSelectTree

Description

How can I lazy load the items of the KendoReact MultiSelect component?

Solution

The below example simulates an API call for the MultiSelectTree component by loading a loadingPanel component to the MultiSelectTree element when an item is expanded. In addition, the loadingPanel is added to the MultiSelectTree element using ReactDOM.createPortal in the LoadingPanel component. Also, the loading state variable is set to true in the onExpandChange event handler and in that case the panel will appear since it is rendered conditionally with the loading variable. Moreover, in the onExpandChange method, set a 1000ms timeout in order to simulate an API call. Inside the setTimeout method, set the new expanded state and loading variable to false:

Change Theme

Theme

Loading ...