Bind ID as Value with Text in Autocomplete

Question

I am using Kendo Autocomplete, In that I am filling the Text and also using that text parse data, But I want to use ID as Value to send it on server side on Form Submit.

I am using this Kendo Editor But Can't able to Bind the "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 on this ASAP.

Answer 1

The marked solution doesn't work if you clear selected, I solved this problem by this solution:

$().ready(function () {

    $("#Customers").change(function () {
        var au = $("#Customers").data("kendoAutoComplete");
        var selected = au.listView.selectedDataItems();
        if (selected.length > 0) {
             $("#CustomerID").val(selected[0].CustomerID);
        } else {
             $("#CustomerID").val("");
        }
    });

}

Answer 2

You can't bind to just the ID but you can bind to the selected object using the MVVM bindings. From there you will be able access the ID.

The 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>

The 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

Answer 3

I have done this in another way, I have made a Hidden type for its ID value i.e. for "CustomerID" as

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

and on change of kendo Autocomplete I have written some event as,

    @(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 that I am using Javascript Function as::

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

And that value I am using While Submitting the Form. Thanks for your help.

Answer 4

This can't be done with the AutoComplete. The latter is just a regular textbox with an attached suggestion list. You can use a different widget .e.g. ComboBox or DropDownList. Both allow having text and value.