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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

add item from ajax call

Thread ID:

Created:

Updated:

Platform:

Replies:

141683 Dec 27,2018 01:07 PM UTC Jan 2,2019 08:42 AM UTC ASP.NET MVC - EJ 2 8
loading
Tags: DropDownList
Nivas
Asked On December 27, 2018 01:07 PM UTC

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
Replied On December 29, 2018 06:39 AM UTC

kindly help me on this

Christopher Issac Sunder K [Syncfusion]
Replied On 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

Nivas
Replied On 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();

Nivas
Replied On December 31, 2018 10:27 AM UTC

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

Nivas
Replied On 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 });
                });
                

Prince Oliver [Syncfusion]
Replied On 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  


Nivas
Replied On January 2, 2019 08:37 AM UTC

Working fine. thanks for all your support

Prince Oliver [Syncfusion]
Replied On 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 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

;