

@model ComboBoxCascading.Models.TestPageModel

<h4>Categories:</h4>
@(Html.Kendo().ComboBoxFor(m => m.MyCategories)
              //.Name("categories")
              .HtmlAttributes(new { style = "width:100%", id = "myCategories" })
              .Placeholder("Select category...")
              .DataTextField("CategoryName")
              .DataValueField("CategoryId")
              .Filter("contains")
              .DataSource(source =>
                  {
                      source.Read(read =>
                      {
                          read.Action("Cascading_Get_Categories", "Home");
                      });

                  })
)

@(Html.Kendo().ComboBoxFor(m => m.MyProducts)
                      //.Name("products")
                      .HtmlAttributes(new { style = "width:100%" })
                      .Placeholder("Select product...")
                      .DataTextField("ProductName")
                      .DataValueField("ProductID")
                      .DataSource(source =>
                      {
                          source.Read(read =>
                          {
                              read.Action("Cascading_Get_Products", "Home")
                                  .Data("filterProducts");
                          })
                          .ServerFiltering(true);
                      })
                      .Enable(false)
                      .AutoBind(false)
                      .CascadeFrom("myCategories")
)
<script>
    function filterProducts() {
        return {
            categories: $("#myCategories").val()
        };
    }

   
</script>