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.
---
Hello everyone,
Please use the Grid OnRowClick event or the Grid OnRowContextMenu event. Check args.Field in the event arguments, which will reveal the clicked column.
This was added in version 5.1.0. I assume we can mark this item as complete.
Regards,
Dimo
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
This is very much needed!
Or also looking for ability to capture the normal 'left click' event with the specific cell.
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
Hi,
will this feature be implemented? It is highly needed.
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();