Menu Orientation Problems

[Bob]

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

[Iliana Dyankova]

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

 

 

[Bob]

Thank you so much. That it id.

 

Bob