Rad Grid On Row Mouseover Not Working

[mc2000]

Hi: I followed the suggestions both:

http://www.telerik.com/automated-testing-tools/community/forums/aspnet/grid/radgrid-mouseover.aspx and
http://www.telerik.com/help/aspnet/grid/grdsetstyleonmouseover.html

with no success. I am currently developing against the Q1 2010 tools and every time I add the clientsettings tag or the clientsetetings-clientevents-onrowclick property of the Rad Grid the page loads but it appears as though none of the JavaScript runs. My tooltops do not pop-up, the radpanels do not resize, etc. Any help is appreciated. Thanks

            <telerik:RadToolTip ID="AlertMenuToolTip" Animation="Slide" RelativeTo="Element" Position="BottomCenter"
                        AnimationDuration="100" ShowCallout="false" TargetControlID="AlertNoticeIcon" IsClientID="true"
                        OffsetX="-108" OffsetY="-5" runat="server" HideEvent="LeaveToolTip">
                <div class="AlertMenuItemContainer">
                <Telerik:RadGrid RegisterWithScriptManager="true" ID="StudentCheckListRadGrid" AutoGenerateColumns="false" runat="server" AllowSorting="true" ClientSettings-ClientEvents-OnRowClick="javascript:alert();"
                  AllowPaging="false" ShowHeader="false" PageSize="10" Width="100%" BorderWidth="0" ItemStyle-BackColor="#E8E8E8" AlternatingItemStyle-BackColor="White">
                    <MasterTableView AllowMultiColumnSorting="true" AutoGenerateColumns="false" ForeColor="#4B4B4B" Font-Names="Tahoma,Arial,Verdana" Font-Size="11px">
                    <Columns>
                        <Telerik:GridBoundColumn DataField="" HeaderText="TaskSummaryCheckList"></Telerik:GridBoundColumn>
                    </Columns>
                    </MasterTableView>
                    </telerik:RadGrid>
                </div>
                <div style='text-align:center;'><a href="#" ID="StudentCheckListMoreLink" OnClick="OpenStudentCheckListWindow()">view more...</a></div>
        </telerik:RadToolTip>

[Princy]

Hi,

I tried following approach in order to set mousehover style for grid rows. You could attach the client events in the 'ClientSettings->ClientEvents' section of the grid markup as shown below:

       . . .
    </MasterTableView>
            <ClientSettings>
                <ClientEvents OnRowMouseOver="RowMouseOver" OnRowMouseOut="RowMouseOut" />
            </ClientSettings>
    </telerik:RadGrid>

Here is the client code for setting the style in  'OnRowMouseOver' and 'OnRowMouseOut' events:

<script type="text/javascript">

function RowMouseOver(sender, eventArgs) {

$get(eventArgs.get_id()).className = "RowMouseOver";

}

function RowMouseOut(sender, eventArgs) {

$get(eventArgs.get_id()).className = "RowMouseOut";

}

</script>

And the CSS is:

<style type="text/css">

.RowMouseOver td

{

background-color: lightblue !important;

}

.RowMouseOut

{

background: #f7f7f7;

}

</style>

Hope it helps :)
Princy.

[mc2000]

Thanks, seems to work, but it removes the padding from the grid rows (the default -- I didn't change the padding for the grid). It appears as though it is changing the CSS class, whereas I just want to modify the existing class. I am using the default theme.

[Dimo]

Hello Mark,

You should append the custom CSS classes, instead of overwriting the original ones, for example:

function RowMouseOver(sender, eventArgs) {
        $get(eventArgs.get_id()).className += " RowMouseOver";
    }

function RowMouseOut(sender, eventArgs) {
        var row = $get(eventArgs.get_id());
        row.className = row.className.replace("RowMouseOver", "RowMouseOut");
    }



Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[mc2000]

The result here was that the background color didn't even change. This doesn't work for me. Thanks.

[Sebastian]

Hi mc2000,

Have you contemplated utilizing the built-in row hover style of the grid by setting its ClientSettings -> EnableRowHoverStyle property to true as specified in this article? This is the more straight-forward means to have hover style for items. 

On a side note, you can assign merely the actual name of the js function through the ClientSettings -> ClientEvents -> OnRowClick property and then execute your code inside the rowclick handler. Specifying alert or other code execution directly is not supported and may result in javascript error which conflicts with the grid client object initialization.

Kind regards,
Sebastian
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Robert]

I just read this.  As per that page, I've just done this:

<ClientSettings EnablePostBackOnRowClick="true" EnableRowHoverStyle="true" />

Then it says to define this CSS style:

<br><span><pre _xml3a_space="preserve">.GridRowOver_[SkinName]
{
background-color: orange;
cursor:pointer;
}</pre></span>

However, I don't use Skins with Telerik's controls.  So what should be the name of the CSS style to define the Hover style?

Robert

[Galin]

Hello Robert,

Usually the hovered row has class rgHoveredRow, here are few examples how you can style it and other rows

div.RadGrid .rgRow { /* change the background colour of rows */
    background: White;
}

div.RadGrid .rgAltRow { /* change the  background colour for Alternated  rows */
    background: Grey;
}
div.RadGrid .rgSelectedRow {  /* change the background colour for alternated  rows */

    background: LightBlue;
}

div.RadGrid .rgHoveredRow { /* change the background colour for hovered rows */
    background: Green;
}

Please note, you should enable the hover feature. I hope this helps.

Kind regards,
Galin
the Telerik team