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: