Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 21 Mar 2014 15:46 by Stephen
Stephen
Created on: 17 Mar 2014 14:42
Category: Kendo UI for jQuery
Type: Feature Request
1
Make the Menu control auto-collapsable based on a specified width
It would be great if the Menu control could be auto-collapsed to fit a specified with.  If you've got more menu items than the width of your page can fit, it would be nice if the end menu items (or even menu items specified with a flag) would collapse to one nested menu item.  This should be dynamic as well.  Here is my specific example:

I've got my menu setup with controller actions attached.  Based on system permissions only the menu items the logged in user has access to will show up on the menu.  This works fine.  

A couple of the roles though have access to everything and when the menu shows all of the possible items, the menu wraps to 3 lines since it is wider than the width of my layout.  What I need is a way to auto-collapse the menu items at the end of the menu (down to one nested menu item) in the cases where it would wrap past 1 line.
2 comments
Stephen
Posted on: 21 Mar 2014 15:46 
Thank you but this is not exactly what I was looking for.  What I need I don't believe can be solved with CSS and responsive design.  What I am talking about is when the number of items in the Menu control are more than what fits in the width of the site, not the width of the browser.  If my site is set to 1000px wide and I have 15 menu items, the menu will wrap to multiple lines regardless of responsive design.

What I am looking for is with a set menu width, having the menu items nest differently if the number of menu items is wider than the set menu width.

For instance lets just say I have 5 menu items to keep it simple:

ITEM1     ITEM2     ITEM3     ITEM4     ITEM5

Due to the width of the area containing this menu, lets say only 3 of them can show on one line and the others get wrapped to a second line.  What I would like to happen at that point is the menu to look like this:

ITEM1    ITEM2    OTHER

In this case OTHER would be a dropdown that contains ITEM3, ITEM4, and ITEM5.

Ideally I would be able to specify the width of the menu, the text of the new collapsed menu item, and some kind of priority field which would be used to determine which menu items would remain on the bar and which would be collapsed.

Does this clarify it better?
ADMIN
Telerik Admin
Posted on: 21 Mar 2014 15:13 
This is possible if you use the menu widget together with Twitter Bootstrap as illustrated on this demo:
http://demos.telerik.com/kendo-ui/bootstrap/ (resize the page to see the effect)
Create an account Log In
View
Type
Status
Category