带有服务器过滤的 Kendoui ComboBox 预取和预选项目

Question

我需要查看 kendoui 组合框（MVC 或客户端代码）从数据源中预选项目（不仅是值）的示例。数据源启用了服务器过滤。我面临的问题是，当我绑定我的mvc组合​​框到模型属性（例如UserID），仅绑定值（即用户ID）而不是文本文件的名称。单击组合框箭头时，未弹出所选项目，这意味着存在没有选中项，只设置了小部件元素（例如输入）值。我见过的大多数示例都显示了如何设置选中值或文本，但没有解决没有选中项的问题。这里是我的代码：

@Html.Kendo().ComboBoxFor(model => model.UserID).DataValueField("ID").DataTextField("Name").Filter(FilterType.Contains).MinLength(3).DataSource(source =>
                        {
                            source.Custom().Type("aspnetmvc-ajax").Transport(transport => transport.Read(read =>
                            {
                                read.Action("GetAllUsers", "User");
                            })).ServerFiltering(true).ServerPaging(true).PageSize(50);
                        }).AutoBind(false)

autoBind 为 false，因此组合框不会使用空过滤器访问数据服务，这将返回无用的 50 条记录。取而代之的是，所需的行为是组合框数据源应发送过滤器（例如：UserID= 50）默认情况下，应该返回记录并将项目添加到组合框。我找到了解决这个问题的解决方法，但不知道这是否是最简单的方法：

combobox.dataSource.filter({ field: 'UserID', operator: 'eq', value: 50 });

如果我调用上面的代码，该项目是预先选择的，我的组合框将只有一个我想要的项目，但是下次我尝试通过输入另一个用户名来更改所选项目时，过滤器将失败因为早期的过滤器仍然附加到数据源。我通过调用解决了这个问题：

combobox.dataSource.filter().filters.shift()

任何有关查找快捷方式的帮助将不胜感激。

Answer 1

有这个here 的文档。下面的示例取自页面，基于同样适用于 ComboBox 的 DropDownList。

<div id="example">
    <div class="demo-section k-header">
      <h4>View Order Details</h4>
      <p>
        <label for="categories">Categories:</label><input id="categories" style="width: 270px" />
      </p>
      <p>
        <label for="products">Products:</label><input id="products" disabled="disabled" style="width: 270px" />
      </p>
      <p>
        <label for="orders">Orders:</label><input id="orders" disabled="disabled" style="width: 270px" />
      </p>

      <button class="k-button" id="get">View Order</button>
    </div>

    <style scoped>
      .demo-section {
        width: 400px;
      }
      .demo-section p {
        margin-top: 1em;
      }
      .demo-section label {
        display: inline-block;
        width: 100px;
        padding-right: 5px;
        text-align: right;
      }
      .demo-section .k-button {
        margin: 1em 0 0 105px;
      }
      .k-readonly
      {
        color: gray;
      }
    </style>

    <script>
      $(document).ready(function() {
        var categories = $("#categories").kendoDropDownList({
          optionLabel: "Select category...",
          dataTextField: "CategoryName",
          dataValueField: "CategoryID",
          dataSource: {
            type: "odata",
            serverFiltering: true,
            transport: {
              read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
            }
          },
          dataBound: function() {
            this.search("Grains/Cereals");
            this.select(this.selectedIndex);
          }
        }).data("kendoDropDownList");

        var products = $("#products").kendoDropDownList({
          autoBind: false,
          cascadeFrom: "categories",
          optionLabel: "Select product...",
          dataTextField: "ProductName",
          dataValueField: "ProductID",
          dataSource: {
            type: "odata",
            serverFiltering: true,
            transport: {
              read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
            }
          },
          dataBound: function() {
            this.search("Gnocchi di nonna Alice");
            this.select(this.selectedIndex);
          }
        }).data("kendoDropDownList");

        var orders = $("#orders").kendoDropDownList({
          autoBind: false,
          cascadeFrom: "products",
          optionLabel: "Select order...",
          dataTextField: "Order.ShipCity",
          dataValueField: "OrderID",
          dataSource: {
            type: "odata",
            serverFiltering: true,
            transport: {
              read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Order_Details?$expand=Order"
            }
          },
          dataBound: function() {
            this.search("Albuquerque");
          }
        }).data("kendoDropDownList");
      });

    </script>
  </div>