Bind ID as a value with text in autocomplete

Question

I use Kendo autocompletion as I fill in the text as well as using text analysis data, But I want to use ID as Value to send it on the server side in the Submit form.

I use this Kendo editor, but cannot bind "CustomerID" as the value of Autocomplete ::

@(Html.Kendo().AutoComplete() .Name("Customers") .DataTextField("CustomerShortName") .Value("CustomerID") .Filter("contains") .MinLength(3) .Template("<label>${ data.CustomerShortName }</label>") .HtmlAttributes(new { disabled="disabled" }) .DataSource(source => { source.Read(read => { read.Action("GetCustomers", "GetData"); }) .ServerFiltering(true); }) ) 

Please help me with this as soon as possible.

Answer 1

I did it differently, I made a hidden type for its ID value, that is, for "CustomerID" as

 @Html.HiddenFor(x=>x.CustomerID) 

and when changing the auto completion of kendo, I wrote some event like,

  @(Html.Kendo().AutoComplete() .Name("Customers") .DataTextField("CustomerShortName") .Events(events => events.Select("CustomerSelect")) .Filter("contains") .MinLength(3) .Template("<label>${ data.CustomerShortName }</label>") .HtmlAttributes(new { disabled="disabled" }) .DataSource(source => { source.Read(read => { read.Action("GetCustomers", "GetData"); }) .ServerFiltering(true); }) ) 

And for this I use the Javascript function as ::

 <script> //Set CustomerID function CustomerSelect(e) { var DataItem = this.dataItem(e.item.index()); $("#CustomerID").val(DataItem.CustomerID); } </script> 

And this is the value that I use when submitting the form. Thank you for your help.

Answer 2

This cannot be done using autocomplete. The latter is a regular text block with an attached list of sentences. You can use another .eg ComboBox or DropDownList widget. Both allow you to have text and meaning.

Answer 3

auto-complete value field binding is not possible in alternative way - combobox

 @(Html.Kendo().ComboBox() .Name("Combobox") .DataValueField("Value") .DataTextField("Text") .Filter(FilterType.Contains) .HtmlAttributes(new { value = propertyValue }) .DataSource(source => { source.Read(read => { read.Action(action, controller); //Set the Action and Controller name }) .ServerFiltering(true);) //If true the DataSource will not filter the data on the client. }) //, new { maxResults = 10 } .AutoBind(true).HighlightFirst(true).HtmlAttributes(htmlAttributes).Enable(true) .Events(e => e.Change("function(e){ if(ComboOnChange(e)){" + onChange + "(e);} }")); 

change event is the javascript function that you want to call when the value in combobox changes.

Answer 4

You cannot bind only to IDs, but you can bind to a selected object using MVVM bindings. From there you can access the ID.

HTML

  <div id="view"> <div> <h4 data-bind="text: selectedCustomer.CustomerID"></h3> </div> <span> Select Customer: </span> <input data-role="autocomplete" data-value-primitive="false" data-text-field="CustomerShortName" data-bind="value: selectedCustomer, source: Customers" /> </div> 

javaScript

 var viewModel = kendo.observable({ Customers: [ { CustomerID:"1", CustomerShortName: "Customer One" }, { CustomerID:"2", CustomerShortName: "Customer Two" }, { CustomerID:"3", CustomerShortName: "Customer Three" }, ], selectedCustomer: undefined, }); var view = $("#view"); kendo.bind(view, viewModel); 

A working example can be found here http://jsbin.com/vebiniqahi/1/edit?html,js,output