I'm trying to get a basic Kendo Menu to display the child elements horizontally instead of as a dropdown, to keep the items on one single line below the menu. As of yet, I've not found any method built into the Menu to accomplish this.
Attempting to manipulate the menu via CSS has not worked either. In theory, I should be able to change the "display: block" to "display: inline"; when I do this, however, the style on load comes out as "display: none". This is the case whether done server-side while building the menu, or client-side with jquery.
The functionality I'm looking for shouldn't be too difficult to accomplish. Here's a basic example: Horizontal Dropdown
3 Answers, 1 is accepted
0
Hi Tristan,
Kendo UI Menu does not support such behavior, so custom implementation is needed.
One of the possibilities is to display custom content for the sub-menu instead of the menu items, as it is done for the 'Stores' in the following demo.
Attached could be found Dojo example, where the horizontal sub-menu is displayed using css in Jquery mouseenter and mouseleave events.
Regards,
Neli
Progress Telerik
Kendo UI Menu does not support such behavior, so custom implementation is needed.
One of the possibilities is to display custom content for the sub-menu instead of the menu items, as it is done for the 'Stores' in the following demo.
Attached could be found Dojo example, where the horizontal sub-menu is displayed using css in Jquery mouseenter and mouseleave events.
Regards,
Neli
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.
0
Tristan
Top achievements
Rank 1
Rank 1
answered on 28 Sep 2017, 06:35 PM
Thank you for your quick reply. I ran the Dojo example, but the dropdowns still will not format horizontally. I checked the events in the DOM explorer, and while the mouseleave() correctly changes the display to none, mouseenter() does not change it to -webkit-inline-box. The code comes across with "display: block", which seems to be the Kendo Grid default behavior.
I had tried something similar on the dataBound event, by removing the attribute and replacing it; I was able to remove it, but it defaulted to "display: none". I'm running IE11 on Windows 7, if that helps.
I had tried something similar on the dataBound event, by removing the attribute and replacing it; I was able to remove it, but it defaulted to "display: none". I'm running IE11 on Windows 7, if that helps.
0
Hi Tristan,
We have modified the sample to work properly cross browsers. We set displaying items as inline-block elements. We have also added a custom javaScript to dynamically calculated submenu width, that depends on the entire menu width. Hoping the solution will meet your expectations.
Do not hesitate to contact us if you have other questions.
Regards,
Magdalena
Progress Telerik
We have modified the sample to work properly cross browsers. We set displaying items as inline-block elements. We have also added a custom javaScript to dynamically calculated submenu width, that depends on the entire menu width. Hoping the solution will meet your expectations.
Do not hesitate to contact us if you have other questions.
Regards,
Magdalena
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.