Manually trigger loading of remote data

[Unknown]

Hello

I am using ASP.NET CORE EJ 2 version 16.1.0.37 (nuget package).

How can I manually (from javascript) force a DropDownList to reload its data (remote, with UrlAdapter)?

I tried the "dataBind()" or "refresh()" methods, but none of them work.

Let's assume the following scenario:

A dropdownlist with a remote data (UrlAdapter).

When a button is clicked, the data of the dropdownlist should be loaded and the first element should be selected (index 0).

Could you please provide an example to achieve this?

Kind regards

Phil

[Keerthana Rajendran]

Hi Phil,   

   

Thank you for contacting Syncfusion Support.   

   

We suggest you to set selected index as 0 during button click through instance of DropDownList. During button click, data will be loaded with selected index 0 without clicking on DropDownList popup button. Please refer to the below given code.   

   

<div>   

    <ejs-dropdownlist id="customers" query="new ej.data.Query().from('Customers').select(['ContactName', 'CustomerID']).take(6)"placeholder="Select a customer" popupHeight="200px">   

        <e-dropdownlist-fields text="ContactName" value="CustomerID"></e-dropdownlist-fields>   

        <e-datamanager url="http://services.odata.org/V4/Northwind/Northwind.svc/" adaptor="ODataV4Adaptor" crossDomain="true"></e-datamanager>   

    </ejs-dropdownlist>   

    <button id="reload" onclick="onReload()">Reload</button>   

</div>   

<script>   

    function onReload() {   

        var instance = document.getElementById("customers").ej2_instances[0];   

        instance.index = 0;   

    }   

</script>   

   

UG: https://ej2.syncfusion.com/16.1.24/angular/documentation/drop-down-list/api-dropDownListComponent.html#index   

   

Please refer to the below image for request sent during button click.   

   

   

   

Note: If data is already loaded, the request will not be sent again on setting index.   

   

Regards,   

Keerthana.   

 

[Unknown]

Thanks for your reply.

Please note: I do not use Angular, I use plain old es5.

Your approach does not work for me.

When the external event to reload the DDL data occurs, a parameter is added to the query for getting the data of the DDL. Thus it is very likely, that there will be times when the reload will not return any items.

When I use the method you provided, the DDL data is correctly reloaded when it has never been opened.

However, after opening it and reloading the data with your method, the old values are still displayed.

So before reloading the DDL data, the current data has to be removed. The selected item has to be cleared as well.

How can I achieve this?

There is another issue, once the data has been loaded, the first element should automatically be selected. This does unfortunately not work.

My DropDownList:

...

@Html.EJS().DropDownList("myId").ActionBegin("onActionBegin").ActionComplete("onActionComplete").Change("onChange").DataSource(dataManager =>

        {

            dataManager.Url("myUrl");

        }).Fields(fields =>

        {

            fields.Value("id");

            fields.Text("name");

        }).AllowFiltering().Index(0).Render()

...

I set "Index(0)" when defining the DropDownList but there is no text displayed in the DropDownList when the popup appears the value seems selected.

Why is the first element not displayed as the displaytext?

[Ilakkiya Baskar]

Hi Phil,   

    

Thank you for your details.   

    

We analyzed your query.    

Query1: How to change the data dynamically?   

  

We suggest you to update the dataSource and query properties for changing the dataSource which is using remote data in the DropDownList Component. Initially, we provided the workaround for selected the first element of the DropDowList. We achieved this by using Window.onload and ActionComplete method which is an api of the DropDownList component. Here, the index is setting by using instance of the DropDownList Component which is in JavaScript. Please refer to the code block below,   

<script type="text/javascript">   

   

        window.onload = function () {   

            console.log('window - onload');    

            var dropObject = document.getElementById("customers");   

            var dropDownListObject = dropObject.ej2_instances[0];   

            dropDownListObject.index = 0; // set index on initially   

        };   

         

        function onComplete(args) {   

              

            var dropObject = document.getElementById("customers");   

            var dropDownListObject = dropObject.ej2_instances[0];      

           dropDownListObject.index = 0; // set index on every changing the datasource   

        }   

  

 We changed the dataSource in button click handler. Please refer the code block below,   

document.getElementById("btn").onclick = () => {   

              

            var dropObject = document.getElementById("customers");   

            var dropDownListObject = dropObject.ej2_instances[0];   

            dropDownListObject.dataSource = new ej.data.DataManager({   

                url: "http://services.odata.org/V4/Northwind/Northwind.svc/", adaptor: newej.data.ODataV4Adaptor   

            }); // changing datasource   

            dropDownListObject.query = new ej.data.Query().from('Customers').select(['ContactName','CustomerID']).skip(6).take(10);; // changing query   

        };   

  

Please refer to the sample in the below location,   

http://www.syncfusion.com/downloads/support/forum/137545/ze/MutliSelect-314868338   

Please refer to the below link for more information,   

https://ej2.syncfusion.com/aspnet/documentation/drop-down-list/data-binding.html?syntax=tag#binding-remote-data   

  

Query2 : Index property is not working.   

  

We have logged this as a defect and the fix for this issue will be available in our upcoming release volume 2,2018 which is scheduled by the end of May.    

  

Regards   

Ilakkiya B   

[Unknown]

Good to know that the index property issue will be fixed in the upcoming release.

There is still another issue

In my application when loading the data for the DDL an additional parameter is sent along. This works fine, the parameter reaches the server as it should.

