Question

我需要看一个kendoui Combobox（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 的文档。以下示例取自页面，基于 DropDownList，也适用于 ComboBox。

<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>

Kendoui ComboBox预取＆amp;使用服务器筛选预选项目

1 个答案: