This is a migrated thread and some comments may be shown as answers.

Getting MouseMove Jquery to Work on RadGrid Rows

1 Answer 45 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Lonnie
Top achievements
Rank 1
Lonnie asked on 04 Jan 2013, 09:57 PM
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>

1 Answer, 1 is accepted

Sort by
0
Kostadin
Telerik team
answered on 09 Jan 2013, 02:09 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Lonnie
Top achievements
Rank 1
Answers by
Kostadin
Telerik team
Share this question
or