How to render customized Tooltip for one column which displays values of another column?
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>
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: