I have a menu question:
(1) Can the kendo-menu support the use of a combobox for a menu item?
(2) If the answer is yes to (1), then I have a question as to how to do it.
I've created a jsfiddle here: http://jsfiddle.net/pjtallman/rg501upb/7/
If I define my kendo menu as follows:
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 });
});
This would display a menu such as:
Fruits v | Site | Location
Users would expand the 'Fruits' menu to see a list of sub-menu items (e.g. Apple, Banana, and Orange).
Our requirements are to have the first item, 'Fruits', which will be rendered as a standard menu item drop down in the above code, to be rendered as a combobox (restricted to its list of data items) and to display the text from whatever list item is selected by the user. So, there would be no 'Fruits' text displayed, the menu item would display whatever item's text was selected from the combobox.
The menu datasource is dynamic so I don't think I can specify this in the html. But I have searched the kendo forums and demos and stackoverflow and can't find any relevant examples. The requirement is for the menu to function as follows. If 'Apple' is selected, the menu would appear as:
Apple v | Site | Location
If the user clicks the dropdown icon and selects 'Banana', the menu would appear as:
Banana v | Items | Inventory
Thanks,
Chad