Articles in this section
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:

Custom tooltip

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please  to leave a comment
Access denied
Access denied