动态刷新 KendoUI DropdownList答案

【问题标题】：Dynamically refresh KendoUI DropdownList动态刷新 KendoUI DropdownList
【发布时间】：2013-07-23 14:26:35
【问题描述】：

我有以下三个 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 中选择一个值时，模型 DropDownList 会使用 CascadeFrom() 自动填充。

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

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

【问题讨论】：

Fuel 下拉菜单是否会根据模型选择触发 CascadeFrom？模型选择不是从 Make 级联的吗？似乎您的燃料下拉菜单只需要从 Make 下拉菜单中级联。
我想让用户选择一个品牌并获取所有 FuelTypes，或者选择一个品牌然后选择模型，然后获取所有 FuelTypes。
我在这篇帖子stackoverflow.com/questions/13620877/…找到了我的问题的解决方案@

标签： kendo-ui kendo-combobox

【解决方案1】：

这对我有用

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

【讨论】：

它将是 "$("#Fuel").data("kendoDropDownList").dataSource.read();"属性“dataSource”有一个大写字母

【解决方案2】：

作为一种解决方法，我会使用 Model 下拉菜单上的 select 事件来触发功能以刷新 Fuel 下拉菜单并将 CascadeFrom("Make") 添加到 Fuel 下拉菜单。

这将在选择 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>

【讨论】：

谢谢。这就是我试图弄清楚的。我将如何传递选定的 MakeId 或 ModelId，以便燃料列表仅匹配选定的内容？
在 select 方法中，您可以对 ModelId 执行类似 this.dataItem(e.item.index()).value 的操作。如果您从 Make 级联燃料下拉菜单，则可以将 Data fluent 方法附加到 dataSource 中的读取操作。这个demo 有一个很好的例子。
感谢您的经验，如果我想添加额外的下拉列表，您会怎么做，例如引擎尺寸、颜色等，当另一个下拉列表更改时，所有这些都需要更新跨度>
我喜欢您使用级联下拉菜单的方法，并且可能会继续沿着这条路走下去。引爆点将是有多少选项以及它们是否会被大多数用户使用。如果最可能的用例是用户选择您提供的所有选项，那么您最好立即从服务器中恢复所有选项。
我想我最多有 5 个额外的下拉列表框。如果您查看汽车交易商网站，这就是我想要实施的技术。关于如何实现这一目标的任何建议？

【解决方案3】：

请在下面试试

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

【讨论】：