How to disable cascaded Kendo DropDownLists?

Question

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);
}

Solution 1

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?

Solution 2

This is an old question, but binding to the CascadeFrom event will not prevent the drop down from being enabled. This is due to code in the Kendo library re-enabling it later in the execution order.

Instead, bind to the DataBound event to disable the drop down. This event occurs later in the execution stack and disables the input after the Kendo code enables it.

Solution 3

This code works in angular directive configuration

dataBound: function (e) {
            this.enable(false);
        }