[Solved] Stranger Behavior in Cascading three DropDownList

[Jatin]

Hi All,
I have just started using telerik mvc extensions and I noticed a strange behavior when I tried to cascade three DropDownList. Basically I have a DropDownLists for "State", "City" and "Locality". The change in State should cascade to City and Locality DropDownLists. For example when I select California as state, I should get list of all cities in California in the City DropDownList and Locality DropDownList should be updated to list all Localities for first City in California.
With the code that I have built up, the City DropDownList is getting properly updated when the State dropdown changes, but the Locality DropDownList still displays the old values. It gets updated to display new values only after I click on the Locality list to select a value. 
Here is the code that I am using. Why does the LocalityDropDown list require a click to render new values ?

<!-- cshtml -->

 

@(Html.Telerik().DropDownListFor(m => m.SelectedStateId)

               .Name("SelectedStateId")

               .BindTo(new SelectList(Model.States, "Id", "Name"))

               .ClientEvents(events => events.OnChange("stateChanged")))

 

<p />

@(Html.Telerik().DropDownListFor(m => m.SelectedCityId)

                .Name("SelectedCityId")

                .BindTo(new SelectList(Model.Cities, "Id", "Name"))

                .ClientEvents(events => events.OnChange("cityChanged")))

 

<p />

@(Html.Telerik().DropDownListFor(m => m.SelectedLocalityId)

                .Name("SelectedLocalityId")

                .BindTo(new SelectList(Model.Localities, "Id", "Name")))

 

<p />

     

    <input type="submit" value="Submit" />

}

 

 <script type="text/javascript">

     function stateChanged(e) {

         var url = '@Url.Action("_PopulateCities", "Home")';

         var SelectedCityId = $('#SelectedCityId').data('tDropDownList');

         SelectedCityId.loader.showBusy();

 

         $.get(url, { SelectedStateId: e.value }, function (data) {

             SelectedCityId.dataBind(data);

             SelectedCityId.loader.hideBusy();

             SelectedCityId.select(0);

         });

     }

 

     function cityChanged(e) {

         var url = '@Url.Action("_PopulateLocalities", "Home")';

         var SelectedLocalityId = $('#SelectedLocalityId').data('tDropDownList');

         SelectedLocalityId.loader.showBusy();

 

         $.get(url, { SelectedCityId: e.value }, function (data) {

             SelectedLocalityId.dataBind(data);

             SelectedLocalityId.loader.hideBusy();

             SelectedLocalityId.select(0);

         });

     }

 

 </script>

  

public JsonResult _PopulateCities(int SelectedStateId) {

    using (var context = new LocationContext()) {

        List<City> cities = context.Cities.Where(c => c.State.Id == SelectedStateId).ToList();

        return Json(new SelectList(cities,"Id","Name"), JsonRequestBehavior.AllowGet);

    }

}

 

public JsonResult _PopulateLocalities(int SelectedCityId) {

    using (var context = new LocationContext()) {

        List<Locality> localities = context.Localities.Where(l => l.City.Id == SelectedCityId).ToList();

        return Json(new SelectList(localities, "Id", "Name"), JsonRequestBehavior.AllowGet);

    }

}



[Jatin]

Hi All,
        The Telerik Dropdownlist (or any html based select element) doesn't fire onchange() if the selected value in the dropdownlist is changed using javascript code. This behaviour seems logical and would be the right choice for most dropdowns. However, if we are implementing cascading dropdowns which cascade more than 2 levels (3 or more dropdowns in total), then we need to select item from the newly loaded items and fire a corresponding change event. The Telerik DropdownList has a variable called "trigger" which provides a method to fire the change() event something like this

function topDropdownlistChanged() {
    //fire ajax routine to get data
    .....
    //get the dropdown of next level in cascade (in ajax callback function) and load newly obtained data from ajax call
    var nextLevelDropDown = $('#nextLevelDropDown').data('tDropDownList');
    nextLevelDropDown.dataBind(data);
    //select the item you want
    nextLevelDropDown.select(0);
    //trigger the nextLevelDropDown change() to invoke its onchange() handler
    nextLevelDropDown.trigger.change();

}

 
regards,
Nirvan

[Yves]

Hi,

I have the same problem but with Teleriks "ComboBox". When I select an element of the combobox via javascript, the onChange event is not fired immediatly. Its only fired when the user clicks somewhere into the webpage after having selected an element via js.

...

var publicationCombobox = $('#SelectedPublicationId').data('tComboBox');
publicationCombobox.dataBind(data);


var selectItem = function (dataItem) {
        //dataItem argument is a ComboBox data item.
        return dataItem.Value == @Model.SelectedPublicationId;
    }

// onChange event is not triggered after this line.
publicationCombobox.select(selectItem);


...

I tried to add

$('body').mousedown();

but this doesn't work for me in every case and its very ugly.

Is there an equivalent oftrigger.change() for ComboBoxes?