We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

ejGrid Hover


I have data set up and arranged in rows and columns using ejGrid. However, when I hover over a row in this grid, I would like a hoverbox/display of some kind, to show up and display information that is a few sentences long or a paragraph long. So that when I hover over the row, anywhere in the row, some data will appear in a hover box and correspond to the mouse pointer. If I hover to the row below, then different data will appear in a hover box. How can this be done? 

Thank you.

1 Reply

PK Prasanna Kumar Viswanathan Syncfusion Team July 1, 2016 10:31 AM UTC

Hi Shawky, 

Thank you for contacting Syncfusion support. 

We have achieved your requirement using JavaScript mousemove event. In this event, we can get the target element. We can get the index of a row using getIndexByRow method, and using getCurrentViewData we can get the particular row information. The row information has been rendered in the dialog box and we open the dialog box at the end of the event.    
In mouseleave event, we will close the dialog box.  
Please find the code example and sample: 
$(function () { 
                        dataSource: window.employeeView, 
                        allowPaging: true, 
                        allowSorting: true, 
                        pageSettings : { pageSize : 3}, 
                        columns: [ 
                    $("#commanddialog").ejDialog({ "width": 450, title: "Demo Details", showOnInit: false, enableResize: false, content: "#Grid" }); 
                    $(".e-gridcontent").mouseleave(function (evt) { 
    $(document).on("mousemove", ".e-rowcell", function (event) { 
        var columnindex = $(event.target).index(); 
        var grid = $("#Grid").ejGrid("instance"); 
        var dialog = $("#commanddialog").ejDialog("instance"); 
        var index = grid.getIndexByRow(event.target.parentElement); 
        var record = grid.getCurrentViewData()[index]; 
        $("#commandialog").ejDialog("option", { position: { X: grid.element.offset().left, Y: grid.element.offset().top } }); 
        if (navigator.userAgent.indexOf("MSIE 8.0") != -1) 

Prasanna Kumar N.S.V 

Live Chat Icon For mobile
Up arrow icon