Search results

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

26 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;
}
tagHelper
custom-tooltip.cs
Copied to clipboard
<ejs-tooltip id="Tooltip" target=".e-rowcell" beforeRender="beforeRender">
    <e-content-template>
        <ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
            <e-grid-columns>
                <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
                <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
                <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
                <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
            </e-grid-columns>
        </ejs-grid>
    </e-content-template>
</ejs-tooltip>

<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();
}