Initial filtering with cascading ComboBox doesn't work with model binding

[Daniel]

Hi Georgi,you are right, using the text method is not the right way.

On the other side, there is something wrong with cascading comboboxes in Kendo UI.

Please look at my attached sample (click on ComboBox in top menu).
[ComboBox.zip]

The ViewModel I'm using:

public class ComboBoxViewModel
{
    public string MyProperty1 { get; set; }
    public string MyProperty2 { get; set; }
    public Product Product { get; set; }
    public int ProductID { get; set; }
}

In the view I'm using two comboboxes. One for products

  <div class="form-group">
      @Html.LabelFor(model => model.ProductID, new { @class = "control-label col-md-2" })
      <div class="col-md-10">
          @(Html.Kendo().ComboBoxFor(model => model.ProductID)
.CascadeFrom(Html.IdFor(model => model.Product.Category).ToString())
            .Placeholder("Select state or province...")
            .DataTextField("ProductName")
            .DataValueField("ProductID")
            .Filter(FilterType.Contains)
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetCascadeProducts", "ComboBox")
                        .Data("filterProducts");
                }).ServerFiltering(true);
                ;
            })
            .AutoBind(false)
            .HighlightFirst(true)
            .Enable(false)
          )
          @Html.ValidationMessageFor(model => model.ProductID)
          <script>
              function filterProducts() {
                  return {
                      categories: $("#@Html.IdFor(model => model.Product.Category.CategoryID).ToString()").val(),
                      productFilter: $("#@Html.IdFor(model => model.ProductID)").data("kendoComboBox").input.val()
                  };
              }
          </script>
      </div>
  </div>

and one for category (as a filter for products)

<div class="form-group">
            @Html.LabelFor(model => model.Product.Category, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @(Html.Kendo().ComboBoxFor(model => model.Product.Category.CategoryID)
                  .Name(Html.NameFor(model => model.Product.Category).ToString())
                  .Placeholder("Select category ...")
                  .DataTextField("CategoryName")
                  .DataValueField("CategoryID")
                  .Filter(FilterType.Contains)
                  .DataSource(source =>
                  {
                      source.Read(read =>
                      {
                          read.Action("GetCascadeCategories", "ComboBox").Type(HttpVerbs.Post);
                      });
                  })
                )
            </div>
        </div>

My problem is, that the product combobox is empty on initial page load, because the parameter productFilter is not empty. It is set with the value of  ProductID, and therefore the returned product list must be empty!

<script>
    function filterProducts() {
        return {
            categories: $("#@Html.IdFor(model => model.Product.Category.CategoryID).ToString()").val(),
            productFilter: $("#@Html.IdFor(model => model.ProductID)").data("kendoComboBox").input.val()
        };
    }
</script>

My feeling is, that there must be something wrong here with Kendo ComboBoxes.

How can I solve this scenario?
The ComboBox with products should be filled with all products of category Beverages and show "Chai" as a selected product on initial load. (See Scree2.png)

Telerik support provide me with a solution (see Telerik.zip) that doesn't work for me.

Regards,
Daniel

You can find all my files here: http://1drv.ms/1cDgIZZ

[Georgi Krustev]

Hello Daniel,

The ComboBox widget has a default Data callback, which will not be used when а developer defines its own. When there is a requirement to send different parameters to the server and the widget cascades, the developer will need to decide when to send the input value. I modified your test project in order to check whether to send the input value to the server. The new part to the requestData callback (shown in the docs) is filters filtration. The code gets only filters which are related to the combobox text field.

Regards,
Georgi Krustev
Telerik