Menu Orientation Problems

3 posts, 1 answers
  1. Bob
    Bob avatar
    24 posts
    Member since:
    Dec 2014

    Posted 17 Jun 2015 Link to this post

    I am having problems with the orientation of my menu.

    No matter what I've tried, I cannot get it to be in a vertical orientation, it is always horizontal.

    Here is my code:

    HTML:

    <div id="MyMenuFormat" hidden="hidden">
        @SSRSAdministrationV2.Globals.GlobalVariables.MyMenuData
    </div>
     
    <td style="width: 450px; text-align: left; border-style: solid; border-width: thin">
        <div id="MyMenu" style="overflow-x: scroll; overflow-y: scroll; height: 550px; display: inline-block; width: 450px;"></div>
    </td>
    MENU CODE:

    var MyMenuString = $('#MyMenuFormat').text();
    var MyMenuData = eval(MyMenuString);
     
    $(document).ready(function () {
        $('#MyMenu').kendoMenu(
            {
                orientation: "vertical",
                dataSource: MyMenuData,
                select: onMySelect
            }
            );
    });
     
    function onMySelect(e) {
        var item = $(e.item),
            menuElement = item.closest(".k-menu"),
            dataItem = this.options.dataSource,
            index = item.parentsUntil(menuElement, ".k-item").map(function () {
                return $(this).index();
            }).get().reverse();
     
        index.push(item.index());
     
        for (var i = -1, len = index.length; ++i < len;) {
            dataItem = dataItem[index[i]];
            dataItem = i < len - 1 ? dataItem.items : dataItem;
        }
     
        alert(dataItem.text + "    " + dataItem.value);
    }
    JSON:

    MyMenuData = "[
        {value:0,text:"Item 1"},
        {value:1,text:"Item 2"},
        {value:2,text:"Item 3"},
        {value:3,text:"Item 4"},
        {value:4,text:"Item 5"},
        {value:5,text:"Item 6"},
        {value:6,text:"Item 7"},
        {value:7,text:"Item 8"},
        {value:8,text:"Item 9"},
        {value:9,text:"Item 10"},
        {value:10,text:"Item 11"},
        {value:11,text:"Item 12"},
        {value:12,text:"Item 13"},
        {value:13,text:"Item 14"},
        {value:14,text:"Item 15"},
        {value:15,text:"Item 16"},
        {value:16,text:"Item 17"},
        {value:17,text:"Item 18"},
        {value:18,text:"Item 19"},
        {value:19,text:"Item 20"},
        {value:20,text:"Item 21"},
        {value:21,text:"Item 22}
    ]"

    I am at my wits end. It's probably something really simple - I just can't see it.

     

    Anyone have any ideas?

    TIA,

    Bob




  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 19 Jun 2015 Link to this post

    Hi Bob,

    The issue is caused by you are initializing Kendo UI Menu from <div> element while it should be initialized from <ul> element:
    <td style="width: 450px; text-align: left; border-style: solid; border-width: thin">
        <ul id="MyMenu" style="overflow-x: scroll; overflow-y: scroll; height: 550px; display: inline-block; width: 450px;"></ul>
    </td>


    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Bob
    Bob avatar
    24 posts
    Member since:
    Dec 2014

    Posted 22 Jun 2015 in reply to Iliana Nikolova Link to this post

    Thank you so much. That it id.

     

    Bob

Back to Top