Table in GridTemplateColumn causes problem with EnableRowHoverStyle

2 posts, 0 answers
  1. Chris May IT Team Lead
    Chris May IT Team Lead avatar
    31 posts
    Member since:
    Nov 2009

    Posted 22 Jun 2010 Link to this post

    I followed the example to create row-spanning column headers as shown here: Telerik Example, which works great until I add EnableRowHoverStyle="true" to the declaration.  The hover bar only works correctly on the non-Template columns.  On the Template columns, the rows contain an underline and some extra space... if you hover below that space the hover bar appears, but nowhere else on those columns. 

    Is there a workaround or fix for this?  I've tried the latest version of the DLLs, but still have the problem.

    Here's the code:



            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
            <cc1:CslaDataSource ID="cdsMain" runat="server" TypeAssemblyName="" TypeName="" 
                TypeSupportsPaging="False" TypeSupportsSorting="False">  
            <telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" AutoGenerateColumns="False" 
                DataSourceID="cdsMain" GridLines="None">  
                <ClientSettings EnableRowHoverStyle="true">  
                <MasterTableView DataSourceID="cdsMain">  
                        <HeaderStyle Width="20px"></HeaderStyle> 
                        <HeaderStyle Width="20px"></HeaderStyle> 
                        <telerik:GridTemplateColumn UniqueName="TemplateColumn">  
                                <table id="Table1" width="100%">  
                                        <td colspan="2" align="center">  
                                            <b>Two-Column Header</b> 
                                        <td width="50%">  
                                            <b>Cust Code</b> 
                                        <td width="50%">  
                                            <b>Cust Name</b> 
                                <table id="Table2" width="100%">  
                                        <td width="50%">  
                                            <%# DataBinder.Eval(Container.DataItem, "CUSTCODE")%> 
                                        <td width="50%">  
                                            <%# DataBinder.Eval(Container.DataItem, "CUSTNAME")%> 
                        <telerik:GridBoundColumn DataField="CUSTCODE" HeaderText="Cust Code" SortExpression="CUSTCODE" 
                        <telerik:GridBoundColumn DataField="CUSTNAME" HeaderText="Cust Name" SortExpression="CUSTNAME" 


  2. Dimo
    Dimo avatar
    8321 posts

    Posted 24 Jun 2010 Link to this post

    Hello Patrick,

    The RadGrid row hover styles are applied with Javascript in order to work in IE6, which does not support the :hover pseudo CSS class. By design, the functionality does not work when there is a <table> in a template column, due to performance considerations. We will change this in the future. In the meantime, you can either try to construct your item template layout without table (e.g. use floated <div>s) or add a custom CSS rule, e.g.

    <%@ Page Language="VB" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <script runat="server">
        Protected Sub RadGrid_NeedDataSource(ByVal sender As Object, ByVal e As GridNeedDataSourceEventArgs)
            Dim dt As New DataTable()
            Dim dr As DataRow
            Dim cols As Integer = 4
            Dim rows As Integer = 4
            Dim colName As String = "Column"
            For c As Integer = 1 To cols
                dt.Columns.Add(String.Format("{0}{1}", colName, c))
            For r As Integer = 1 To rows
                dr = dt.NewRow()
                For rc As Integer = 1 To cols
                    dr(String.Format("{0}{1}", colName, rc)) = String.Format("{0}{1} Row{2}", colName, rc, r)
                Next rc
            Next r
            TryCast(sender, RadGrid).DataSource = dt
        End Sub
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    <head id="Head1" runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <style type="text/css">
    .RadGrid_Default .rgRow:hover,
    .RadGrid_Default .rgAltRow:hover
        background:#c5c5c5 0 -2900px repeat-x url('<%= Page.ClientScript.GetWebResourceUrl(RadGrid1.GetType(), "Telerik.Web.UI.Skins.Default.Grid.sprite.gif") %>');
    .RadGrid_Default .rgRow:hover td,
    .RadGrid_Default .rgAltRow:hover td
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <Selecting AllowRowSelect="true" />
                <telerik:GridTemplateColumn HeaderText="Template Column">
                        <table style="border:1px solid red"><tr><td>hover me</td></tr></table>

    Sincerely yours,
    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
  3. DevCraft R3 2016 release webinar banner
Back to Top