DataValueField отсутствует в кендо Автозаполнение

Question

Я использую управление автозаполнением kendo в своем проекте MVC (фильтрация на стороне сервера). Он правильно отображает данные. Но проблема в том, что когда я отправляю данные на сервер, идентификатор значения автозаполнения отсутствует. Потому что в этом элементе управления нет атрибута DataValueField. Ниже код, который я использую

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

Как я могу отправить значение на сервер.

Спасибо..

Answer 1

Поскольку AutoComplete помощник не имеет DataValueField атрибут, вам нужно использовать другой помощник HTML в качестве обходного пути для передачи другого значения свойства. Предположим, что ваша viewmodel имеет эту настройку:

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

    // other properties
}

Вы можете создать скрытое поле или текстовое поле только для чтения для хранения свойства идентификатора, упомянутого выше, в представлении Razor:

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

Затем назначьте его value Атрибут из клиентского скрипта путем создания функции, которая читает индекс элемента из помощника автозаполнения:

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

И, наконец, установите имя функции, привязанное к Events атрибут:

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

Следуя этой настройке, PatientID свойство должно иметь идентификатор выбранного значения из помощника автозаполнения, когда пользователь отправил форму.

Answer 2

Вы можете получить доступ к dataItem в javascript, а затем получить доступ к свойству value. Если вы позвонитеmyKendoAutoCompleteControl.dataItem()он предоставит вам текущий выбранный элемент в виде массива пар ключ/значение.

      $("#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

Answer 3

Это известное ограничение AutoCompleteвиджет. Один из способов обойти это - добавить атрибут через шаблон для хранения значения данных в элементе управления:

      @(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>")
)

Это предполагает ID и Name являются свойствами объекта пациента.

Тогда вы сможете справиться с Select событие для получения сохраненного значения идентификатора при выборе:

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

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