如何禁用级联的Kendo DropDownLists?

时间:2013-04-25 20:18:03

标签: c# javascript telerik kendo-ui kendo-asp.net-mvc

我必须使用Kendo DropDownLists,我想在第一个DDL的值被加载并且限制为我的viewmodel的值时禁用第二个DDL。

所以我有这样的代码:

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

@(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")
)

我在第一个DDL上订阅了Cascade事件,并尝试从那里禁用第二个DDL,但它不起作用。

JS:

function onFormGroupCascaded(e) {
    $("#Schema").data("kendoDropDownList").enable(false);
}

3 个答案:

答案 0 :(得分:14)

你已经这样做了。

将事件添加到第一个下拉列表中:

.Events(e =>
{
    e.Change("change").Select("select").Open("open").Close("close").DataBound("dataBound");
})

使用JavaScript处理更改事件

<script>
    function change() {
        // get a reference to the dropdown list
        var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
        // disable the dropdown list
        dropdownlist.enable(false);
    };
</script>

看起来你已经这样做了。你得到了什么样的错误?

答案 1 :(得分:4)

这是一个老问题,但绑定到CascadeFrom事件不会阻止启用下拉菜单。这是由于Kendo库中的代码稍后在执行顺序中重新启用它。

而是绑定到DataBound事件以禁用下拉列表。此事件稍后在执行堆栈中发生,并在Kendo代码启用后禁用输入。

答案 2 :(得分:1)

此代码适用于角度指令配置

^