Может ли меню 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 (см. Пункт "Корзина" в правой части меню).

Документация для реализации этого пользовательского виджета корзины покупок.

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