This is a migrated thread and some comments may be shown as answers.

Menu Orientation Problems

2 Answers 36 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 2
Bob asked on 17 Jun 2015, 03:59 PM

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 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Nikolova
Telerik team
answered on 19 Jun 2015, 02:53 PM
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!
 
0
Bob
Top achievements
Rank 2
answered on 22 Jun 2015, 04:25 PM

Thank you so much. That it id.

 

Bob

Tags
Menu
Asked by
Bob
Top achievements
Rank 2
Answers by
Iliana Nikolova
Telerik team
Bob
Top achievements
Rank 2
Share this question
or