如何在网格列中使用剑道自动完成答案

【问题标题】：How can I use Kendo AutoComplete in Grid column如何在网格列中使用剑道自动完成
【发布时间】：2014-02-13 19:26:43
【问题描述】：

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

在我的 viewModel 中：

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 #" },

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

编辑：

在我找到的小提琴的帮助下，我想出了如何做我需要的事情。我分叉了它，虽然字段不同，但它可以满足我的需要。 Here is the fiddle I forked to.

我最终像这样更改了我的编辑器代码：

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

    }

【问题讨论】：

“它从不返回任何数据”是什么意思？一个问题是您试图将 dataBind 定义为不存在的自动完成选项 - 您应该将其放在您创建的输入 html 中（ data-bind="value: ' + options.field +'" ） ;演示可能会有所帮助
@Lars Hoppner，感谢您指出我的错误，它帮助我弄清楚了如何实现我所需要的。我编辑了我的帖子以包含我找到的解决方案。
您应该将其作为答案发布，以便人们知道您不再需要帮助

标签： kendo-ui kendo-grid kendo-autocomplete

【解决方案1】：

我是在从 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);

}

【讨论】：

无效的答案。自动完成小部件没有“dataValueField”选项