How to render tooltip for grid content
Essential Grid don’t have in-built support to show tooltip on grid cell content but we can render the tooltip for the grid cells using the queryCellInfo and dataBound events.
It involves the following steps
- Initialize the grid with queryCellInfo and dataBound client side events.
- Add the DOM manipulation required, if any, on TD cells in the queryCellInfo event.
- Render the tooltip in the dataBound event.
In the below let us see how to use the Bootstrap tooltip for the grid content.
Include the following CSS and JS files to work with Bootstrap tooltip
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
1. Initialize the grid with queryCellInfo and dataBound client side events.
Grid Initialization
JS
<div id="Grid"></div>
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
pageSettings: { pageSize: 7 },
columns: [
{ field: "OrderID", headerText: "Order ID", width: 75, textAlign: ej.TextAlign.Right },
{ field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right },
{ field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right },
{ field: "OrderDate", headerText: "Order Date", width: 80, textAlign: ej.TextAlign.Right, format: "{0:MM/dd/yyyy}" },
{ field: "ShipCity", headerText: "Ship City", width: 110 }
],
queryCellInfo: "OnQueryCellInfo",
dataBound: "OnDataBound"
});
});
</script>
MVC
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.griddata)
.AllowPaging()
.PageSettings(page => page.PageSize(7))
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(80).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(80).Add();
col.Field("Freight").HeaderText("Freight").Format("{0:C}") .TextAlign(TextAlign.Right).Width(80).Add();
col.Field("OrdeDate").HeaderText("Order Date").Format("{0:MM/dd/yyyy}").Width(80).TextAlign(TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width(110).Add();
})
.ClientSideEvents(evt => evt.QueryCellInfo("OnQueryCellInfo").DataBound("OnDataBound")))
ASP
<ej:Grid ID="Grid1" runat="server" AllowPaging="true">
<PageSettings PageSize="7" />
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" TextAlign="Right" Width="80"/>
<ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="80"/>
<ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}" TextAlign="Right" Width="80"/>
<ej:Column Field="OrderDate" HeaderText="Order Date" Format="{0:MM/dd/yyyy}" TextAlign="Right" Width="80"/>
<ej:Column Field="ShipName" HeaderText="Ship Name" Width="80"/>
</Columns>
<ClientSideEvents QueryCellInfo="OnQueryCellInfo" DataBound="OnDataBound" />
</ej:Grid>
2. Add the DOM manipulation required, if any, on td cells in the queryCellInfo event. The QueryCellInfo is the suitable event to perform the cell based actions.
function OnQueryCellInfo(args) {
/* Add required attributes to render Bootstrap tooltip to cells in queryCellInfo
* In the below args.data[args.column.field] will retrieve the current cell data*/
$(args.cell).attr({
"data-toggle": "tooltip",
"data-container": "body",
"title": args.data[args.column.field]
});
}
3. Render the tooltip in the dataBound event. The DataBound event is the convenient event to render the tooltip since it triggered after the grid content is ready or appended to the body.
function OnDataBound(args) {
//Render Bootstrap tooltip here
$("[data-toggle=tooltip]").tooltip();
}
The output will be as follows.
