Getting MouseMove Jquery to Work on RadGrid Rows

[Lonnie]

I am attempting to get a div to show and follow the mouse based on the row that the mouse is over. It seems that I can't get the right element to target in order to make this work. 

In the code below lblEnclarityReportsPerPayer gets filled from codebehind with tables that have an ID that corresponds to the simpleRequestDate. The problem is that my $("tr.rgHoveredRow").mousemove() is not firing. 

<telerik:RadGrid runat="server" ID="gvReport" DataSourceID="dsReport" >
    <ClientSettings>
        <ClientEvents OnRowMouseOver="showPayerBreakOut" OnRowMouseOut="hidePayerBreakOut" />
    </ClientSettings>
    <MasterTableView DataKeyNames="simpleRequestDate" ClientDataKeyNames="simpleRequestDate" CommandItemDisplay="Top" PageSize="100">
    <CommandItemSettings ShowExportToExcelButton="true" ShowAddNewRecordButton="false" />
        <Columns>
            <telerik:GridDateTimeColumn DataField="RequestDate" DataFormatString="{0:MM/dd/yyyy}" HeaderText="Request Date" SortExpression="RequestDate" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" />
            <telerik:GridBoundColumn DataField="requests" HeaderText="Requests" SortExpression="requests" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" />
            <telerik:GridBoundColumn DataField="faxNumbersReceived" HeaderText="Fax Numbers Received" SortExpression="faxNumbersReceived" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" />
            <telerik:GridBoundColumn DataField="percentage" HeaderText="Percentage Found" SortExpression="percentage" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" />
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

<script type="text/javascript">
    $(document).ready(function () {
        $('#payerReports span').children().each(function () {
            $(this).hide();
        });
    });

    var moveLeft = 20;
    var moveDown = 10;

    $("tr.rgHoveredRow").mousemove(function (e) {
        $('#payerReports').css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
    });

    function showPayerBreakOut(sender, eventArgs) {
        $("#" + eventArgs.getDataKeyValue("simpleRequestDate")).show();
    }
    function hidePayerBreakOut(sender, eventArgs) {
        $("#" + eventArgs.getDataKeyValue("simpleRequestDate")).hide();
    }


</script>

<div id="payerReports">
    <asp:Label runat="server" ID="lblEnclarityReportsPerPayer" />
</div>

[Kostadin]

Hi Lonnie,

Mousemove function is not firing because the grid is still not created and the selector is null. Please make sure that the events are attached after the control is created.
Also I noticed that you are trying to select the rgHoveredRow. This class is only available if an item from the grid is hovered. When the page is loaded no item is hovered and the selector will be null again. What I could suggest you is to apply the mousemove function to all the items in the grid and on each move to check whether rgHoveredRow class exists.

Check out the following code snippet to get an idea how to implement this.

$(document).ready(function () {
                $('#payerReports span').children().each(function () {
                    $(this).hide();
                });

                $("tr.rgRow").mousemove(function (e) {
                    if ("tr.rgHoveredRow" != null) {
                        $('#payerReports').css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
                    }
                });

            });

Greetings,
Kostadin
the Telerik team