I have two Kendo DropDownLists, I want to disable second DDL when the value of the first DDL is loaded and bounded to the value of my viewmodel.
So I have such code:
@(Html.Kendo().DropDownList()
.Name("FormGroupId")
.HtmlAttributes(new { style = "width:250px" })
.OptionLabel("Select form group...")
.Template("#= data.Name # - #= data.Version #")
.DataTextField("Name")
.DataValueField("Id")
.Events(events =>
{
events.Change("onFormGroupChanged");
events.Select("onFormGroupSelected");
events.Cascade("onFormGroupCascaded");
})
.DataSource(source =>
{
source.Read(read => { read.Route(RouteConfig.GetFormGroupNames.Name); });
})
)
and
@(Html.Kendo().DropDownList()
.Name("Schema")
.HtmlAttributes(new { style = "width:250px" })
.OptionLabel("Select schema...")
.DataTextField("SchemaName")
.DataValueField("SchemaId")
.DataSource(source =>
{
source.Read(read =>
{
read.Route(RouteConfig.FilterFormSchemas.Name).Data("filterSchemas");
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("FormGroupId")
)
I subscribe to the Cascade event on first DDL and try to disable second DDL from there, but it doesn't work.
JS:
function onFormGroupCascaded(e) {
$("#Schema").data("kendoDropDownList").enable(false);
}
The cascading DropDownList is a series of DropDownList, where the value of one DropDownList depends upon another's value. This can be configured by using the change event of the parent DropDownList.
You are already doing that.
Add events to first drop-down list:
.Events(e =>
{
e.Change("change").Select("select").Open("open").Close("close").DataBound("dataBound");
})
Using JavaScript, handle the change event
<script>
function change() {
// get a reference to the dropdown list
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
// disable the dropdown list
dropdownlist.enable(false);
};
</script>
Looks like you are already doing this. What kind of error are you getting?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With