Control calls API infinitely

[Kabe]

Hi there - I'm working with the dropdown tree control. For some reason it is hitting my api over and over non stop. I've spent the afternoon looking for documentation and examples but just have not been able to zero in on the issue.

I made a stackblitz that demonstrates the problem. You won't be able to test my API (since it is local) but you can see in the screenshot the result of what happens.

https://stackblitz.com/edit/angular-myjpgb-ox3ieu?file=app.component.ts

The data:

The test data is simply:

[{"id":1,"name":"Australia","hasChild":true,"expanded":true},{"id":2,"pid":1,"name":"New South Wales"}]

You may also try and use this free API I set up (see link below). It provides the same test data but it's only good for 50 requests per day and then it stops working.

https://kabee.free.beeceptor.com/todos

Bug?

[SureshRajan Alagarsamy]

Hi Kabe,

We have reviewed your query and understand that the data is getting duplicated while using the "WebApi" adaptor to load the data in the DropdownTree component. We have identified that the child data is duplicated when the data is initially rendered in the DropdownTree component, and we consider this as a bug on our end.

The fix for this issue will be included in our weekly patch release scheduled for August 08, 2023.

Feedback : https://www.syncfusion.com/feedback/45547/duplicate-child-data-issue-with-expanded-field-in-dropdowntree-component-using

Disclaimer : Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

Regards,

Suresh.

[Kabe]

Ok - I'm glad you can see the same issue. 

Thanks for working it into the patch - the sooner the better as it is quite urgent for me.

[SureshRajan Alagarsamy]

Hi Kelsy,

Upon further validation, to address the reported issue, we need to set the "loadOnDemand" property as true. Enabling this property will render only the parent tree items in the popup, and the child items will be rendered on demand when expanding the corresponding parent node. By using this property, the API won't be continuously triggered, thus avoiding the creation of duplicate child data in the DropdownTree component.

[app.component.ts]

 

export class AppComponent {

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

    public data: Object = new DataManager({

        url: https://localhost:7015/Home/Get,

        adaptor: new WebApiAdaptor,

        crossDomain: true,

    });

    public treeSettings: Object = {loadOnDemand: true}

 

    public field: Object = {

        dataSource: this.data,

        value: 'id',

        text: 'name',

        parentValue: 'pid',

        hasChildren: 'hasChild',

        expanded: 'expanded'

    }

}

 

[app.component.html]

 

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

    </ejs-dropdowntree>

 

We have attached a Sample and Controller sample for your reference.

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

Controller sample : Attached as zip folder.

We strongly recommend you to check out the datasource declaration in the Controller sample.

Regards,
Suresh.

Attachment: WebApplication1_(2)_9015d3fa.zip