How to disable cascaded Kendo DropDownLists?

Jevgenij Nekrasov picture Jevgenij Nekrasov · Apr 25, 2013 · Viewed 13.5k times · Source

I have to 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);
}

Answer

HaBo picture HaBo · Apr 26, 2013

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?