Way to refresh data source when filtering or expanding tree item?

[James Evangelist]

Hello,

is there any way to load data while filtering or expanding first-level tree items (any event?)? I cannot rebind value to datasource again while it turning back from service (or maybe I can but I don't know how)?

I've got .NET Core 5 WebAPI. There is an endpoint that returns over 4000 items (there are approximately 15 first-level items) which I want to bind to ejs-dropdowntree but every opening of control takes time and hangs out the website for a moment. Our goal: control is rendered with empty datasource. When user starts typing filter value we make request to our endpoint which returns filtered data and bind to datasource.

Thans for help in advance!

[Indhumathy Loganathan]

Hi James, 

 

Greetings from Syncfusion support. 

 

We have validated your requirement in Dropdown Tree component. We have prepared an Angular Dropdown Tree sample with WebApi adaptor. We have treeSettings property for Dropdown Tree component, where you can set loadOnDemand as true, which will initially render the parent tree items in the popup and the child items will be rendered on demand while expanding the corresponding parent node. By default, the loadOnDemand is set to false. Refer to the below code snippet. 

 

[HTML] 

<ejs-dropdowntree id='remote' [fields]='field' popupHeight='200px' placeholder='Select a name' 

    [treeSettings]="treeSettings"> 

</ejs-dropdowntree> 

 

[TS] 

export class AppComponent { 

  // Use data manager to get tree data from remote source 

  public data1 = new DataManager({ 

    url: 'http://localhost:52799/Home/Get', 

    adaptor: new WebApiAdaptor(), 

    crossDomain: true 

  }); 

  public field: Object = { 

    dataSource: this.data1, 

    value: 'id', 

    text: 'name', 

    parentValue: 'pid', 

    hasChildren: 'hasChild' 

  }; 

  public treeSettings = { loadOnDemand: true }; 

} 

 

You can find the sample demonstrating the solution from below link. 

 

Sample: https://stackblitz.com/edit/angular-dropdow-tree?file=app.component.ts 

 

Service Provider: https://www.syncfusion.com/downloads/support/forum/166354/ze/WebApplication_(2)-247472204.zip 

 

Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L