add item from ajax call

[Nivas]

Team,

   based on selection  in one Dropdown data needs to bind in another drop down. for that have called ajax call and got the data. how to bind the data to drop downlist

Kindly help on this.

  @Html.EJS().DropDownList("Site").PopupHeight("auto").Change("serviceList_change").Width("150px").DataSource((IEnumerable<Object>)@ViewBag.Site).Text(@ViewBag.sSite).Render()

@Html.EJS().DropDownList("Cust").PopupHeight("auto").Width("150px").DataSource((IEnumerable<Object>)@ViewBag.Customer).Text(@ViewBag.sCustomer).Render()

$.ajax({

            type: "POST",

            url: "/Reports/FFUploadSiteselected",

            data: JSON.stringify({ ssite: dropObj.value}),

            contentType: "application/json; charset=utf-8",

            dataType: "json",

            success: function (data) {

                var ddldist = document.getElementById("Cust");

                $.each(data, function (val, text) {

                    alert(text);

                    ddldist.append(text); //how to add data to drop won list

                });

            },

            error: function (response) {

                alert("fa");

               

              //  window.location.reload();

            }

        });

[Nivas]

kindly help me on this

[Christopher Issac Sunder K]

Hi Nivas, 

Thank you for contacting Syncfusion support.  

We have checked your requirement for adding item in dropdownlist. We have provided a public method addItem to add new item in popup list. Please find the code snippet and documentation for your reference, 

@Html.EJS().DropDownList("Site").PopupHeight("auto").Change("serviceList_change").Width("150px").DataSource((IEnumerable<Object>)@ViewBag.data).Text(@ViewBag.sSite).Render() 

 

@Html.EJS().DropDownList("Cust").PopupHeight("auto").Width("150px").DataSource((IEnumerable<Object>)@ViewBag.Customer).Text(@ViewBag.sCustomer).Render() 

 

<script> 

    function serviceList_change(e) { 

        var dropObj = document.getElementById('Site').ej2_instances[0]; 

        var ddldist = document.getElementById('Cust').ej2_instances[0]; 

        $.ajax({ 

            type: "POST", 

            url: "/Home/FFUploadSiteselected", 

            data: JSON.stringify({ ssite: dropObj.value }), 

            contentType: "application/json; charset=utf-8", 

            dataType: "json", 

            success: function (data) { 

                var text = JSON.parse(data.data).results[0].text; 

                ddldist.addItem({ text: text, value: text }); 

            }, 

            error: function (response) { 

                alert("fa"); 

 

                //  window.location.reload(); 

            } 

        }); 

    } 

</script> 

UG: https://ej2.syncfusion.com/aspnetmvc/documentation/drop-down-list/how-to/add-item/?no-cache=1  

For your another query for dynamically bind data into dropdownlist, you can use the datasource property to bind the datasource after calling dataBind() method for immediate change in datasource. Please find the API document for your reference.  

API: https://ej2.syncfusion.com/documentation/api/drop-down-list/#datasource  

Please let us know if you require any further assistance. 

Thanks, 

Christo

[Nivas]

Thanks for the update, but its not working. Always blank.

the below is not working ... 

var text = JSON.parse(data.data).results[0].text; 

                ddldist.addItem({ text: text, value: text }); 

How i need to send the Json output to ajax call from controller...as of now i am send as from controller as below

 return Json(@ViewBag.Customer);

I tried below . it appending but not reflecting ...

 var ddldist = document.getElementById("Cust");

                $.each(data, function (val, text) {

                    alert(text);

                    ddldist.append({ Id: val, customer: text }, val);

                });

                ddldist.refresh();

[Nivas]

 ddldist.refresh(); is not working...how to refresh the drop down list after binding....

[Nivas]

thanks for the link given..now i an able to bind the item with below code. 

the below code append the item. how to remov  the old item from the list, so i can get only the new one.

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

                var dropDownListObject = dropObject.ej2_instances[0];

                $.each(data, function (val, text) {

                //    alert(text);

                    dropDownListObject.addItem({ value: val, Customer: text });

                });

                

[Prince Oliver]

Hi Nivas, 

Thank you for your update. 

In the DropDownList component, we can use the dataSource property to bind the data and then call dataBind() method to reflect the dataSource changes in the control immediately. This will remove the old list items and generate new list items in DropDownList popup based on the dataSource. Kindly refer to the following code snippet. 

 

Client Side 

 

@Html.EJS().DropDownList("Site").PopupHeight("auto").Change("serviceList_change").Width("150px").DataSource((IEnumerable<Object>)@ViewBag.data).Text(@ViewBag.sSite).Render() 

 

 

@Html.EJS().DropDownList("Cust").PopupHeight("auto").Width("150px").DataSource((IEnumerable<Object>)@ViewBag.Customer).Text(@ViewBag.sCustomer).Render() 

 

<script> 

    function serviceList_change(e) { 

        var dropObj = document.getElementById('Site').ej2_instances[0]; 

        var ddldist = document.getElementById('Cust').ej2_instances[0]; 

        $.ajax({ 

            type: "POST", 

            url: "/Home/FFUploadSiteselected", 

            data: JSON.stringify({ ssite: dropObj.value }), 

            contentType: "application/json; charset=utf-8", 

            dataType: "json", 

            success: function (data) { 

                ddldist.dataSource = data; 

                ddldist.dataBind(); 

            }, 

            error: function (response) { 

                alert("fa"); 

            } 

        }); 

    } 

</script> 

 

Server Side 

 

List<string> emp = new List<string>(); 

List<string> cust = new List<string>(); 

public ActionResult Index() 

{   

   emp.Add("Andrew Fuller"); 

   emp.Add("Anne Dodsworth"); 

  emp.Add("Laura Callahan"); 

   emp.Add("Nancy Davolio"); 

   ViewBag.data = emp; 

   ViewBag.sSite = "Laura Callahan"; 

  cust.Add("Robert King"); 

cust.Add("Nancy Devolio"); 

cust.Add("Michael suyama"); 

  ViewBag.Customer = cust; 

  ViewBag.sCustomer = "Nancy Devolio"; 

     return View() 

} 

public object FFUploadSiteselected(string ssite) 

{ 

   cust.Add("Andrew Fuller"); 

   cust.Add("Nancy Devolio"); 

   cust.Add("Laura Callahan"); 

     return Json(cust); 

} 

 

 

Kindly refer to the following link for API documentation: https://ej2.syncfusion.com/documentation/api/drop-down-list/#datasource 

 

In case of the Cascading DropDownList, the value of child DropDownList depends on the value of the parent DropDownList. This can be configured by using the change event of parent DropDownList. in that change event handler, you must set the data to the child DropDownList, based on the selected value of parent DropDownList. 

 

Kindly refer to the following Demo link : https://ej2.syncfusion.com/aspnetmvc/DropDownList/Cascading#/material  

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Prince  

[Nivas]

Working fine. thanks for all your support

[Prince Oliver]

Hi Nivas, 

Most welcome. We are glad to know that the issue is resolved in your end.  

Regards, 

Prince