Question

我正在尝试将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);

    }

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

}

如何在Grid列中使用Kendo AutoComplete

1 个答案: