Use ContextMenu on Grid Cell
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
Description
I want to add a drill-down options functionality to a Grid cell and have it work in the following way:
- Right-click a Grid cell.
- View a ContextMenu with the available drillable options.
- Once you click an action from the menu, I want to retrieve the sender cell parameters—for example, row id, column id, value, and others—depending on the action that is needed.
I achieve a similar functionality by using a tooltip which fires on a left-click and allows me to retrieve the sender-cell data through the selected method of the Grid. However, I want to improve this solution.
How can I append a Kendo UI ContextMenu to each cell or part of the cells in a Kendo UI Grid?
Solution
- Initialize the ContextMenu over the Grid rows. By default, the ContextMenu opens on right click on the mouse. This could be adjusted with the
showOnproperty. - On the
selectevent of the ContextMenu, retrieve the row information by using thedataItemmethod of the Grid.
The following example demonstrates how to achieve the desired scenario.
<div id="grid"></div>
<ul id="context-menu">
<li>Shown Row details</li>
</ul>
<script>
$("#grid").kendoGrid({
columns: ["name", "age"],
dataSource: [ { name: "Jane", age: 31 }, { name: "John", age: 33 }]
});
$("#context-menu").kendoContextMenu({
target: "#grid",
filter: "tr[role='row']",
select: function(e) {
var grid = $("#grid").data("kendoGrid");
var model = grid.dataItem(e.target);
alert( model.age + " " + model.name);
}
});
</script>
For more information, refer to: