Conditional values from multiple cascading ComboBoxes

[Alex]

Hello everyone,

 

Currently I've got three ComboBoxes:

1. Country
2. State
3. City

When user selects a country the next two ComboBoxes will show some values based on the first value. Example:

If country is "United States", the state will show all of the states in the U.S and city will show all of the cities in the U.S.. What I need to do this is to add another condition to select cities based on State if available because not all countries have states.

 

Following is my code for Cities:

public JsonResult GetCascadeCities(string countries, string states, string cityFilter)

        {
            var cities = db.GeoDD.AsQueryable();

            if (countries != null)
            {
                cities = cities.Where(p => p.CountryCode == countries);
            }
            
            if (!string.IsNullOrEmpty(cityFilter))
            {
                cities = cities.Where(p => p.City.Contains(cityFilter));
            }
            return Json(cities.Where(p => p.Deleted == false).Select(p => new { City = p.City }).Distinct().OrderBy(p => p.City), JsonRequestBehavior.AllowGet);
        }

 

So how can I make it so that if a country has state then city should be populated based on Country and State and if not then Country should be the only condition.

 

Please advice,

Alex

[Georgi Krustev]

Hello Alex,

I believe that you can accomplish your goal sending additional filter value to the server. You can find how to do that in this help topic:

• http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/combobox/overview#send-parameters-to-the-server

How exactly you will implement the server filtration is entirely up to your personal preferences.

Regards,
Georgi Krustev
Telerik

[Alex]

Good morning Georgi,

Since I'm very new to this I don't exactly know how to accomplish that. Do I need to add the 3rd parameter inside controller as shown above or it should happen somewhere else.

As I said earlier, I was able to set that when I select the Country it will automatically show the related State or City but I need to make the City depended on State as well. Example: If I select US then States will show up then I select California as State, I need to display Cities inside California.

Please advice,

Alex

[Georgi Krustev]

Hello Alex,

It really depends how many values you would like to post the server. If you need three, then you would need to add 3rd parameter to the Action method that you are targeting. I would suggest you examine the "Cascasding ComboBoxes" demo part of the offline demos included in the UI for ASP.NET MVC bundle. There you can see how the second widget:

@(Html.Kendo().ComboBox()
              .Name("products")
              .HtmlAttributes(new { style = "width:100%;" })
              .Placeholder("Select product...")
              .DataTextField("ProductName")
              .DataValueField("ProductID")
              .Filter(FilterType.Contains)
              .DataSource(source => {
                  source.Read(read =>
                  {
                      read.Action("GetCascadeProducts", "ComboBox")
                          .Data("filterProducts");
                  })
                  .ServerFiltering(true);
              })
              .Enable(false)
              .AutoBind(false)
              .CascadeFrom("categories")
        )

uses the filterProducts method to send additional data:

<script>
            function filterProducts() {
                return {
                    categories: $("#categories").val(),
                    productFilter: $("#products").data("kendoComboBox").input.val()
                };
            }
        </script>

and how the Action method receives them:

public JsonResult GetCascadeProducts(int? categories, string productFilter)
{
   ...
}

For more details about posting values to ASP.NET MVC controller using Ajax, check these articles:

• http://www.itorian.com/2013/02/jquery-ajax-get-and-post-calls-to.html
• http://www.mikesdotnetting.com/article/220/posting-data-with-jquery-ajax-in-asp-net-razor-web-pages
• http://weblogs.asp.net/gunnarpeipman/how-to-make-ajax-requests-to-asp-net-mvc-application-using-jquery
  

Please note that these covers generic topics, that you would need to be familiar in order to use ASP.NET MVC and UI for ASP.NET MVC products.

Regards,
Georgi Krustev
Telerik