ejGrid Hover

[Hadya Shawky]

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]

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); 

    }); 

 

 

Sample Link : http://www.syncfusion.com/downloads/support/forum/124811/ze/Sample118577-529789529 

Regards, 

Prasanna Kumar N.S.V