To display custom ToolTip (EJ2 Tooltip), use the
QueryCellInfo
event.
Render the ToolTip component for the grid cells by using the following code in the QueryCellInfo
event.
function tooltip (args) {
var tooltip = new ej.popups.Tooltip({
content: args.data[args.column.field].toString();
}, args.cell);
}
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
}).QueryCellInfo("tooltip").Render()
<script>
function tooltip(args) { // event triggers on every cell render.
new ej.popups.Tooltip({
content: args.data[args.column.field].toString() // add Essential JS2 tooltip for every cell.
}, args.cell);
}
</script>
public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}