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

2 posts, 0 answers
  1. Daniel
    Daniel avatar
    17 posts
    Member since:
    Jan 2014

    Posted 14 Feb 2014 Link to this post

    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

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 14 Feb 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top