Good evening everyone,
I'm trying to copy the values from the Grid row using the ContextMenu. It works on Kendo's default cells, but it's not working on customized cells.
I made an example and, in it, you can see that it's not possible to get the value (check the console) if you right-click and click Copy. It will return:
{dataItem: undefined, field: undefined}
While in default cells it returns the value normally:
{dataItem: Object, field: "ProductName"}
Furthermore, the 'onContextMenu' in <td/> is presenting an error in TypeScript
Type '(event: MouseEvent<HTMLElement, MouseEvent>, dataItem: any, field?: string) => void' is not assignable to type 'MouseEventHandler<HTMLTableDataCellElement>'
I'm trying to copy the values from the Grid row using the ContextMenu. It works on Kendo's default cells, but it's not working on customized cells.
I made an example and, in it, you can see that it's not possible to get the value (check the console) if you right-click and click Copy. It will return:
{dataItem: undefined, field: undefined}
While in default cells it returns the value normally:
{dataItem: Object, field: "ProductName"}
Furthermore, the 'onContextMenu' in <td/> is presenting an error in TypeScript
Type '(event: MouseEvent<HTMLElement, MouseEvent>, dataItem: any, field?: string) => void' is not assignable to type 'MouseEventHandler<HTMLTableDataCellElement>'
Follow the code
brave-leftpad-tt12no - CodeSandbox
1 Answer, 1 is accepted
1
Accepted
Hi Gabriel,
The onContextMenu from the custom cell props expects the native event, the data item and the field, so you need to handle the onContextMenu of the TD element and manually pass the additional data:
const CustomCell = (props: CustomCellProps) => {
const field = props.field || "";
const value = props.dataItem[field];
const navigationAttributes = useTableKeyboardNavigation(props.id);
const onCellContextMenu = ev =>{
props.onContextMenu(ev, props.dataItem, field);
}
return (
<td
style={{ color: value ? props.myProp[0].color : props.myProp[1].color }}
colSpan={props.colSpan}
role={"gridcell"}
aria-colindex={props.ariaColumnIndex}
aria-selected={props.isSelected}
{...{ [GRID_COL_INDEX_ATTRIBUTE]: props.columnIndex }}
{...navigationAttributes}
onContextMenu={onCellContextMenu}Hope this helps.
Regards,
Konstantin Dikov
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!
Gabriel
commented on 09 May 2023, 12:33 PM
Top achievements
Rank 2
Iron
Rank 2
Iron
It's without a doubt a very simple solution. Thank you very much!!