or
<
div
id
=
"example"
class
=
"k-content"
>
<
div
id
=
"megaStore"
>
<
ul
id
=
"kendoMenu"
>
<
li
>Products
<
ul
>
<
li
>Furniture
<
ul
>
<!-- moving the UL to the next line will cause an IE7 problem -->
<
li
>Tables & Chairs</
li
>
<
li
>Sofas</
li
>
<
li
>Occasional Furniture</
li
>
<
li
>Childerns Furniture</
li
>
<
li
>Beds</
li
>
</
ul
>
</
li
>
<
li
>Decor
<
ul
>
<!-- moving the UL to the next line will cause an IE7 problem -->
<
li
>Bed Linen</
li
>
<
li
>Throws</
li
>
<
li
>Curtains & Blinds</
li
>
<
li
>Rugs</
li
>
<
li
>Carpets</
li
>
</
ul
>
</
li
>
<
li
>Storage
<
ul
>
<!-- moving the UL to the next line will cause an IE7 problem -->
<
li
>Wall Shelving</
li
>
<
li
>Kids Storage</
li
>
<
li
>Baskets</
li
>
<
li
>Multimedia Storage</
li
>
<
li
>Floor Shelving</
li
>
<
li
>Toilet Roll Holders</
li
>
<
li
>Storage Jars</
li
>
<
li
>Drawers</
li
>
<
li
>Boxes</
li
>
</
ul
>
</
li
>
<
li
>Lights
<
ul
>
<!-- moving the UL to the next line will cause an IE7 problem -->
<
li
>Ceiling</
li
>
<
li
>Table</
li
>
<
li
>Floor</
li
>
<
li
>Shades</
li
>
<
li
>Wall Lights</
li
>
<
li
>Spotlights</
li
>
<
li
>Push Light</
li
>
<
li
>String Lights</
li
>
</
ul
>
</
li
>
</
ul
>
</
li
>
<
li
>Stores
<
ul
>
<
li
>
<
div
id
=
"template"
class
=
"k-content"
style
=
"padding: 10px;"
>
<
h2
>
Around the Globe</
h2
>
<
ol
>
<
li
>United States</
li
>
<
li
>Europe</
li
>
<
li
>Canada</
li
>
<
li
>Australia</
li
>
</
ol
>
<
img
src
=
"../../content/web/menu/map.png"
alt
=
"Stores Around the Globe"
/>
<
button
class
=
"k-button"
>
See full list</
button
>
</
div
>
</
li
>
</
ul
>
</
li
>
<
li
>Blog </
li
>
<
li
>Company </
li
>
<
li
>Events </
li
>
<
li
disabled
=
"disabled"
>News </
li
>
</
ul
>
</
div
>
</
div
>
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
$("#kendoMenu").kendoMenu();
});
$(document).ready(
function
() {
var
Priority = [
{ PriorityId:
"1"
,
Action:
"Lorem Ipsum Dolor Sit"
,
Completed:
true
,
PersonID:
"2"
,
PriorityDate:
"02/22/12"
},
{ PriorityId:
"2"
,
Action:
"Lorem Ipsum Dolor Sit"
,
Completed:
false
,
PersonID:
"2"
,
PriorityDate:
"02/23/12"
},
{ PriorityId:
"3"
,
Action:
"Lorem Ipsum Dolor Sit"
,
Completed:
true
,
PersonID:
"2"
,
PriorityDate:
"02/24/12"
},
{ PriorityId:
"4"
,
Action:
"Lorem Ipsum Dolor Sit"
,
Completed:
false
,
PersonID:
"2"
,
PriorityDate:
"02/25/12"
},
{ PriorityId:
"5"
,
Action:
"Lorem Ipsum Dolor Sit"
,
Completed:
true
,
PersonID:
"2"
,
PriorityDate:
"02/26/12"
},
{ PriorityId:
"6"
,
Action:
"Lorem Ipsum Dolor Sit"
,
Completed:
false
,
PersonID:
"2"
,
PriorityDate:
"02/27/12"
},
];
var
today =
new
Date();
$(
"#kendoCalendar"
).kendoCalendar({
value: today,
depth:
"month"
,
format:
"dd/MM/yyy"
,
dataSource: Priority,
month: {
content:
'<div class="custom"><#= Action #></div>'
},
change:
function
(e) {
var
title =
"Today's Top Priority"
;
var
url =
"top-tasks-add.aspx"
var
win = $(
".modal-window"
);
if
(!win.data(
"kendoWindow"
)) {
// window not yet initialized
win.kendoWindow({
content: url,
title: title,
draggable:
true
,
modal:
true
,
resizable:
false
,
}).data(
"kendoWindow"
).open().center();
}
else
{
// reopening window
win.data(
"kendoWindow"
)
.refresh(url)
// request the URL via AJAX
.title(title)
.open()
// open the window
.center();
}
}
});
});
<
div
id
=
"lefttabstrip"
>
<
ul
class
=
"Home"
>
<
li
class
=
"TabAct k-state-active"
>All Rules</
li
>
</
ul
>
<
div
id="homediv>
Home text
</
div
>
<
div
id="mycommondiv>
some controls here
</
div
>
<
div
>