|
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:
|
2X faster development
The ultimate ASP.NET MVC UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
This only appears to work for the first few pages of the grid. The popup fails to open on rows further down the list even if page is turned off. I tested under MVC with the generated grid example that uses the northwind db. This fails even if I'm hard coding the content for the tooltip. I'm just evaluated the tools, but not having this capability is a deal breaker. Any ideas on how to fix this?
Also, a secondary issue when trying to display data from one of the columns in the toolbox is that the line with "args.event.target.closest" throws 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'closest'. Other browser do not have this issue.