title: How can I use Kendo AutoComplete in Grid column
body: <p>I'm trying to convert a Kendo UI grid column from a dropdown to an Kendo AutoComplete. I'm using an MVVM pattern and can't find any examples that like mine. Here is what I have so far:</p>
  
  <p><strong>In my viewModel:</strong></p>
  
  <pre><code>viewModel = kendo.observable({
  suggestedVendor: { "SuggestedVendor": "" },
  suggestedVendorDropDownDataSource: new kendo.data.DataSource({
          ... returns a list of Suggested Vendors
    }),
  
  suggestedVendorDropdownEditor: function (container, options) {
  
          var input = $("&lt;input id='selecteditem' /&gt;");
          input.attr("SuggestedVendor", options.field);
          input.appendTo(container);
          input.kendoAutoComplete({
              dataSource: this.suggestedVendorDropDownDataSource,
              dataTextField: "SuggestedVendor",
              dataValueField: "SuggestedVendor",
              dataBind:"value:' + options.field + '"
  
          });
  </code></pre>
  
  <p><strong>The field in my grid:</strong></p>
  
  <pre><code>{ field: "SuggestedVendor", 
    title: "Suggested Vendor", 
    editor: viewModel.suggestedVendorDropdownEditor, 
    template: "#= (data.SuggestedVendor == null) ? '' : data.SuggestedVendor #" },
  </code></pre>
  
  <p>I can enter the suggested vendor field and it seems to act like an autocomplete but never returns and data. I can try and create a fiddle if the problem is not immediately obvious.   </p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I figured out how to do what I needed with the help of a fiddle I found. I forked it and although the fields are different, it does what I needed. <a href="http://jsfiddle.net/AkAlan/YBDjA/1/" rel="nofollow">Here is the fiddle I forked to</a>.</p>
  
  <p>I ended up changing my editor code like so:</p>
  
  <pre><code> suggestedVendorDropdownEditor: function (container, options) {
          $('&lt;input id= "selectedItem" data-bind="value: ' + options.field + ' "/&gt;')
              .appendTo(container).kendoAutoComplete({
                  dataSource: viewModel.suggestedVendorDropDownDataSource,
                  dataTextField: "SuggestedVendor",
                  dataValueField: "SuggestedVendor"
          });
  
        var autoComplete =$("#selectedItem").data("kendoAutoComplete");
        autoComplete.list.width(300);
  
      }
  </code></pre>