Добавить пользовательские атрибуты data-* в Kendo UI AutoComplete или ComboBox
В настоящее время использую интерфейс Kendo AutoCompleteFor()
а также ComboBoxFor()
помощник.
Заметив, что они генерируют / рендерит кучу <li>
s.
Как добавить дополнительный кастом data-* attributes
к тем <li>
s?
Вот текущий сценарий:
- Пользователь начинает печатать вещи в AutoCompleteFor
- Вызов ajax запускается для получения некоторых данных, связанных с тем, что набрал пользователь.
- Полученные результаты превращаются в
IEnumerable<SelectListItem>
, - Результат затем отправляется в 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...
}
Итак, это все.