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.

Solution 1

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.

Solution 2

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("");
        }
    });

}

Solution 3

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.

Solution 4

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

View more solutions

Comments

[Jofy Baby]

Im using AutoCompleteFor(), how to show the text field on in if from backend i am getting CustomerID instead of CustomerShortName

[jrichview]

This could use some more verbal explanation, and it is very useful. The control has a Select event to notify when the user selects an item from the list. However, once they have done so, they can always edit the control again. So the Change event is the only way to know that the control is no longer valid. This is needed, for example, if you want to enable/disable a submit button when user has a valid selection.

[jrichview]

The reason the above is so helpful: if you hook the Select event to know when the user has selected a value, it is IMMEDIATELY followed by a change event. So you can't just assume all change events are associated with user typing within the control. In that one case the Change event indicates the user has selected a value. Thus the control is "valid" in some cases of the Change event and NOT "valid" in other cases. The above code shows you how to determine which case is which.