ComboBox Cascade with Binding

[Joel]

Your ComboBox Cascade examples use the Html.Kendo().ComboBox() approach.  However, for simple binding I typically use Html.Kendo().ComboBoxFor() for data binding.

Two approaches to solving my issue:

• How do I cascade with Html.Kendo().ComboBoxFor()?
• How do I bind with Html.Kendo().ComboBox()?

This gives me the cascading behavior I'm after but no binding on CountryCode:

            <div class="form-group">
                <label asp-for="Item.CountryCode" class="col-form-label"></label><br />
                <span asp-validation-for="Item.CountryCode" class="text-danger"></span>
                @(Html.Kendo().ComboBox()
                    .Name("countries")
                    .Placeholder("Select Country...")
                    .DataTextField("Name")
                    .DataValueField("Code")
                    .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="Item.TimeZoneName" class="col-form-label"></label><br />
                <span asp-validation-for="Item.TimeZoneName" class="text-danger"></span>
                @(Html.Kendo().ComboBoxFor(x => x.Item.TimeZoneName)
                    .Placeholder("Select Time Zone...")
                    .DataTextField("DisplayName")
                    .DataValueField("Name")
                    .Filter(FilterType.Contains)
                    .CascadeFrom("countries")
                    .Enable(false)
                    .AutoBind(false)
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("GetTimeZones", "Persons")
                                .Data("filterTimeZones");
                        }).ServerFiltering(true);
                    }).HtmlAttributes(new { style = "width: 100%" }))
            </div>

    function filterTimeZones() {
        var countryCode = $("#countries").val();
        //alert(countryCode);
        return { countryCode: countryCode }
    }

[Alexander]

Hi Joel,

Thank you for the provided information and code snippet.

In regards to the first question:

In general, the ComboBoxFor configuration option does not substantially differ from the Telerik UI for ASP.NET Core HtmlHelper. Hence, the same rules are applicable when it comes to cascading functionality.

Having this in mind, in order to ensure successful cascading the .CascadeFrom() configuration option needs to point to the parent id. 

Here is an example:

@(Html.Kendo().ComboBoxFor(m=>m.CategoryID)
    ...
    .DataTextField("CategoryName")
    .DataValueField("CategoryID")
    ...
    .DataSource(source =>
      {
          source.Read(read =>
          {
              read.Action("GetCategories", "Home");
        });
    })
)
<h3>Products</h3>
@(Html.Kendo().ComboBoxFor(m=>m.ProductID)
    ...
    .DataValueField("ProductID")
    .DataTextField("ProductName")
    ...
    .Enable(false)
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetCascadeProducts", "Home")
            .Data("filterProducts");
        })
        .ServerFiltering(true);
    })
    .CascadeFrom("CategoryID")
)

In regards to the second question:

There are two types of model binding that can be utilized for the Telerik UI for ASP.NET Core ComboBox:

• Local Data Binding through a local collection.

• Remote Data Binding through an AJAX request that returns data as a JSON result.

With that said, I am also attaching a runnable sample for you to review that illustrates Remote Data Binding alongside the ComboBoxFor helper configuration for your convenience.

I hope you find this helpful. If further questions arise, do not hesitate to ask.

Regards,
Alexander
Progress Telerik