New to Kendo UI for jQuery? Download free 30-day trial

Use ContextMenu on Grid Cell


Product Progress® Kendo UI® Grid for jQuery



I want to add a drill-down options functionality to a Grid cell and have it work in the following way:

  1. Right-click a Grid cell.
  2. View a ContextMenu with the available drillable options.
  3. 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?


  1. Initialize the ContextMenu over the Grid rows. By default, the ContextMenu opens on right click on the mouse. This could be adjusted with the showOn property.
  2. On the select event of the ContextMenu, retrieve the row information by using the dataItem method 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>

        columns: ["name", "age"],
        dataSource: [ { name: "Jane", age: 31 }, { name: "John", age: 33 }]

        target: "#grid",
        filter: "tr[role='row']",
        select: function(e) {
          var grid = $("#grid").data("kendoGrid");
          var model = grid.dataItem(;
          alert( model.age + " " +;

For more information, refer to:

In this article