Kendo Cascade dropdown

It is easy to make dropdownlist cascade. You just have to add ".CascadeFrom()" function and need to pass the control name in it's parameter. Please follow the below example.

EX :
Parent control is Country:-

@(Html.Kendo().DropDownListFor(m => m.Customer)

.Name("Country")                                                                .DataTextField("Text")                                                            .DataValueField("Value")

.OptionLabel("All")                                                                     .MinLength(0)                                                                 .HtmlAttributes(new { @class = "", id = "Country" })

 .BindTo(Model.Country)

 .Filter(FilterType.StartsWith)

 .Value(Model.SelectedCountry??"")

)

And cascade control is State:-

@(Html.Kendo().DropDownList()

.Name("State")

.DataSource(source => source.Read(read =>

{

read.Action("GetState", "Common")

.Data("CountryFetch");

}).ServerFiltering(true);

})

.OptionLabel("All")

.HtmlAttributes(new { @class = "", id = "state" })

.Filter(FilterType.StartsWith)

.DataValueField("Value")

.DataTextField("Text")

.AutoBind(false)

.CascadeFrom("Country")

)

<script>

   function CountryFetch () {

return {

Country: $("#Country").val(),

text: $('input[aria-owns="state_listbox"]').val()

};

   }

</script>

Here we can see 'ServerFiltering(true)' extend function which denote filtration parameter will pass to api and data which need to pass is mention by Data('CountryFetch') function.

CountryFetch is a js model which is written below the code in script tag.