1

I posted regarding this issue How to use a restricted to list combobox in a kendo ui menu but neglected to post code and was slammed for it. So, I am going to try to explain my questions clearly here.

(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: Kendo menu with combobox menu item

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 });

});

I would like 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. 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 and selects 'Banana', the menu would appear as:

Banana v | Items | Inventory

--Pat

Community
  • 1
  • 1
pjtallman
  • 23
  • 4

1 Answers1

0

There isn't really a great way with just a Menu widget because for some reason the Menu widget isn't designed to actually track the underlying data items.

  • The passed in dataSource isn't converted to a real kendo.data.DataSource like every other widget.
  • Menu items don't get a uid back to their data item they were created from, since it doesn't use a DataSource
  • There is no way to provide a template to render a menu item from.

However you can sort of brute-force the change of the element text with jQuery like this (updated jsFiddle).

An alternative would be to try to put an actual DropDown widget next to the menu (maybe float it left next to the menu?) and go through the pain of making the CSS look the same as the menu.

Another alternative would be to make a completely custom widget, which could then output elements with the same element structure and css classes as the Menu widget, but have it actually bound to a DataSource. You could then update the name of the parent item in the datasource to the selected item's text, and have the UI element update to match with MVVM.

That is a pretty general explanation, I know, but I'm thinking of something similar to what was done for the custom shopping cart menu in the old/no-longer-supported Music Store sample, which you can find here:

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.

CodingWithSpike
  • 42,906
  • 18
  • 101
  • 138