Displaying Dropdownlist Horizontally

4 posts, 0 answers
  1. Tristan
    Tristan avatar
    2 posts
    Member since:
    Jul 2017

    Posted 26 Sep Link to this post

    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

  2. Neli
    Admin
    Neli avatar
    28 posts

    Posted 27 Sep Link to this post

    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
    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.
  3. Tristan
    Tristan avatar
    2 posts
    Member since:
    Jul 2017

    Posted 28 Sep in reply to Neli Link to this post

    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.
  4. Magdalena
    Admin
    Magdalena avatar
    463 posts

    Posted 29 Sep Link to this post

    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
    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.
Back to Top