Category / Section
How to get the clicked Grid cell details
4 mins read
You can get the clicked grid cell details by passing the target element to the “getRowInfo” method of Grid component.
This is explained in the following sample code in which the “click” event has been bound to the Grid element and clicked cell details is retrieved by using the “getRowInfo” method. The cell value is displayed in an alert popup.
TS
let grid: Grid = new Grid({
dataSource: data,
columns: [
{ field: "OrderID", headerText: "Order ID", width: 120, textAlign: "Right" },
{ field: "CustomerName", headerText: "Customer Name", width: 150 },
{ field: "Freight", width: 120, format: "C2", textAlign: "Right" },
{ field: "ShipCountry", headerText: "Ship Country", width: 150 }
]
});
grid.appendTo("#Grid");
document.getElementById("Grid").addEventListener("click", function(args) {
if ((args.target as any).classList.contains("e-rowcell")) {
let rowInfo = grid.getRowInfo(args.target); // Get row information
alert(rowInfo.rowData[rowInfo.column["field"]]);
}
});
