Question

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

（1）kendo菜单是否支持使用组合框作为菜单项？（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 });

}）;

我想要第一个项目'Fruits'，它将被渲染为上面代码中的标准菜单项下拉列表，呈现为组合框（仅限于其数据项列表）并显示来自任何列表项的文本由用户选择。菜单数据源是动态的，所以我认为我不能在html中指定它。但我搜索了kendo论坛和演示以及stackoverflow，但找不到任何相关的例子。要求菜单功能如下。如果选择“Apple”，菜单将显示为：

Apple v |网站|位置

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

香蕉v |项目|库存

- 八

Answer 1

仅使用菜单小部件并不是一个很好的方法，因为出于某种原因，“菜单”小部件并非旨在实际跟踪基础数据项。

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

但是你可以用jQuery like this (updated jsFiddle)来强制改变元素文本。

另一种方法是尝试将一个实际的DropDown小部件放在菜单旁边（可能会将它漂浮在菜单旁边？）并完成让CSS看起来与菜单相同的痛苦。

另一种选择是创建一个完全自定义的小部件，然后可以输出具有与Menu小部件相同的元素结构和css类的元素，但它实际上绑定到DataSource。然后，您可以将数据源中父项的名称更新为所选项的文本，并使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.

Kendo菜单可以包含组合框作为菜单项

1 个答案: