[Populate dropdown tree with remote data]

[Ciprian-Catalin]

Hello,

I'm trying to populate a dropdown tree with some data from the API, but because the dropdown tree is initialized before the get call is finished, the dropdown tree is always empty. If I hardcode an object in the datasource, the dropdown tree is populated ok. I tried to initialize the control only when the call is finished, but still no luck. Is there a way to assign the datasource to the dropdown tree after a while when the call to API is finished? This is the code:

[Indhumathy Loganathan]

Hi Ciprian,

Greetings from Syncfusion support.

In the Dropdown Tree component, the fields property has been provided to set or get the data source and other data-related information. You can use this property to dynamically change the Dropdown Tree component data source and achieve your requirements in an ajax success event. Check out the below code snippet.

created() {

    var ddTreeObj = (document.getElementById('default') as any)

        .ej2_instances[0];

    $.ajax({

        type: 'GET',

        contentType: 'application/json; charset=utf-8',

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

        dataType: 'json',

        //data: { typId: accntTypId },

        success: function (data) {

         console.log(data);

         ddTreeObj.fields = {

            dataSource: data,

            value: 'id',

            text: 'name',

            parentValue: 'pid',

            hasChildren: 'hasChild',

         };

         ddTreeObj.refresh();

        },

        error: function (xhr, err) {},

    });

}

Sample: https://stackblitz.com/edit/angular-3oexav?file=src%2Fapp.component.ts

Service provider: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication31127928183

Check out the shared sample and get back to us if you need any further assistance.

Regards,

Indhumathy L

[Ciprian-Catalin]

thanks, it worked. The issue I'm facing is that I can't set a value in the dropdown tree. I'm using the dropdown tree in a reactive form and this approach doesn't work. Is there any workaround for setting the data in the dropdown tree?

this.dropdownTree?.setValue(rowData.ddValue);

[Indhumathy Loganathan]

Ciprian, From the explanation, we were quite unclear: Are you trying to update the entire Dropdown Tree datasource using the setValue? Or do you wish to select a single node within the Dropdown Tree using setValue? If possible, share with us the complete code snippet of yours to further validate this issue.

Please get back to us with the required details, which would be helpful in providing a prompt solution.

[Ciprian-Catalin]

I'm trying to select a single node within the dropdown tree using setValue, where rowData.alberoValue is the id of one node from the dropdown tree.

<form [formGroup]="gridModalForm">

<ejs-dropdowntree

          id='dropdowntree'

           cssClass="e-outline e-small"

           placeholder="Albero"

           [fields]="fields"

            (created)="onDropdownTreeCreated($event)"

            floatLabelType="Auto"

           name="alberoModal"

           formControlName="alberoModal">

</ejs-dropdowntree>

</form>

get alberoModal() {

    return this.gridModalForm.get('alberoModal');

}

setFormValue(rowData: any) { this.alberoModal?.setValue(rowData.alberoValue);

}

[Ciprian-Catalin]

Hi guys, any updates on this?

[Prasanth Madhaiyan]

Hi Ciprian,

We have validated your requirement in the Angular Dropdown Tree component by preparing a sample using your shared code snippets. We understand that you want to select a single node within the Dropdown Tree using the form control's setValue method at your end. We have achieved your exact requirement in the button click with the help of the Dropdown Tree component's value property.

Refer to the below code snippets.

[app.component.html]

 

<div class="col-lg-8 control-section dropdowntree-default sb-property-border">

  <div class="content-wrapper" style="height: 350px">

    <div style="margin: 0px auto; width:280px; padding-top: 40px;">

      <form [formGroup]="gridModalForm">

        <ejs-dropdowntree

          #sample

          id="dropdowntree"

          placeholder="Albero"

          [fields]="fields"

          (created)="onDropdownTreeCreated($event)"

          floatLabelType="Auto"

          name="alberoModal"

          formControlName="alberoModal">

        </ejs-dropdowntree>

      </form>

      <button (click)="onClick()">Click to select Africa</button>

    </div>

  </div>

</div>

[app.component.ts]

 

export class AppComponent {

    …

    gridModalForm: FormGroup;

    constructor() {

      this.gridModalForm = new FormGroup({

        alberoModal: new FormControl(),

      });

    }

    get alberoModal() {

      return this.gridModalForm.get('alberoModal');

    }

    setFormValue(rowData: any) {

      this.alberoModal?.setValue(rowData);

    }

    onClick(){

      this.ddTree.value=["1"];

      const selectedNode=this.ddTree.value;

      this.setFormValue(selectedNode);

    }

  }

For your reference, we have attached the sample and service provider.

Sample: https://stackblitz.com/edit/angular-3oexav-5wgmx1?file=src%2Fapp.component.ts

Service provider: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication31127928183

Check out the shared details and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.