First Context Menu
HTML Code
Taken from /Partial/ContextMenu.html
<ul id="itemcontextmenu">
<li>
<span class="k-edit k-icon"></span>Edit
</li>
<li class="k-ext-menu-separator">
<hr />
</li>
<li>
<span class="k-delete k-icon"></span>Delete
</li>
</ul>
JavaScript Code
Taken from /Scripts/KendoUiExt.ContextMenu.js
$("#itemcontextmenu").kendoExtContextMenu({
targets: "#contextMenuTarget, #treeview .k-item .furniture, #treeview .k-item .decor",
itemSelect: function (e) {
kendo.ui.ExtAlertDialog.show({
title: "Selection",
message: kendo.format('You selected: "{0}" on "{1}"',
$(e.item).text().trim(),
$(e.target).text()),
icon: "k-ext-information"
});
}
});
Second Context Menu
HTML Code
Taken from /Partial/ContextMenu.html
<ul id="categorycontextmenu">
</ul>
JavaScript Code
Taken from /Scripts/KendoUiExt.ContextMenu.js
$("#categorycontextmenu").kendoExtContextMenu({
width: "175px",
targets: "#treeview .k-item .category",
items: [
{
text: "Add Item",
iconCss: "k-add"
},
{
text: "Rename Category",
iconCss: "k-edit"
},
{
separator: true
},
{
text: "Delete Category",
iconCss: "k-delete"
}
],
itemSelect: function (e) {
kendo.ui.ExtAlertDialog.show({
title: "Selection",
message: kendo.format('You selected: "{0}" on "{1}"',
$(e.item).text().trim(),
$(e.target).text()),
icon: "k-ext-information"
});
}
});