DataValueField Missing in kendo Autocomplete

Question

I am using kendo autocomplete control in my MVC project(Server side filtering).It list the data correctly. But the problem is when i submit the data to server the autocomplete value id is missing. Because there is no DataValueField attribute in this control. The bellow code is i am using

@(Html.Kendo().AutoComplete()
    .Name("Patient")
    .Placeholder("Enter Name")
    .DataTextField("TextField")
    .Filter("contains")
    .MinLength(3)
    .HtmlAttributes(new { style = "width:100%" })
    .DataSource(source =>
    {
      source.Read(read =>
      {
         read.Action("function", "controller")
         .Data("onAdditionalData");
      })
         .ServerFiltering(true);
  })
)

How can i send the value to the server.

Thank you..

Answer 1

Since AutoComplete helper doesn't have DataValueField attribute, you need to use other HTML helper as workaround to pass another property value. Suppose your viewmodel has this setup:

public class ViewModel
{
    // ID property example
    public int PatientID { get; set; }

    // other properties
}

You can create a hidden field or read-only textbox to store ID property mentioned above inside Razor view:

@Html.HiddenFor(m => m.PatientID)

Then, assign its value attribute from client-side script by creating a function which reads item index from autocomplete helper:

function selectPatient(e) {
    var item = this.dataItem(e.item.index());
    $('#PatientID').val(item.PatientID);
}

And finally set the function name bound for Events attribute:

@(Html.Kendo().AutoComplete()
    .Name("Patient")
    .Placeholder("Enter Name")
    .DataTextField("TextField")
    .Filter("contains")
    .MinLength(3)
    .HtmlAttributes(new { style = "width:100%" })

    // add this line
    .Events(ev => ev.Select("selectPatient"))

    .DataSource(source => {
        source.Read(read => {
            read.Action("function", "controller")
            .Data("onAdditionalData");
        })
        .ServerFiltering(true);
    })
)

By following this setup, the PatientID property should have ID of the selected value from autocomplete helper when user submitted the form.

Answer 2

This is a known limitation of the AutoComplete widget. One way around it is to add an attribute via a template to store the data value on the control:

@(Html.Kendo().AutoComplete()
    .Name("Patient")
    .Placeholder("Enter Name")
    .DataTextField("TextField")
    .Filter("contains")
    .MinLength(3)
    .HtmlAttributes(new { style = "width:100%" })
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("function", "controller").Data("onAdditionalData");
        })
        .ServerFiltering(true);
    })
    .Events(events => events.Select("onPatientSelected"))
    .Template("<span data-recordid=\"#= data.ID #\"> #: data.ID # &ndash; #: data.Name #</span>")
)

This assumes ID and Name are properties of the patient object.

Then you can handle the Select event to get the stored ID value when a selection is made:

function onPatientSelected(arg) {
    var selectedPatientID = arg.item.find('span').data('recordid')

    // do whatever with the ID, such as sending it to the server
}

Answer 3

You can access the dataItem in javascript, and then access the value property. If you call myKendoAutoCompleteControl.dataItem() it will give you the currently selected item as an array of key/value pairs.

$("#myKendoAutoCompleteId").kendoAutoComplete({
    dataTextField: "Text",
    dataValueField: "Value",
    dataSource: mydatasource,
    filter: "startswith",
    placeholder: "Search..."
    //separator: ", "
});

var  myKendoAutoCompleteControl = 
$("#myKendoAutoCompleteId").data("kendoAutoComplete");

// once user has selected an item in the kendo auto complete control, you 
can access the selected item.
var dataItemArray = myKendoAutoCompleteControl.dataItem();
var value = dataItemArray.Value