剑道菜单是否可以包含组合框作为菜单项

Question

我在How to use a restricted to list combobox in a kendo ui menu 上发布了关于此问题的帖子，但忽略了发布代码并因此受到抨击。因此，我将尝试在这里清楚地解释我的问题。

(1) kendo-menu 能否支持对菜单项使用组合框？ (2) 如果对 (1) 的回答是肯定的，那么我有一个关于如何做的问题。

我在这里创建了一个 jsfiddle：Kendo menu with combobox menu item

如果我将剑道菜单定义如下：

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 中指定它。但我搜索了剑道论坛和演示以及 stackoverflow 并找不到任何相关示例。要求菜单功能如下。如果选择“Apple”，菜单将显示为：

苹果 v |网站 |位置

如果用户点击下拉菜单并选择“香蕉”，菜单将显示为：

香蕉 v |项目 |库存

--拍拍

Answer 1

仅使用 Menu 小部件并没有真正的好方法，因为出于某种原因，Menu 小部件并非旨在实际跟踪基础数据项。

• 传入的dataSource 不会像其他所有小部件一样转换为真正的kendo.data.DataSource。
• 菜单项不会将 uid 返回到创建它们的数据项，因为它不使用 DataSource
• 无法提供模板来呈现菜单项。

但是，您可以使用 jQuery like this (updated jsFiddle) 强制更改元素文本。

---

另一种方法是尝试在菜单旁边放置一个实际的 DropDown 小部件（也许将其浮动在菜单旁边？）并经历使 CSS 看起来与菜单相同的痛苦。

---

另一种选择是制作一个完全自定义的小部件，然后它可以输出具有与菜单小部件相同的元素结构和 css 类的元素，但实际上将其绑定到数据源。然后，您可以将数据源中父项的名称更新为选定项的文本，并更新 UI 元素以与 MVVM 匹配。

我知道，这是一个非常笼统的解释，但我正在考虑类似于在旧的/不再支持的音乐商店示例中为自定义购物车菜单所做的事情，您可以在此处找到：

Kendo Music Store Sample (see the 'shopping cart' item on the right of the menu).

Documentation for the implementation of that custom shopping cart widget.