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
>
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);
}
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