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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ejGrid Hover

Thread ID:





124811 Jul 1,2016 12:14 AM UTC Jul 1,2016 10:31 AM UTC JavaScript 1
Tags: ejGrid
Hadya Shawky
Asked On July 1, 2016 12:14 AM UTC


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.

Prasanna Kumar Viswanathan [Syncfusion]
Replied On 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 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon 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.Close Icon