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.
Unfortunately, activation email could not send to your email. Please try again.

ejGrid Hover

Thread ID:

Created:

Updated:

Platform:

Replies:

124811 Jun 30,2016 08:14 PM Jul 1,2016 06:31 AM JavaScript 1
loading
Tags: ejGrid
Hadya Shawky
Asked On June 30, 2016 08:14 PM

Hello, 

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 06:31 AM

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 () { 
                    $("#Grid").ejGrid({ 
                        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) { 
                        $("#commanddialog").ejDialog("close"); 
                    }); 
    }); 
 
 
    $(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]; 
        $("#commanddialog").html($("#templateData").render(record)) 
          .ejDialog("open"); 
        $("#commandialog").ejDialog("option", { position: { X: grid.element.offset().left, Y: grid.element.offset().top } }); 
        if (navigator.userAgent.indexOf("MSIE 8.0") != -1) 
            $("#commanddialog").find("img").width(150); 
    }); 
 
 

Regards, 
Prasanna Kumar N.S.V 


CONFIRMATION

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.

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.

;