0

我正在尝试将 Kendo UI 网格列从下拉列表转换为 Kendo AutoComplete。我正在使用 MVVM 模式，找不到任何像我这样的示例。这是我到目前为止所拥有的：

在我的视图模型中：

viewModel = kendo.observable({
suggestedVendor: { "SuggestedVendor": "" },
suggestedVendorDropDownDataSource: new kendo.data.DataSource({
        ... returns a list of Suggested Vendors
  }),

suggestedVendorDropdownEditor: function (container, options) {

        var input = $("<input id='selecteditem' />");
        input.attr("SuggestedVendor", options.field);
        input.appendTo(container);
        input.kendoAutoComplete({
            dataSource: this.suggestedVendorDropDownDataSource,
            dataTextField: "SuggestedVendor",
            dataValueField: "SuggestedVendor",
            dataBind:"value:' + options.field + '"

        });

我网格中的字段：

{ field: "SuggestedVendor", 
  title: "Suggested Vendor", 
  editor: viewModel.suggestedVendorDropdownEditor, 
  template: "#= (data.SuggestedVendor == null) ? '' : data.SuggestedVendor #" },

我可以输入建议的供应商字段，它似乎就像一个自动完成但从不返回和数据。如果问题不是很明显，我可以尝试创建一个小提琴。

编辑：

在我找到的小提琴的帮助下，我想出了如何做我需要的事情。我分叉了它，虽然字段不同，但它可以满足我的需要。这是我分叉的小提琴。

我最终改变了我的编辑器代码，如下所示：

 suggestedVendorDropdownEditor: function (container, options) {
        $('<input id= "selectedItem" data-bind="value: ' + options.field + ' "/>')
            .appendTo(container).kendoAutoComplete({
                dataSource: viewModel.suggestedVendorDropDownDataSource,
                dataTextField: "SuggestedVendor",
                dataValueField: "SuggestedVendor"
        });

      var autoComplete =$("#selectedItem").data("kendoAutoComplete");
      autoComplete.list.width(300);

    }
4

1 回答 1

0

在从 Lars 的评论中得到建议后，我明白了这一点。这是代码：

suggestedVendorDropdownEditor: function (container, options) {
    $('<input id= "selectedItem" data-bind="value: ' + options.field + ' "/>')
        .appendTo(container).kendoAutoComplete({
            dataSource: viewModel.suggestedVendorDropDownDataSource,
            dataTextField: "SuggestedVendor",
            dataValueField: "SuggestedVendor"
    });

  var autoComplete =$("#selectedItem").data("kendoAutoComplete");
  autoComplete.list.width(300);

}
于 2014-02-14T15:56:00.380 回答