Question

我有以下三个KendoUI下拉列表框;

    @(Html.Kendo().DropDownList()
    .HtmlAttributes(new { style = "width:auto;height:25px" })
    .OptionLabel("Make (any)") 
    .Name("Make") 
    .DataTextField("Name") 
    .DataValueField("MakeId")
    .DataSource(source =>
    {
           source.Read(read =>
           {
               read.Action("GetMakes", "Home"); 
           })
           .ServerFiltering(true); 
    })
    .SelectedIndex(0) 
    )

    @(Html.Kendo().DropDownList()
          .Name("Model")
          .HtmlAttributes(new { style = "width:auto;height:25px" })
          .OptionLabel("Model (any)")
          .DataTextField("Name")
          .DataValueField("ModelId")
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetModels", "Home")
                      .Data("FilterModels");
              })
              .ServerFiltering(true);
          })
          .Enable(false)
          .AutoBind(false)
          .CascadeFrom("Make")

    )



    @(Html.Kendo().DropDownList()
          .Name("Fuel")
          .HtmlAttributes(new { style = "width:auto;height:25px" })
          .OptionLabel("Fuel type (any)")
          .DataTextField("Name")
          .DataValueField("FuelTypeId")
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetFuelTypes", "Home")
                      .Data("FilterFuelTypes");
              })
              .ServerFiltering(true);
          })
          .Enable(false)
          .AutoBind(false)

    )

当用户从Make DropDownList中选择一个值时，将使用CascadeFrom（）自动填充模型DropDownList。

但是现在，我想在更新Make或Model列表时更新Fuel下拉列表，并且我发现你只能有一个CascadeFrom调用。

关于如何实现这一目标的任何建议？

Answer 1

作为一种解决方法，我会在模型下拉菜单上使用select事件来触发功能以刷新Fuel下拉菜单并向Fuel下拉菜单添加CascadeFrom（“Make”）。

这将在选择Make后激活读取操作，然后在选择Model后刷新Fuel下拉。

@(Html.Kendo().DropDownList()
      .Name("Model")
      .HtmlAttributes(new { style = "width:auto;height:25px" })
      .OptionLabel("Model (any)")
      .DataTextField("Name")
      .DataValueField("ModelId")
      .DataSource(source => {
          source.Read(read =>
          {
              read.Action("GetModels", "Home")
                  .Data("FilterModels");
          })
          .ServerFiltering(true);
      })
      .Enable(false)
      .AutoBind(false)
      .CascadeFrom("Make")
      .Events(events => events.Select("select"))
)

选择连接到模型下拉列表的事件以刷新燃料下拉：

<script>
  function select(e) {
    // get a referenence to the Kendo UI DropDownList
    var dropdownlist = $("#Fuel").data("kendoDropDownList");

    if (dropdownlist) {
      // re-render the items in drop-down list.
      dropdownlist.refresh();
    }
  };
</script>

Answer 2

这对我有用

$("#Fuel").data("kendoDropDownList").dataSource.read();

Answer 3

请尝试以下

var a = $("#Fuel").data("kendoDropDownList");
a.dataSource.read();

动态刷新KendoUI DropdownList

3 个答案: