Unplanned
Last Updated: 25 Jan 2024 15:52 by ADMIN
Liero
Created on: 17 Feb 2021 11:41
Category: Grid
Type: Feature Request
13
OnCellContextMenu event

I need to know which cell the user right clicked on so I can adjust my context menu. I need the cell value, the row model and the field of the column.

---

ADMIN EDIT

The following KB article shows a solution you can use immediately: https://docs.telerik.com/blazor-ui/knowledge-base/grid-which-cell-context-menu.

---

3 comments
ADMIN
Hristian Stefanov
Posted on: 25 Jan 2024 15:52

Hi Gert,

Thank you for showing your interest in the feature request.

I confirm the feature status is still "Unplanned" at this stage. That means no specific time frame has been assigned yet. As soon as we move a task to the short-term backlog, the status will change to "Planned" and most likely a release number will appear as well.

Other items with more priority have been considered over this item for the recent releases. Things are dynamic, and the best way to stay updated with the feature status is to keep following this public item.

Regards,
Hristian Stefanov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Gert
Posted on: 22 Jan 2024 14:07

Hi,

will this feature be implemented? It is highly needed.

Liero
Posted on: 17 Feb 2021 15:35

Temporary workaround:

use OnRowContextMenu and JS interop to get column index, or event column field.

async Task OnRowContextMenu(GridRowClickEventArgs args)
{
  var mouseEventArgs = args.EventArgs as MouseEventArgs;
  await ContextMenuRef.ShowAsync(mouseEventArgs.ClientX, mouseEventArgs.ClientY);
  var colIndex = await _js.InvokeAsync<int>("app.getColIndex", mouseEventArgs);
  // alternative
  var field = await _js.InvokeAsync<int>("app.getColField", mouseEventArgs);
}

and javascript

class App {

    getCell() {
        return document.elementsFromPoint(clientX, clientY).find(e => e.matches('[role="gridcell"]'));
    }

    getColIndex({ clientX, clientY }) {
        let cell = document.elementsFromPoint(clientX, clientY).find(e => e.matches('[role="gridcell"]'));
        if (!cell) {
            return -1;
        }
        return Number.parseInt(cell.getAttribute('data-col-index'));
    }

    getCellField({ clientX, clientY }) {
        let cellIndex = getColIndex({ clientX, clientY });
        var grid = document.elementsFromPoint(clientX, clientY).find(e => e.matches('[role]="grid'));
        var header = grid.querySelector(`[role]="columnheader"[data-col-index]="${cellIndex}"`);
        return header.getAttribute('data-col-field');
    }
}

window.app = new App();