Lazy Loading in DropDownTree Component

Hello,

I'm trying to build a complexe dropdown tree, but i need the values inside to be lazy loaded, and each parent has to laod it's children only when we click on it.

Is that possible to do using the DropDownTree component ?

Thank you 


1 Reply

SA SureshRajan Alagarsamy Syncfusion Team September 11, 2024 02:17 PM UTC

Hi Assalas,


We have reviewed your query and understand that you want to append child nodes when expanding parent nodes in the Dropdown Tree component. We would like to inform you that the loadOnDemand property is designed for this purpose, allowing child nodes to be rendered on demand as the parent nodes are expanded.


Refer to the below code snippet for further reference.


[App.vue]

 

export default {

    ....

   

    data: function () {

      return {

        fields: {

          dataSource: dataSource.defaultData,

          value: 'id',

          text: 'name',

          child: 'subChild',

        },

        ....

        treeSettings:{loadOnDemand: true}

      };

    },

    ....

}

 



We have attached a sample for your reference.


Sample : https://stackblitz.com/edit/vs6rw4?file=src%2FApp.vue


Regards,
Suresh.


Loader.
Up arrow icon