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

Set second dropdownlist's datasource using ajax

Thread ID:

Created:

Updated:

Platform:

Replies:

141379 Dec 8,2018 08:09 AM UTC Dec 17,2018 06:07 AM UTC ASP.NET Core - EJ 2 3
loading
Tags: Dropdown List
Sheharyar
Asked On December 8, 2018 08:09 AM UTC

Hi,

I recently started to use your awesome controls and I am starting to get a hang of it but there is an issue i can't seen to resolve.
I have two dropdownlists, one of countries and the other of cities and what I want is that when i change an item on country dropdownlist ...the datasource of cities dropdownlist should be updated .
I am doing this using ajax but it still seems to show no records.
 
View:

@{
    ViewData["Title"] = "Index";
}
@using WeatherApp.Controllers
<h2>Index</h2>

<div class="control-wrapper">
    <div id="default" style='padding-top:75px;'>
        <ejs-dropdownlist id="Countries" dataSource="@ViewBag.Countries" change="onChange" placeholder="Select a Country" popupHeight="220px">
            <e-dropdownlist-fields text="Name" value="Code"></e-dropdownlist-fields>
        </ejs-dropdownlist>
    </div>
</div>
<div class="control-wrapper">
    <div id="default" style='padding-top:75px;'>
        <ejs-dropdownlist id="Cities" placeholder="Select a City" popupHeight="220px">
            <e-dropdownlist-fields text="name" value="id"></e-dropdownlist-fields>
        </ejs-dropdownlist>
    </div>
</div>
<p id='event'> </p>
<script>
    function onChange(args) {
        $.ajax({
            type: "GET",
            url: '@Url.Action("CountrySelected")',
            data: { code: args.value },
            contentType: "application/json;charset=utf-8",
            dataType:"json",
            success: function (result) {
                debugger;

                var cityDropDown = document.getElementById("Cities").ej2_instances[0]; 
                cityDropDown.datasource = result;
                cityDropDown.refresh();
                alert(result);
            },
            error: function () {
                alert("Error while loading data");
            }
        });
    }
</script>

Controller:

public class WeatherController : Controller
    {
        private string m_stWebRoot;

        public WeatherController(IHostingEnvironment env)
        {
            m_stWebRoot = env.WebRootPath;
        }


        public IActionResult Index()
        {
            string stCountries = System.IO.File.ReadAllText(m_stWebRoot + "\\CustomStaticFiles\\country.list.json");
            List<Country> lstCountries = JsonConvert.DeserializeObject<List<Country>>(stCountries);
            ViewBag.Countries = lstCountries.OrderBy(o => o.Name).ToList();
            
            return View();
        }


        public ActionResult CountrySelected(string code)
        {
            string stCities = System.IO.File.ReadAllText(m_stWebRoot + "\\CustomStaticFiles\\city.list.json");
            List<City> allCities = JsonConvert.DeserializeObject<List<City>>(stCities);
            allCities = allCities.Where(c => c.CountryCode == code).OrderBy(o => o.Name).ToList();
            return Json(allCities);
        }

        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }
    }

Will appreciate your help in this, Thanks.

Prince Oliver [Syncfusion]
Replied On December 10, 2018 07:32 AM UTC

Hi Sheharyar, 
 
Thank you for contacting Syncfusion Support. 
 
We have prepared a sample based on the shared code and found that the casing for dataSource property is wrong in your code. We suggest you modify the code as shown below so that cascading through AJAX will work fine.  
 
<script> 
    function onChange(args) { 
        $.ajax({ 
            type: "GET", 
            url: '@Url.Action("CountrySelected")', 
            data: { code: args.value }, 
            contentType: "application/json;charset=utf-8", 
            dataType:"json", 
            success: function (result) { 
                debugger; 
 
                var cityDropDown = document.getElementById("Cities").ej2_instances[0]; 
                cityDropDown.dataSource = result; 
                //cityDropDown.refresh(); 
                cityDropDown.dataBind(); 
                alert(result);                 
            }, 
            error: function () { 
                alert("Error while loading data"); 
            } 
        }); 
    } 
</script> 
 
Also, you can invoke dataBind() method to apply pending property changes immediately. Please refer to the below UG 
 
 
We have prepared a sample with your code which can be downloaded from the below link 
 
 
Regards, 
Prince 


Sheharyar
Replied On December 15, 2018 06:50 PM UTC

That seems to solve my issue.
Thank you so much.

Prince Oliver [Syncfusion]
Replied On December 17, 2018 06:07 AM UTC

Hi Sheharyar, 

Most Welcome. We are glad 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

Live Chat Icon For mobile
Live Chat Icon