Добавить пользовательские атрибуты data-* в Kendo UI AutoComplete или ComboBox

В настоящее время использую интерфейс Kendo AutoCompleteFor() а также ComboBoxFor() помощник.

Заметив, что они генерируют / рендерит кучу <li>s.

Как добавить дополнительный кастом data-* attributes к тем <li>s?

Вот текущий сценарий:

  1. Пользователь начинает печатать вещи в AutoCompleteFor
  2. Вызов ajax запускается для получения некоторых данных, связанных с тем, что набрал пользователь.
  3. Полученные результаты превращаются вIEnumerable<SelectListItem>,
  4. Результат затем отправляется в Json. Json(result, JsonRequestBehavior.AllowGet)

Моя цель - добавить один или несколько дополнительных data-* attribute каждому из них <li> генерировать строки, чтобы я мог получить эти данные-* в onChange() событие.

Как этого добиться?

Кроме того, я знаю, что я мог бы создать свой собственный .Template() и, возможно, выполнить мою задачу, но мне было любопытно, если кто-нибудь знает другой способ сделать это, то есть необходимость создания собственного шаблона.

Искренне

1 ответ

Решение

Хорошо, я нашел решение; Я поделюсь этим здесь в случае, если кому-то будет интересно.

Вместо того, чтобы преобразовать мои полученные результаты в IEnumerable<SelectListItem>Я просто превращаю это в IEnumerable<CustomDTO>,

CustomDTO класс выглядит так:

public class CustomDTO
{
     public int Value { get; set; }
     public string Text { get; set; }
     public int Age { get; set; }
     //Add whatever more properties you think you’ll need.
}

В моем контроллере я делаю следующее:

var result = _myService.GetData().ToList();
return Json(result, JsonRequestBehavior.AllowGet);

куда GetData() возвращает IEnumerable<CustomDTO>,

В моем представлении у меня есть AutoCompleteFor() контроль, к которому я привязываю сторону клиента .Events(x => x.Select("onSelect") обработчик события.

Обработчик определяется так:

function onSelect(e)
{
    if (e.item == null) return;
    var dataItem = this.dataItem(e.item.index());
    var valueAttribute = dataItem.Value;
    var textAttribute = dataItem.Text;
    var ageAttribute = dataItem.Age;    //This is how I get my additional value
    //...code...
}

Итак, это все.

Другие вопросы по тегам