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.

score 20 · Accepted Answer · answered Nov 27 '13 at 15:10

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.

Im using AutoCompleteFor(), how to show the text field on in if from backend i am getting CustomerID instead of CustomerShortName — Jofy Baby, Feb 18 '19 at 19:44

score 3 · Answer 2 · edited Aug 14 '18 at 13:08

3

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

}

edited Aug 14 '18 at 13:08

georgeawg

48,608
13
72
95

answered Aug 14 '18 at 12:46

Mahdi Ahmadi

441
4
12

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 Sep 28 '21 at 12:20
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. – jrichview Sep 28 '21 at 12:28

score 1 · Answer 3 · answered Nov 27 '13 at 09:52

1

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.

answered Nov 27 '13 at 09:52

Atanas Korchev

30,562
8
59
93

score 1 · Answer 4 · answered Nov 27 '13 at 15:59

the binding of value field in Autocomplete is not possible alternate way is 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);} }"));

the change event is the javascript function which you want to call on change of value in combobox.

score 1 · Answer 5 · answered Jul 23 '15 at 02:00

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

Bind ID as Value with Text in Autocomplete

5 Answers5