[Solved] Cascade ComboBox

[Dario Quintana]

Hi all,

Would be nice to see an example of Cascade Comboboxes, maybe is supporting out-of-box and I haven't notice.
I wait for your comments. Thanks!

Cheers

[Bill]

I too am waiting for a out of the box Cascade Drop Down drag-n'-drop control you can put on a page or inside a RadGrid Template Column.

I've asked for this but more people need to request it I think.

Bill.

[Developix]

It can be voted on it PITS (ID 3550):
http://www.telerik.com/support/pits.aspx#/public/aspnet-mvc/3550

[al]

If you need an implementation of cascading drop down here is my example:
Hope it helps
<%Html.Telerik().DropDownList()
                .Name("FamilyCode")
                .ClientEvents(events => events
                .OnChange(()=>{%>
                    function(e) {
                        onFamilyChange(e.value,'<%=Model.CategoryID %>');
                    }
                <%})
                .BindTo(Model.Classes)
                .HtmlAttributes(new { style = "width:253px;height:22px;font-family:Arial,Verdana,Helvetica;font-size:12px;",id="ddlFamilyCode" }).Render(); %>


<%Html.Telerik().DropDownList()
                                .Name("GenericBodyCode")
                                .Items(items => items.Add().Text("All Body Styles...").Value(""))
                                .ClientEvents(events => events
                                    .OnChange(() =>
                                    {%>
                                        function(e) {
                                            onBodyStyleChange('<%=Model.CategoryID%>',e.value);
                                        }
                                    <%})
                                .HtmlAttributes(new { style = "width:253px;height:22px;font-family:Arial,Verdana,Helvetica;font-size:12px;", id = "ddlBodyStyle" }).Render();%>


<script>
     function onFamilyChange(value,catID) {
         $.getJSON('<%=Url.Action("BodyStylesList", "Home") %>?dealerCode=<%=Model.DealerCode%>&CategoryID='+catID+'&family='+value, null, function(data) {
           var body = $('#ddlBodyStyle').data('tDropDownList');
            body.dataBind(data);  
            body.select(0);
     });
    }
</script>

[Mario]

This code works if i use ajax binding. im trying to do a cascade dropdown with ajax binding but i cannot get it work, here is the code:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>


<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
    var IsPostBack = false;

    $(document).ready(function () {
        InicializarControles();
    });

    function InicializarControles() {
        var combo = $("#pais").data("tDropDownList")
        combo.reload();
       
        combo.select(0);
        ObtenerRegiones();
  
    }


    function ObtenerRegiones() {
        var pais = $("#pais").data("tDropDownList")

        alert('ObtenerRegiones');
        alert('IsPostBack:' + IsPostBack);
        $.post("/Visitas/GetInfoRegion", { Pais: pais.value() },
              function (data) {
                  if (data != null) {

                      $("#region").data("tDropDownList").dataBind(data);
                      alert('IsPostBack:' + IsPostBack);
                      if (!IsPostBack) {

                          alert('Inside IsPostBack');
                          $("#region").data("tDropDownList").select(0);
                      }

                 }
              }, "json");
    }


    function ObtenerComunas() {
        var region = $("#region").data("tDropDownList")

        $.post("/Visitas/GetInfoComuna", { Region: region.value() },
              function (data) {
                  if (data != null) {


                      $("#comuna").data("tDropDownList").dataBind(data);


                      if (!IsPostBack) {

                          $("#comuna").data("tDropDownList").select(0);
                          IsPostBack = true;
                      }


                  }
              }, "json");
    }


</script>
    <h2><%: ViewData["Message"] %></h2>
    <p>
        To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
    </p>
    <p>
     <%= Html.Telerik().DropDownList()
            .Name("pais")
            .DataBinding(binding => binding.Ajax().Select("GetInfoPais", "Home"))
                     .ClientEvents(events => events.OnChange("ObtenerRegiones"))
        %>
        </p>
        <p>
        <%= Html.Telerik().DropDownList()
            .Name("region")
            .DataBinding(binding => binding.Ajax().Select("GetInfoRegion", "Home"))
            .ClientEvents(events => events.OnChange("ObtenerComunas"))
        %>
        </p>
        <p>
        <%= Html.Telerik().DropDownList()
            .Name("comuna")
            .DataBinding(binding => binding.Ajax().Select("GetInfoComuna", "Home"))
            
        %>
        </p>
</asp:Content>

[al]

If the code is not working i would guess that the "data" you are returning is not a json one or not formatted properly. 

[Andrew]

I find a proper working solution to cascade combobox (or Telerik calls them related comboboxes in AJAX control example), using Passing Additional arguments (http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-combobox-data-binding-client-side-binding.html), I managed to get the desired effects of related comboboxes in ASP .NET MVC using the version Q1 2011.

Below example using Razor syntax.

Index.cshtml:

@{
    @(Html.Telerik().ComboBox()
        .Name("continent")
        .AutoFill(true)
        .DataBinding(binding => binding.Ajax().Select("LoadContinents", "Home"))
        .HighlightFirstMatch(true)
        .ClientEvents(events => events.OnChange("onContinentChange")))
    @(Html.Telerik().ComboBox()
        .Name("country")
        .DataBinding(binding => binding.Ajax().Select("LoadCountries", "Home"))
        .HighlightFirstMatch(true)
        .ClientEvents(events => events.OnDataBinding("onCountryDataBinding")))
}

<script type="text/javascript">
    function onContinentChange(e) {
        var combo = $("#country").data("tComboBox");
        combo.value("");
        combo.reload();
    }

    function onCountryDataBinding(e) {
        var combo = $("#continent").data("tComboBox");
        e.data = $.extend({}, e.data, { continentID: combo.value() });
    }
</script>

HomeController.cs:

[HttpPost]
public ActionResult LoadContinents()
{
    SqlConnection connection = new SqlConnection(
    ConfigurationManager.ConnectionStrings["TelerikConnectionString"].ConnectionString);

    SqlDataAdapter adapter = new SqlDataAdapter("SELECT * FROM Continents WHERE Name like ORDER By Name", connection);
    DataTable dt = new DataTable();
    adapter.Fill(dt);

    // return json result of continents
    var continents = dt.AsEnumerable();
    return new JsonResult
    {
        Data = new SelectList(continents, "ID", "Name")
    };
}

[HttpPost]
public ActionResult LoadCountries(int? continentID)
{
    SqlConnection connection = new SqlConnection(
    ConfigurationManager.ConnectionStrings["TelerikConnectionString"].ConnectionString);

    //select a country based on the id
    SqlDataAdapter adapter = new SqlDataAdapter("SELECT * FROM Countries WHERE ContinentID=@ContinentID ORDER By Name", connection);
    adapter.SelectCommand.Parameters.AddWithValue("@ContinentID", id);

    DataTable dt = new DataTable();
    adapter.Fill(dt);

    // return json result of countries
    var countries = dt.AsEnumerable();
    return new JsonResult
    {
        Data = new SelectList(countries, "ID", "Name")
    };
}

[Nehru]

Hi Andrew

Thanks for the example
I'm trying to cascade 2 combobox
Combo1 , Combo2
and onchange event of Combo1 I want to change the selected index of combo2 and
and onchange event of Combo2 I want to change the selected index of combo1 and

I was able to do this in the javascript and jquery lib but some how when do this one way it works fine and when I setup 2 way
the controls behaves wierd anywhere I click on the page it gets changed and fires the onchange event. When I went through the forums I read about bubble up of events , Im not sure whether it is related or its a bug at telerik controls mvc combo box 2011 q1
please advise

Thanks and appreciate your quick response
Arun Nehru