Может ли меню Kendo содержать комбинированный список в качестве элемента меню
Я написал по этому вопросу, как использовать комбинированный список с ограниченным списком в меню пользовательского интерфейса kendo, но пренебрегал размещением кода, и его за это бросили. Итак, я постараюсь объяснить свои вопросы здесь ясно.
(1) Может ли кендо-меню поддерживать использование комбинированного списка для пункта меню? (2) Если ответ (1) положительный, у меня возникает вопрос, как это сделать.
Я создал jsfiddle здесь: меню Kendo с пунктом меню combobox
Если я определю свое меню кендо следующим образом:
HTML
<ul id="menu"></ul>
JS
$(document).ready(function() {
var menuItems = [{text: "Apple", url: "http://www.google.com"},
{text: "Banana", url: "http:\/www.google.com"},
{text: "Orange", url: "http://www.google.com"}];
var menuData = [{text: "Fruits", items: menuItems},
{text: "Site", url: "http://www.google.com"},
{text: "Location", url: "http://www.google.com"}];
var menu = $("#menu").kendoMenu({ dataSource: menuData });
});
Я хотел бы, чтобы первый элемент, "Фрукты", который будет отображаться как стандартный элемент меню в раскрывающемся выше коде, отображался как комбинированный список (ограниченный списком элементов данных) и отображать текст из какой бы элемент списка не был выбран пользователем. Источник данных меню является динамическим, поэтому я не думаю, что могу указать это в html. Но я искал форумы по кендо, демонстрации и stackru и не могу найти подходящих примеров. Требуется, чтобы меню функционировало следующим образом. Если выбрано "Apple", меню будет выглядеть так:
Apple, V | Сайт | Место нахождения
Если пользователь щелкнет раскрывающийся список и выберет "Банан", меню будет выглядеть так:
Банан V | Предметы | инвентарь
--Pat
1 ответ
На самом деле не существует отличного способа использования только виджета "Меню", потому что по какой-то причине виджет "Меню" не предназначен для отслеживания базовых элементов данных.
- Переданный в
dataSource
не превращается в настоящийkendo.data.DataSource
как и любой другой виджет. - Пункты меню не получают
uid
вернуться к их элементу данных, из которого они были созданы, так как он не используетDataSource
- Нет способа предоставить шаблон для отображения пункта меню.
Тем не менее, вы можете сортировать грубое изменение текста элемента с помощью jQuery следующим образом (обновленный jsFiddle).
Альтернативой может быть попытка поместить фактический виджет DropDown рядом с меню (может быть, поместить его слева от меню?) И пройти через то, чтобы CSS выглядел так же, как меню.
Другой альтернативой может быть создание полностью настраиваемого виджета, который затем мог бы выводить элементы с той же структурой элементов и классами CSS, что и виджет "Меню", но фактически связывал его с источником данных. Затем вы можете обновить имя родительского элемента в источнике данных до текста выбранного элемента и получить обновление элемента пользовательского интерфейса в соответствии с MVVM.
Это довольно общее объяснение, я знаю, но я думаю о чем-то похожем на то, что было сделано для пользовательского меню корзины покупок в старом / больше не поддерживаемом образце Music Store, который вы можете найти здесь:
Образец музыкального магазина Kendo (см. Пункт "Корзина" в правой части меню).
Документация для реализации этого пользовательского виджета корзины покупок.