Conditional values from multiple cascading ComboBoxes

4 posts, 0 answers
  1. Alex
    Alex avatar
    11 posts
    Member since:
    Nov 2015

    Posted 06 Jan Link to this post

    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

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 11 Jan Link to this post

    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: How exactly you will implement the server filtration is entirely up to your personal preferences.

    Regards,
    Georgi Krustev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Alex
    Alex avatar
    11 posts
    Member since:
    Nov 2015

    Posted 11 Jan in reply to Georgi Krustev Link to this post

    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

  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 13 Jan Link to this post

    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: 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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready