This is a migrated thread and some comments may be shown as answers.
Synhronizing two DropDowns when first ones selected item changes
1 Answer 46 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Mike
Top achievements
Rank 1
Mike asked on 27 Nov 2011, 05:15 PM
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

1 Answer, 1 is accepted

Sort by
0
Craig Tarr
Top achievements
Rank 2
answered on 06 Dec 2011, 06:48 PM
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>
Tags
ComboBox
Asked by
Mike
Top achievements
Rank 1
Answers by
Craig Tarr
Top achievements
Rank 2
Share this question
or