Cascade Combo Box

[Joel]

Your online examples need explanation.  Just putting the code out there is not considered best practice.  This example:

https://demos.telerik.com/aspnet-mvc/combobox/cascadingcombobox

I'm trying to get the cascading going using ASP.NET Core MVC.  I am able to get the first combo box working.  But, the cascade action doesn't work.  Your example references objects that have no definition so I'm lost.  For example:

productFilter: $("#products").data("kendoComboBox").input.val()

What is the "kendoComboBox" referring to?  What is it and where did it originate?

 

Here is my attempt:

<div class="form-group">
    <label asp-for="DefaultCountryCode" class="control-label"></label><br />
    @(Html.Kendo().ComboBoxFor(x => x.DefaultCountryCode)
          .Placeholder("Select Country...")
          .DataTextField("Name")
          .DataValueField("Context")
          .Filter(FilterType.Contains)
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("GetCountries", "Persons");
              });
          })
          .HtmlAttributes(new { style = "width: 100%" }))
</div>
<div class="form-group">
    <label asp-for="DefaultTimeZoneId" class="control-label"></label><br />
    @(Html.Kendo().ComboBoxFor(x => x.DefaultTimeZoneId)
          .Placeholder("Select Time Zone...")
          .DataTextField("Comment")
          .DataValueField("ZoneId")
          .Filter(FilterType.Contains)
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action(
                      "GetTimeZoneByCountryCodeAsync",
                      "Persons")
                      .Data("filterZones");
              });
          })
          .HtmlAttributes(new { style = "width: 100%" })
          .Enable(false)
          .AutoBind(false)
          .CascadeFromField("DefaultCountryCode")
          )
    <script>
        function filterZones() {
            return {
                countries: $("#countries").val(),
                productFilter: $("#timeZones").data("kendoComboBox").input.val()
            };
        }
    </script>
</div>

 

The "DefaultCountryCode" combobox is working.

Your example seems to refer to the other combobox using the value in the "combobox.name" property.  However, I tie this to the model using ComboBoxFor. 

2nd ComboBox:

• I need the ComboBox1.DataValueField("Context") value to be used to submit the value to ComboBox2
• How do I tie the 2nd to the 1st combobox in this scenario?  I'm guessing by using the "combobox.CascadeFromField" approach.  
• The example sets the Enable property to false and AutoBind to false.  Why?  Give me documentation.
• The example references the filterProducts (filterZones) script to feed the read.Action.Data combobox.Datasource.  When doing "combobox.CascadeFromField", is this necessary?  My script isn't working and the Action is never fired.

Thanks for your help,

Joel

[Aleksandar]

Hello Joel,

Thank you for the feedback on our documentation and available demos. We constantly try to improve the user experience and will take the feedback into consideration for future improvements.

With that said allow me to explain the cascading functionality of the ComboBox. A child ComboBox cascades from the parent one if the CascadeFrom option is defined. The CascadeFrom option has to point to the parent ID. During initialization of a child ComboBox the actions take place:

• It is checked whether the CascadeFrom property is set. If not, cascading is disabled.
• The ComboBox tries to find the parent ComboBox object. If the result is null, then the functionality is omitted.
• The child ComboBox listens to any changes of the parent value. If the parent does not have a value, the child is disabled. If the parent has a value, the child is enabled and filters its data accordingly. 

$("#products").data("kendoComboBox") provides a reference to the ComboBox widget instance with ID products. I would suggest reviewing the Method and Events article, as it provides essential guidelines for working with Kendo widget instances at runtime. 

All Telerik UI helpers which accept a value can be initialized with the [WidgetName]For method. For example, @Html.Kendo().NumericTextBoxFor(model => model.Age) is the same as @Html.Kendo().NumericTextBox().Name("Age").Value(Model.Age).

Now, for the second ComboBox:

• For the "Context" property value to be passed to the child ComboBox the DataValueField should be configured as it already is: .DataValueField("Context")
• To link the child ComboBox to the parent ComboBox use the CascadeFrom() property and pass as a parameter the ID of the parent ComboBox

  .CascadeFrom("DefaultCountryCode")

• Enable and AutoBind are both set to false to prevent user interaction with the child ComboBox before a value has been selected in the parent.
•  The Read.Action.Data() defines the handler function that will provide the additional data to be passed to the controller. 

  .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action(
                        "GetTimeZoneByCountryCodeAsync",
                        "Persons")
                        .Data("filterZones");
                });
            })

function filterZones() {
            return {
                countries: $("#DefaultCountryCode").val(),
                productFilter: $("#DefaultTimeZoneId").data("kendoComboBox").input.val()
            };
        }

Finally, attached you will find a runnable sample application where Cascading ComboBoxes have been implemented, for you to review. 

I hope the above helps. Get back to me if you have further questions.

Regards,
Aleksandar
Progress Telerik