Dropdownlist How to Cascading wrong

[Dave Nixon]

Razor code Change not in code https://ej2.syncfusion.com/16.1.24/aspnet/documentation/drop-down-list/how-to.html?syntax=razor

<div class="padding-top">

    @Html.EJS().DropDownList("country").Placeholder("Select a country").PopupHeight("auto").DataSource((IEnumerable<Country>)ViewBag.country).Fields(new DropDownListFieldSettings { Text = "CountryName", Value = "CountryId" }).Render()

    @*// change="countrychange"*@

</div>
<div class="padding-top">

    @Html.EJS().DropDownList("state").Placeholder("Select a state").Enabled(false).PopupHeight("auto").DataSource((IEnumerable<State>)ViewBag.state).Fields(new DropDownListFieldSettings { Text = "StateName", Value = "StateId" }).Render()

    @*// chaknge="statechange"*@
</div>
<div class="padding-top">

    @Html.EJS().DropDownList("city").Placeholder("Select a city").Enabled(false).PopupHeight("auto").DataSource((IEnumerable<Cities>)ViewBag.cities).Fields(new DropDownListFieldSettings { Text = "CityName", Value = "CityId" }).Render()
</div>
  
<script type="text/javascript">
        function countrychange() {
            // disable the state DropDownList
            var state = document.getElementById('state').ej2_instances[0];
            var city = document.getElementById('city').ej2_instances[0];
            var country = document.getElementById('country').ej2_instances[0];
            state.enabled = true;
            //frame the query based on selected value in country DropDownList.
            var tempQuery = new ej.data.Query().where('CountryId', 'equal', country.value);
            // set the framed query based on selected value in country DropDownList.
            state.query = tempQuery;
            // set null value to state DropDownList text property
            state.text = null;
            //  bind the property changes to state DropDownList
            state.dataBind();
            // set null value to city DropDownList text property
            city.text = null;
            // disable the city DropDownList
            city.enabled = false;
            // bind the property changes to City DropDownList
            city.dataBind();
        }
        function statechange() {
            var city = document.getElementById('city').ej2_instances[0];
            var state = document.getElementById('state').ej2_instances[0];
            city.enabled = true;
            //Query the data source based on state DropDownList selected value
            var tempQuery = new ej.data.Query().where('StateId', 'equal', state.value);
            //set the framed query based on selected value in city DropDownList.
            city.query = tempQuery;
            //clear the existing selection
            city.text = null;
            //bind the property change to city DropDownList
            city.dataBind();

        }
</script>

[Ilakkiya Baskar]

Hi Tom Laudati,   

  

Sorry for the inconvenience.  

  

For taghelper, the change event is correctly mentioned, but for razor it is missed. We will rectify this in our help documents and refresh soon.     

  

As per your requirement, we attached a sample. We bind the Change event in the sample. Please refer to the code block below.  

<div class="padding-top">   

   

        @Html.EJS().DropDownList("country").Placeholder("Select a country").PopupHeight("auto").Width("300px").DataSource((IEnumerable<Country>)ViewBag.country).Fields(new DropDownListFieldSettings { Text = "CountryName", Value = "CountryId" }).Change("countrychange").Render()   

   

           

   

    </div>   

    <div class="padding-top">   

   

        @Html.EJS().DropDownList("state").Placeholder("Select a state").Enabled(false).Width("300px").PopupHeight("auto").DataSource((IEnumerable<State>)ViewBag.state).Fields(new DropDownListFieldSettings { Text = "StateName", Value = "StateId" }).Change("statechange").Render()   

   

           

    </div>   

    <div class="padding-top">   

   

        @Html.EJS().DropDownList("city").Placeholder("Select a city").Enabled(false).Width("300px").PopupHeight("auto").DataSource((IEnumerable<Cities>)ViewBag.cities).Fields(new DropDownListFieldSettings { Text = "CityName", Value = "CityId" }).Render()   

    </div>   

</div>   

                <script type="text/javascript">   

        function countrychange() {   

            // disable the state DropDownList   

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

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

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

            state.enabled = true;   

            //frame the query based on selected value in country DropDownList.   

            var tempQuery = new ej.data.Query().where('CountryId', 'equal', country.value);   

            // set the framed query based on selected value in country DropDownList.   

            state.query = tempQuery;   

            // set null value to state DropDownList text property   

            state.text = null;   

            //  bind the property changes to state DropDownList   

            state.dataBind();   

            // set null value to city DropDownList text property   

            city.text = null;   

            // disable the city DropDownList   

            city.enabled = false;   

            // bind the property changes to City DropDownList   

            city.dataBind();   

        }   

        function statechange() {   

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

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

            city.enabled = true;   

            //Query the data source based on state DropDownList selected value   

            var tempQuery = new ej.data.Query().where('StateId', 'equal', state.value);   

            //set the framed query based on selected value in city DropDownList.   

            city.query = tempQuery;   

            //clear the existing selection   

            city.text = null;   

            //bind the property change to city DropDownList   

            city.dataBind();   

   

        }   

                </script>   

   

               

          

    <style>   

        .control-wrapper {   

            margin: 0 auto;   

               

        }   

        .e-disabled{   

            pointer-events:none;   

        }   

    </style>   

   

   

   

Please refer to the sample in the below location.   

http://www.syncfusion.com/downloads/support/forum/137017/ze/WebApplication3_-_Copy-85511665   

   

Please let us know if there is any concern.   

  

Regards,   

Ilakkiya B