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

[Solved] Problem RowHoverStyle and GridTemplateColumn

13 Answers 178 Views

Grid

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

13 Answers, 1 is accepted

Accepted

answered on 13 Mar 2009, 07:28 AM

Hello Alfred,

A possible workaround is to add the following CSS rule to your website:

tr.GridRow_SkinName:hover,
tr.GridAltRow_SkinName:hover,
tr.SelectedRow_SkinName:hover
{
/* row hover styles here */
}

Afterwards, you can set EnableRowHoverStyle="false"

An alternative workaround is to use a CSS-based layout in your template columns, instead of a table-based one.

We have reviewed this problem and the conclusion is that fixing the issue will pose a performance penalty to the RadGrid control, so for the time being we will refrain from doing so. When IE6 is dead, the hover styles will be applied with CSS only (no Javascript will be needed for switching CSS classes), so the issue will no longer be a problem.

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 31 Mar 2009, 10:46 AM

Hello,

Sorry, my mistake. The correct CSS class names are:

div.RadGrid_SkinName .rgRow:hover,
div.RadGrid_SkinName .rgAltRow:hover,
div.RadGrid_SkinName .rgSelectedRow:hover
{
/* row hover styles here */
}

Here is a sample page:

    
            <%@ Page Language="C#" %> 
        
            <%@ Import Namespace="System.Data" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <script runat="server"> 
        
                protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) 
        
                { 
        
                    DataTable dt = new DataTable(); 
        
                    DataRow dr; 
        
                    int colsNum = 4; 
        
                    int rowsNum = 10; 
        
                    string colName = "Column"; 
        
                    for (int j = 1; j <= colsNum; j++) 
        
                    { 
        
                        dt.Columns.Add(String.Format("{0}{1}", colName, j)); 
        
                    } 
        
                    for (int i = 1; i <= rowsNum; i++) 
        
                    { 
        
                        dr = dt.NewRow(); 
        
                        for (int k = 1; k <= colsNum; k++) 
        
                        { 
        
                            dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i); 
        
                        } 
        
                        dt.Rows.Add(dr); 
        
                    } 
        
                    (sender as RadGrid).DataSource = dt; 
        
                } 
        
            </script> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
            <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
        
            <title>RadControls for ASP.NET AJAX</title> 
        
            <style type="text/css"> 
        
            div.RadGrid_Default .rgRow:hover, 
        
            div.RadGrid_Default .rgAltRow:hover, 
        
            div.RadGrid_Default .rgSelectedRow:hover 
        
            { 
        
                   background:yellow none; 
        
            } 
        
            </style> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            <telerik:RadGrid 
        
                ID="RadGrid1" 
        
                runat="server" 
        
                Skin="Default" 
        
                OnNeedDataSource="RadGrid_NeedDataSource" /> 
        
            </form> 
        
            </body> 
        
            </html>

All the best,
Dimo
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.