When I open the DDL, the correct values are loaded and displayed. When causing the reload before opening the DDL, the correct values are loaded and displayed.

However, after opening the DDL once and causing the reload after that, the new data are not loaded correctly. The old values are still displayed and selected.

Thus I would like to know how to achieve the following:

How to remove all data of a DDL (including the selected value)?

[Ilakkiya Baskar]

Hi Phil,  

 

Thank you for your details. We analyzed your query. We need to know what kind of parameter that you passed in reload method. We have checked with adding parameter to  the query using instance  in reload method. It will load the data and change the selected value even after the DropDownList component opened before reload.  

If you still face any other issue,  

1. Kindly let us know the parameters that you send
2. Kindly send us the code-snippet
3. Kindly send us the dataSource and query details

Please send us any one of the details. So that we can proceed further.  

Please let us know, if there is any concern.    

  

 

Regards,  

Ilakkiya B  

[Unknown]

The parameter I add is a string.

I set it like this in the ActionBegin function of the DropDownList:

var id = "retrieved from some other component";

args.query = new ej.data.Query().addParams('myId', id);

The parameter reaches the server and the list of results can be filtered as needed. The correct results are returned to the DDL.

In order to start the refresh of the DDL I use the following code:

var dddl = document.getElementById("myDDLId").ej2_instances[0];

dddl.value = null;

dddl.text = null;

dddl.index = 0;

dddl.refresh();

For some reason this does now work correctly. The correct values are displayed and the value at index 0 is selected in the DDL. So I guess this issue is solved.

However, there is once again another issue.

Once a value from the DDL has changed, I need to call a method "MyMethod" that has the value of the DDL as a parameter.

For this I use the "Change" event of the DDL. This works as expected when changing the value manually.

When I use the programmatic approach to reload the DDL (as described above) the change event is not called. Thus I can't call "MyMethod" and pass the value of the DDL.

I tried using the "ActionComplete" event of the DDL. Unfortunately this event occurs too early and the value property of the DDL is null.

Is there a way to get the change event of a DDL working if it was reloaded from javascript?

[Prince Oliver]

Hi Phil, 

Thank you for your update. 

We have prevented change event from triggering, when value is set during the initial render. Hence when refresh() is called it does not trigger the change event. So in your scenario, you can manually trigger the change event, when the value is selected using index property on the ActionComplete event. Refer to the following code snippet. 

<script type="text/javascript"> 

 

    window.onload = function () { 

        console.log('window - onload'); 

        var dropObject = document.getElementById("customers"); 

        var dropDownListObject = dropObject.ej2_instances[0]; 

        dropDownListObject.index = 0; 

    }; 

 

    function onComplete(args) { 

 

        var dropObject = document.getElementById("customers"); 

        var dropDownListObject = dropObject.ej2_instances[0]; 

        dropDownListObject.index = 0; 

        if (!ejs.base.isNullOrUndefined(dropDownListObject.listData)) { 

            dropDownListObject.itemData = args.result[dropDownListObject.index]; 

            var event = new Event("change"); 

            dropDownListObject.onChangeEvent(event); 

        } 

    } 

 

    function onchange(args) {  

        console.log("Change triggered"); 

    } 

 

    document.getElementById("btn").onclick = () => { 

 

        var dropObject = document.getElementById("customers"); 

        var dropDownListObject = dropObject.ej2_instances[0]; 

        dropDownListObject.dataSource = new ej.data.DataManager({ 

            url: "http://services.odata.org/V4/Northwind/Northwind.svc/", adaptor: new ej.data.ODataV4Adaptor 

        }); 

        dropDownListObject.query = new ej.data.Query().from('Customers').select(['ContactName', 'CustomerID']).skip(6).take(10); 

 

        dropDownListObject.value = null; 

        dropDownListObject.text = null; 

        dropDownListObject.index = 0; 

        dropDownListObject.refresh(); 

    }; 

 

</script> 

We have attached the updated sample for your reference, kindly refer to the following link: http://www.syncfusion.com/downloads/support/forum/137545/ze/MutliSelect1022689089  

Regards, 

Prince 

[Unknown]

Thanks for your reply.

Your code helped me to find a working solution.

However, when I used your code, the part "dropDownListObject.listData" did not work. "listData" was always undefined in the "onComplete" method. 

When accessing it from the browser's console some time later, it was defined just fine.

Now all the things I wanted to accomplish seem to work. If I find other issues, I will report it here.

Until then this issue can be viewed as solved.

[Ilakkiya Baskar]

Hi Phil,    

    

Thank you for your details.    

    

The listData is undefined when the data is not loaded. When the data is loaded, the change event is triggered by using the instance of the component. At the initial rendering, the data is not loaded. By using this condition, we suggested you to trigger the change event of the DropDownList. Please refer to the code block,   

function onComplete(args) {    

    

        var dropObject = document.getElementById("customers");    

        var dropDownListObject = dropObject.ej2_instances[0];    

        dropDownListObject.index = 0;    

        if (!ejs.base.isNullOrUndefined(dropDownListObject.listData)) {    

            dropDownListObject.itemData = args.result[dropDownListObject.index];    

            var event = new Event("change");    

            dropDownListObject.onChangeEvent(event);    

        }    

    }    

   

   

   

    

Regards,    

Ilakkiya B.    

 

[Unknown]

Thank your for your reply.

I was able to solve my issue.

[Ilakkiya Baskar]

Hi Phil,  

Most welcome. We are glad that your issue is resolved. Please let us know, if you need any further assistance.  

Regards  

Ilakkiya