We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Is there a way to refresh the DropDownList data?

Thread ID:

Created:

Updated:

Platform:

Replies:

131967 Aug 5,2017 10:01 PM UTC Dec 1,2017 09:52 AM UTC JavaScript 7
loading
Tags: ejDropDownList
Paul Kocher
Asked On August 5, 2017 10:01 PM UTC

Hi!

I have a DropDownList and a button next to it which opens a modal. There I use a ListBox where I can add and delete entries.
On the modal there's a button which selects the according entry in the DropDownList.

Everything works except when I add a new entry, the DropDownList isn't updated so it can't find the desired entry.

How can I update the data of the DropDownList?

I tried it like this:

        $('#QualifikationID').ejDropDownList('destroy');

        $("#QualifikationID").ejDropDownList({
            width: '100%',
            dataBound: function (args) {

            },
            selectedIndex: selecteditem_index,
            fields: {
                id: "QualifikationID",
                text: "QualifikationText",
                value: "QualifikationText"
            },
            dataSource: ej.DataManager({
                url: "/DropDown/GetQuali",
                adaptor: new ej.UrlAdaptor()
            })
        });

        $('#QualifikationID').ejDropDownList('selectItemByValue', selecteditem_id)

Unfortunately this doesn't work - the DropDownList won't let me select an item. it stays blank




Prince Oliver [Syncfusion]
Replied On August 7, 2017 09:11 AM UTC

Hi Paul, 

Thank you for contacting Syncfusion support. 

To update the data of the DropDownList, we can make the changes in the dataSource and then rebind the modified dataSource to the control. This will update the DropDownList. Kindly refer to the following code snippet.   

<input id="List" type="text" /> 
<input type="button" value="add" id="btn" /> 
 
<script> 
    $(function () { 
       var dataManager = ej.DataManager({ 
           url: "/Home/getData", 
           adaptor: new ej.UrlAdaptor() 
       }); 
 
       $("#List").ejDropDownList({ 
 
           dataSource: dataManager, 
           fields: { text: "Name", value: "Role" } 
       }); 
       $("#btn").on("click", function () { 
           var obj = $("#List").data("ejDropDownList"); //access control's object 
           data = obj.getListData(); 
           data.push({ 
               Name: "Jack Sparrow", 
               Role: "Captain" 
           }); 
           obj.setModel({ dataSource: data }); // set the modified datasource  
           obj.selectItemByValue("Captain"); //select the value 
       }); 
    }); 
</script> 
  
We have prepared a sample for your reference, kindly refer to the following link for the sample: http://www.syncfusion.com/downloads/support/forum/131967/ze/DropdownMVC1219174405 

Regards, 
Prince 


Paul Kocher
Replied On August 7, 2017 11:50 AM UTC

Hello Prince,

thank you for your reply! While your code works great, I do still run into an issue - the same one actually.

I uploaded a video so you can see what happens. I noticed you used "push" to add the entry to the DropDownList. 

The problem is, I actually add the entry in a different place (a modal with a ListBox) so I can't push the data to the DropDownList as it uses the same datasource.

If I use push, wouldn't it create a duplicate entry with a different ID?

as you can see in the console it generates an ID successfully but I have to refresh the page in order to update the DropDownList field.

$("#okButton").on("click", function () {

        console.log(selecteditem_id);

        var obj = $("#QualifikationID").data("ejDropDownList"); //access control's object 

        data = obj.getListData();

        //data.push({

        //    Name: "Jack Sparrow",

        //    Role: "Captain"

        //});

        obj.setModel({ dataSource: data }); // set the modified datasource  

        data = obj.getListData();

        obj.selectItemByValue(selecteditem_id); //select the value 

    }); 


I tried it like this but it doesn't work....



Prince Oliver [Syncfusion]
Replied On August 8, 2017 06:14 AM UTC

Hi Paul, 

Thank you for your update. 

In your case with shared dataSource with ListBox, you can empty the existing dataSource in the DropDownList and then rebind it. This will refresh the value in the DropDownList. Kindly refer to the following code snippet. 

