Category / Section
How to render customized Tooltip for one column which displays values of another column?
2 mins read
We may like to customize the default browser tooltip displayed in the grid columns which can be achieved using the ejTooltip control of Syncfusion.
Solution:
The default tooltip of the grid columns can be customized by using cssClass property of column for which we need customized tooltip.
JS:
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
columns: [
{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID" },
{ field: "CustomerID", headerText: 'Customer ID'},
{ field: "EmployeeID", headerText: 'Employee ID', cssClass: "coltip" },
{ field: "Freight", format: "{0:C}" },
{ field: "OrderDate", format: "{0:MM/dd/yyyy}" },
{ field: "ShipCountry", headerText: "Ship Country" },
{ field: "ShipCity", headerText: 'Ship City'}
],
dataBound: "onDataBound"
});
})
</script>
MVC:
@(Html.EJ().Grid<object>("Grid")
.Datasource(((IEnumerable<object>)ViewBag.datasource))
.AllowPaging()
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add();
col.Field("CustomerID").HeaderText("Customer ID").Add();
col.Field("EmployeeID").HeaderText("Employee ID").CssClass("coltip").Add();
col.Field("Freight").Format("{0:c}").Add();
col.Field("OrderDate").Format("{0:MM/dd/yyyy}").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Add();
col.Field("ShipCity").HeaderText("Ship City").Add();
})
.ClientSideEvents(eve=>eve.DataBound("onDataBound"))
)
ASP.NET
<ej:Grid ID="Grid" runat="server" AllowPaging="True">
<ClientSideEvents DataBound="onDataBound" />
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" CssClass="coltip" />
<ej:Column Field="Freight" Format="{0:C}" />
<ej:Column Field="OrderDate" Format="{0:MM/dd/yyyy}"/>
<ej:Column Field="ShipCountry" HeaderText="Ship Country" />
<ej:Column Field="ShipCity" HeaderText="Ship City" />
</Columns>
</ej:Grid>
In the dataBound event of the Grid, we need to render the ejTooltip control for the elements with class name “coltip”.
<script type="text/javascript">
function onDataBound(args) {
$(".coltip").ejTooltip({
width: "350px",
content: '<div class="main"> <div class="poster"> <img src="http://js.syncfusion.com/demos/web/images/tooltip/template-2.png" width="150px" height="120px"> </div> <div class="def"> <h4> Roslyn Succinctly </h4><div class="description">Microsoft has only recently embraced the world of open source software, offering <a href="#">More...</a> </div>'
})
}
</script>
Note:
We can also display another column value in the customized tooltip using the beforeOpen event of the ejTooltip control.
<script type="text/template" id="test">
<div id="custom">This is the customized tooltip which shows another column ie {{:ShipName}} value.</div>//customize the tooltip styles
</script>
<script type="text/javascript">
var temp = $.templates(test);
function onDataBound(args) {
$(".coltip").ejTooltip({
width: "350px",
//content: 'some content'
beforeOpen: function (args) {
if ($(args.event.target).hasClass("e-headercell", "e-headercelldiv")) {
//check if headercell is hovered
args.cancel = true;
return;
}
var gridObj = $("#Grid").data("ejGrid");
var index = gridObj.getIndexByRow(args.event.target.closest("tr"));
var val = gridObj.getCurrentViewData()[index]; //get the row data
$(".coltip").ejTooltip({ content: temp.render(val) });//render the template with row data and display it as content for tooltip
}
})
}
</script>
ScreenShot:
