Load DataSource from Javascript

[Alexandre]

Hello,

I am having trouble trying to update a DropdownTree object from a javascript function. My goal is to do it via an Ajax call, but for testing purposes I have hardcoded the data.

This is my DDtree:

<ejs-dropdowntree id="ddtRequisitante" placeholder="Selecione um Requisitante" sortOrder="Ascending" showCheckBox="false" allowMultiSelection="false" allowFiltering="true" filterType="Contains" filterBarPlaceholder="Procurar..." select="select" change="RequisitanteValueChange" ejs-for="@Model.ViagemObj.RequisitanteId">

<e-dropdowntree-fields dataSource="@ViewData["dataRequisitante"]" value="RequisitanteId" text="Requisitante"></e-dropdowntree-fields>

</ejs-dropdowntree>

And this is the JS function:

function RenovaLista() {

RequisitanteList = [

                { RequisitanteId: "1", Requisitante: "José das Couvas" }, { RequisitanteId: "2", Requisitante: "Mauro Carvalho" }, { RequisitanteId: "3", Requisitante: "Auspício dos Santos" }

            ];

 document.getElementById("ddtRequisitante").ej2_instances[0].dataSource= RequisitanteList;

 document.getElementById("ddtRequisitante").ej2_instances[0].refresh();

 }

I got no errors in the Console after running the function. But the control is not updated.

Could you help me with what I am doing wrong?

Regards,

Alexandre 

[Sharon Sanchez Selvaraj]

Hi Alexandre, 

 

Greetings from Syncfusion support. 

 

We have checked with your reported query in Dropdown Tree to update the data source dynamically. We would like to mention that, in the sample provided below we have updated the data with the help of a button click. 

 

Refer to the code snippet: 

 

    document.getElementById('button').addEventListener('click', function RenovaLista() { 

        RequisitanteList = [ 

 

            { nodeId: "1", nodeText: "José das Couvas" }, { nodeId: "2", nodeText: "Mauro Carvalho" }, { nodeId: "3", nodeText: "Auspício dos Santos" } 

 

        ]; 

 

        document.getElementById("ddtRequisitante").ej2_instances[0].fields.dataSource = RequisitanteList; 

    }); 

 

Refer to the sample: 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dropdown_Tree613388134 

 

Refer to the below documentation links to know more about Dropdown Tree component. 

 

Demo: https://ej2.syncfusion.com/aspnetcore/DropDownTree/DefaultFunctionalities#/bootstrap5 

 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/drop-down-tree/getting-started/ 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Sharon Sanchez S.