1
我需要在kendo UI中創建一個上下文菜單,並且需要爲該上下文菜單添加一些功能。 我看到幾乎與jqgrid相似的帖子, How to create jqGrid Context Menu?。 同樣的,我需要在kendo.Its實施起來非常urgent.Please幫我在這,感謝如何創建Kendo上下文菜單?
KendoGrid
<script type="text/javascript">
$(document).ready(function() {
//Bind with initial data
var people = [
{ firstName: "Hasibul", lastName: "Haque", email: "[email protected]" }
, { firstName: "Jane", lastName: "Smith", email: "[email protected]" }
];
$('#grid').kendoGrid({
scrollable: true,
sortable: true,
pageable: true,
selectable: "row",//""multiple row"",
filterable: true
, dataSource: { data: people, pageSize: 10 }
, columns:
[
{ field: "firstName", title: "First Name" }
, { field: "lastName", title: "Last Name" }
, { field: "email", title: "email" }
, {
title: "Action",
template: ' <input type="button" value="Delete" onclick="RemoveSelectedRow()" />'
, filterable: false
}
]
});
$(".k-content").dblclick(DoubleClickAction);
});
function Rebind() {
var people = [
{ firstName: "Robin", lastName: "Hood", email: "[email protected]" }
, { firstName: "Hasibul", lastName: "Haque", email: "[email protected]" }
, { firstName: "Fauzul", lastName: "Hossain", email: "[email protected]" }
];
var grid = $("#grid").data("kendoGrid");
grid.dataSource.data(people);
}
function InsertNewRow() {
var grid = $("#grid").data("kendoGrid");
var anis = { firstName: "Anisur", lastName: "Rahaman", email: "anis.com" };
grid.dataSource.insert(anis);
}
function RemoveSelectedRow() {
var grid = $("#grid").data("kendoGrid");
var selectedRow = grid.dataItem(grid.select());
grid.dataSource.remove(selectedRow);
}
function IterateThroughAllRows() {
var items = $("#grid").data("kendoGrid").dataSource.data();
for (i = 0; i < items.length; i++) {
alert(items[i].firstName);
}
}
function DoubleClickAction() {
var grid = $("#grid").data("kendoGrid");
var selectedRow = grid.dataItem(grid.select());
alert("You have double click on " + selectedRow.firstName);
}
function ReadSelectedRow() {
var grid = $("#grid").data("kendoGrid");
var selectedRow = grid.dataItem(grid.select());
alert("You have selected FirstName: " + selectedRow.firstName + " and Last Name: " + selectedRow.lastName);
}
function EnableSelectedIndexChangeEvent() {
var grid = $("#grid").data("kendoGrid");
grid.bind("change", RowSelectionChangeEvent);
}
function RowSelectionChangeEvent() {
ReadSelectedRow();
}
</script>
<div>
<input type="button" value="Rebind" onclick="Rebind()" />
<input type="button" value="Insert New Record" onclick="InsertNewRow()" />
<input type="button" value="Remove Selected Row" onclick="RemoveSelectedRow()" />
<input type="button" value="Iterate" onclick="IterateThroughAllRows()" />
<input type="button" value="Read Selected Row" onclick="ReadSelectedRow()" />
<input type="button" value="Enable Selected Index Chnage event" onclick="EnableSelectedIndexChangeEvent()" />
</div>
<div id="grid" class="k-content" >
</div>
FWIW劍道UI都有自己的上下文菜單的功能如今:http://demos.telerik.com/ ASPNET-MVC /菜單/右鍵菜單 – EfrainReyes