1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. add item from ajax call

add item from ajax call

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();
            }
        });

8 Replies
NI Nivas December 29, 2018 06:39 AM UTC

kindly help me on this

CI Christopher Issac Sunder K Syncfusion Team December 31, 2018 09:08 AM UTC

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> 


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.  


Please let us know if you require any further assistance. 

Thanks, 
Christo

NI Nivas December 31, 2018 10:14 AM UTC

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();

NI Nivas December 31, 2018 10:27 AM UTC

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

NI Nivas December 31, 2018 11:14 AM UTC

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 });
                });
                

PO Prince Oliver Syncfusion Team January 2, 2019 07:14 AM UTC

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. 
 
 
Please let us know if you need any further assistance on this. 
 
Regards, 
Prince  


NI Nivas January 2, 2019 08:37 AM UTC

Working fine. thanks for all your support

PO Prince Oliver Syncfusion Team January 2, 2019 08:42 AM UTC

Hi Nivas, 

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

Regards, 
Prince 


Loader.
Up arrow icon