Expand nodes in programmatically

[Niels Van Goethem]

Hi, I am using a dropdown tree where I display self referencing data.

I have enable loadOnDemand, as it is quite a lot of records.

I am using this with a formcontrol, and I want the item to be selected in the dropdown tree, when the value is already present in the form control. 

I assume I am unable to use "ensureVisible" when enabling loadOnDemand, so I thought of a workaround, but that would require me to programmatically

[LeoLavanya Dhanaraj]

Hi Niels,

Greetings from Syncfusion support.

Requirement 1 : Expand nodes in programmatically:

Based on the information provided, we understand that you want to programmatically expand the Dropdown Tree node. You can achieve this by using the TreeView expandAll method. Here, we have demonstrated dynamic node expansion through a button click.

[app.component.html]

<button (click)="buttonClick($event)">Dynamic node expand</button>

<ejs-dropdowntree

    id="ddtlist"

    #sample

    [fields]="listfields"

    popupHeight="200px"

    placeholder="Select an item"

    allowMultiSelection="true"

></ejs-dropdowntree>

 

[app.component.ts]

@ViewChild('sample')

public ddTree: DropDownTreeComponent;

public buttonClick() {

    (this.ddTree as any).treeObj.expandAll(['7']);

    (this.ddTree as any).treeObj.dataBind();

}

Requirement 2 : I want the item to be selected in the dropdown tree:

You can preselect the value by mapping the selected field to the data source of the Dropdown Tree component. You can retrieve the displayed form value and set the value in the data source using the selected attribute. Additionally, to enable multiple selected values, you need to enable the allowMultiSelection property and set its value to true.

[app.component.html]

<ejs-dropdowntree

    id="ddtlist"

    #sample

    [fields]="listfields"

    popupHeight="200px"

    placeholder="Select an item"

    allowMultiSelection="true"

></ejs-dropdowntree>

 

[app.component.ts]

public localData: Object[] = [

{ id: 1, name: 'Discover Music', hasChild: true, expanded: true },

{ id: 2, pid: 1, name: 'Hot Singles', selected: true },

{ id: 3, pid: 1, name: 'Rising Artists', selected: true }, …

];

public listfields: Object = {

dataSource: this.localData,

value: 'id',

parentValue: 'pid',

text: 'name',

hasChildren: 'hasChild',

};

Sample :  https://stackblitz.com/edit/angular-yasnvu-aaebbd?file=src%2Fapp.component.ts,src%2Fapp.component.html

Refer the shared details and if we have misunderstood your query, provide additional details about your need as a video footage(tried out sample) so that we can better assist you in finding a solution. Your input will help us understand your issue and offer a timely resolution.

Regards,

Leo Lavanya Dhanaraj

[Niels Van Goethem]

Thank you for your reply. I have an additional question. Will this work with remote data?

And is there an event when a node is expanded?

[Niels Van Goethem]

I have found a workaround. Thank you for your help!