Synhronizing two DropDowns when first ones selected item changes

[Mike]

Hello All,

I have two DropDowns in my MVC 3 Application and they reside in same Html.Form.
The question is that how can make a PostBack when First DropDowns item is changing because then I should read other values into Second DropDown (they have some kind of Parent - Child relationship).

This change shold be noticed in Controller and other DropDown should be repoluate there.

Any suggestion how to handle this?

Thank you,

Mike

[Craig Tarr]

Mike, there are a few examples in the Code Library for MVC as well as some discussed in this forum. Just search for Cascade Drop Down. Below is what i've done with MVC3. I read in the initial values of the first dropdown. The other 2 are disabled on the page load.

Once you select the first dropdown an JavaScript call back and AJAX call to the Controller is made to populate the 2nd and 3rd dropdowns. Upon selecting the 3rd the page refreshes and passes in the corresponding value to my Controller and call the specific method with parameters.

<tr>

            <td><%= Html.Telerik().DropDownList()
                .Name("SubS")
                .DataBinding(binding => binding.Ajax().Select("_SelectSubS", "SubSList"))
                .ClientEvents(events => events.OnClose("subSChanged"))
                .HtmlAttributes(new { style = string.Format("width:{0}px", "250")})
        %></td>
            <td><%= Html.Telerik().DropDownList()
                    .Name("Y")
                    .ClientEvents(events => events.OnChange("yChanged"))
                    .Enable(false)
                    .HtmlAttributes(new { style = string.Format("width:{0}px", "250") })
         %></td>
            <td><%= Html.Telerik().DropDownList()
                    .Name("R")
                    .ClientEvents(events => events.OnChange("rChanged"))
                    .Enable(false)
                    .HtmlAttributes(new { style = string.Format("width:{0}px", "250")})
         %></td>
        </tr>

<script type="text/javascript">

        function subSChanged(e) {
            var url = '<%= Url.Action("_GetY", "SubSList") %>';
            var yCombo = $('#Y').data('tDropDownList');
            var subSCombo = $('#SubS').data('tDropDownList');
            yCombo.loader.showBusy();
            var comboText = subSCombo.value();

            $.post(url, { id: comboText }, function (data) {
                yCombo.dataBind(data);
                yCombo.loader.hideBusy();
                yCombo.enable();
            });
        }

        function yChanged(e) {
            var url = '<%= Url.Action("_Get", "SubList") %>';
            var rCombo = $('#R').data('tDropDownList');
            var yCombo = $('#Y').data('tDropDownList');
            var subSCombo = $('#SubS').data('tDropDownList');

            rCombo.loader.showBusy();

            var yValue = yCombo.value();
            var subSValue = subSCombo.value();

            $.post(url, { SubSID: subSValue, YID: yValue }, function (data) {
                rCombo.dataBind(data);
                rCombo.loader.hideBusy();
                rCombo.enable();
            });
        }

        function rChanged(e) {
            if ($(this).val() != '') {
                $.post('/SubSList/R', [{ name: 'rID', value: $(this).val() }, { name: 'yID', value: $('#Y').val() }, { name: 'SubSID', value: $('#SubS').val()}], function (data) {
                    window.location.href = data;
                });
            }
        }


    </script>