Load data on click

Question

Hello,I have problem with filter when I want to load data on click, like in this example:https://stackblitz.com/edit/angular-nnmfly-iqc3xg?file=app.component.htmlWhen I use (created) than filter works fine, but that's not what I want, because than the data is loaded when the component is created.

Sivakumar ShunmugaSundaram · Accepted Answer

Hi Milos,Greetings from Syncfusion support.We understand that you have to load the Dropdown Tree data
on the click event. As per the request, we have prepared a simple sample of the
Dropdown Tree component with a click event. The data will be changed while the
click event is triggered in the Dropdown Tree component. To load the dynamic
data in the Dropdown Tree, we suggest you set the field values properly.Refer to the below code snippet.

[app.component.ts],
   
  onClick(args) {
      (this.ddTree as any).treeObj.fields = {
        dataSource: this.dataOne,
        value: 'id',
        text: 'name',
        child: 'subChild',
      };
    }

Sample: https://stackblitz.com/edit/angular-hkx9j6?file=app.component.tsCould you please check and confirm whether it comes close to
your requirement?Regards,Sivakumar S

Milos Nisic · Answer

It works!

Indhumathy Loganathan · Answer

Hi Milos,We are glad
that your reported query is resolved. Please get back to us if you need any
further assistance.Regards,Indhumathy
L

Milos Nisic · Answer

I have one problem, reproduced in this example:

https://stackblitz.com/edit/angular-hkx9j6-sgbmze?file=app.component.ts

When I try to filter data, everything is fine until I clear all text from filter field.

After that when I try to filter there is no any data.

Sivakumar ShunmugaSundaram · Answer

Hi Milos,Thanks for the shared details. We have checked the reported issue with a shared sample and
are able to replicate it on our side. The reported issue is occurring because
while clearing the filter, the initial tree data will get rendered. To overcome
the issue, we suggest you add the tree data while clearing the filtering using
the filtering event in
Dropdown Tree.Refer to the below code snippet.

[app.component.ts]
  onFiltering(args) {
      if (args.text == '') {
        args.cancel = true;
        this.fields['dataSource'] = this.dataOne;
        (this.ddTree as any).treeObj.fields = {
          dataSource: this.dataOne,
          value: 'id',
          text: 'name',
          child: 'subChild',
        };
      }
    }

Sample: https://stackblitz.com/edit/angular-hkx9j6-phghzx?file=app.component.ts Please check the attached sample and get back to us if you
need any further assistance.Regards,Sivakumar S