$("#okButton").on("click", function () { 
 
    var obj = $("#QualifikationID").data("ejDropDownList"); //access control's object  
 
    data = obj.getListData(); // get the modified dataSource from listbox 
 
    obj.setModel({ dataSource: null }); // Empty the existing dataSource  
 
    obj.setModel({ dataSource: data }); // set the modified dataSource   
 
    obj.selectItemByValue(selecteditem_id); //select the value  
 
}); 

Regards, 
Prince 



Paul Kocher
Replied On August 8, 2017 08:39 AM UTC

Hi Prince,

I just tried it with your code - unfortunately the behaviour is the same. I have to refresh the page in order to select the new entry :(


What I tried now is this:


$(document).ready(function () {

        if (localStorage.getItem('selecteditem_id') != null) {

            $('#QualifikationID').ejDropDownList('selectItemByValue', localStorage.getItem('selecteditem_id'));

            localStorage.removeItem('selecteditem_id');

        }

        else {

            localStorage.removeItem('selecteditem_id');

        }

    });


This actually works if i use this line $('#QualifikationID').ejDropDownList('selectItemByValue', localStorage.getItem('selecteditem_id')); after the page is one loading - using it in the function it gives this error: Uncaught ejDropDownList: methods/properties can be accessed only after plugin creation

It would be ok if it'd work like this but I can't fix the above error....


EDIT: Ok, got it working - the only way to fix this was to use a time out on the document.ready function. Not too happy with that but well


Prince Oliver [Syncfusion]
Replied On August 9, 2017 07:03 AM UTC

Hi Paul,   
  
Thank you for your update.   
  
We were unable to replicate your scenario, to reproduce the issue at our end. If you need any further assistance on the issue, please provide us an issue reproducible sample to provide a prompt solution.   
  
Regards,   
Prince 


rituraj Vaishnav
Replied On November 30, 2017 09:29 AM UTC

its no working with it

ajax Post Code

   $(document).ready(function () {
            $("#basicDialog").on("submit", "#form-CreatePatient", function (e) {
                e.preventDefault();
                var form = $(this);
                $.ajax({
                    url: form.attr("action"),
                    method: form.attr("method"),  // post
                    data: form.serialize(),
                    success: function (partialResult) {
                        $("#basicDialog").ejDialog("close");
                        $('#basicDialog').find("#errorMsg").hide();
                        var obj = $("#PatientID").data("ejDropDownList"); //access control's object 
                        data = obj.getListData(); 
                        data.push(partialResult); 
                        obj.setModel({ dataSource: data }); // set the modified datasource  
                        obj.selectItemByValue(partialResult.Text);//select the value  
                    
                        console.log(partialResult.Text);
                        console.log(obj);
                    },
                    error: function (error) {
                        $('#basicDialog').find("#errorMsg").html(error).show();
                    }
                });
            })
        });

//Action Method 
public JsonResult CreatePatient(ResourceFieldsPat Model)
        {
            if (ModelState.IsValid)
            {
                var data = AS.PostPatient(Model);
                if (data.Id != "0")
                {
                    return Json(data, JsonRequestBehavior.AllowGet);
                }
                else
                {
                    return Json(new ResourceFieldsPat(), JsonRequestBehavior.AllowGet);
                }
            }
            else
            {
                return Json(new ResourceFieldsPat(), JsonRequestBehavior.AllowGet);
            }
        }


Attachment: data_e8a7cc1e.zip

Prince Oliver [Syncfusion]
Replied On December 1, 2017 09:52 AM UTC

Hi Rituraj, 

Thank you for contacting Syncfusion forums. 

Perhaps you did not properly push the returned data into the array. Make sure that the “partialResult” array is pushed properly into “data” array. We have attached a test sample that tries to replicate your scenario and we could bind data properly in that sample. Please find the sample from the following location: http://www.syncfusion.com/downloads/support/forum/131967/ze/DDLdataRefresh-911629139 

Kindly refer to the above sample. If the issue persists in your end, maybe you can replicate the issue in the provided sample and send it to us for further investigation. It will help us debug locally and to provide solution. 

Regards, 
Prince 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;