如何在网格列中使用Kendo自动完成功能

我试图将Kendo UI网格列从下拉菜单转换为Kendo自动完成功能。我使用的是MVVM模式，找不到像我的任何示例。以下是我迄今为止：如何在网格列中使用Kendo自动完成功能

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

    }

来源

2014-02-13 Alan Fisher

你是什么意思，“它从来没有返回任何数据”？一个问题是你试图将dataBind定义为不存在的自动完成的选项 - 你应该把它放在你创建的输入html中（data-bind =“value：'+ options.field +'”） ;一个演示可能会帮助 –

@Lars Hoppner，谢谢你指出我的错误，它帮助我弄清楚如何实现我所需要的。我编辑我的帖子，包括我找到的解决方案。 –

您应该将其作为回答发布，以便人们知道您不再需要帮助 –

我是从拉斯通过注释得到建议后想通了。这里是代码：

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-14 15:56:00

如何在网格列中使用Kendo自动完成功能

回答

相关问题