Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable cascaded Kendo DropDownLists?

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);
}
like image 248
Jevgenij Nekrasov Avatar asked Apr 25 '13 20:04

Jevgenij Nekrasov


People also ask

What is cascading in angular?

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.


1 Answers

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?

like image 134
HaBo Avatar answered Sep 28 '22 05:09

HaBo