Search results

Display custom ToolTip for columns in Grid in ASP.NET MVC Grid control

22 Oct 2021 / 1 minute to read

To display a custom ToolTip (EJ2 Tooltip), you can render the Grid control inside the Tooltip component and set the target as “.e-rowcell”. The tooltip is displayed when hovering the grid cells.

Change the tooltip content for the grid cells by using the following code in the (beforeRender) event.

Copied to clipboard
function beforeRender(args) {
        // event triggered before render the tooltip on target element.
        var tooltip = document.getElementById("Tooltip").ej2_instances[0]
        tooltip.content = args.target.closest("td").innerText;
}
razor
custom-tooltip.cs
Copied to clipboard
@Html.EJS().Tooltip("Tooltip").Target(".e-rowcell").ContentTemplate(@<div>
    @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();

    }).Render()
</div>).BeforeRender("beforeRender").Render()

<script>
    function beforeRender(args) {
        // event triggered before render the tooltip on target element.
        var tooltip = document.getElementById("Tooltip").ej2_instances[0]
        tooltip.content = args.target.closest("td").innerText;
    }
</script>
Copied to clipboard
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}