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

     

  2. Dimo
    Admin
    Dimo avatar
    8332 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))
            Next
          
            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
                dt.Rows.Add(dr)
            Next r
      
            TryCast(sender, RadGrid).DataSource = dt
        End Sub
      
    </script>
      
    <!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" />
    <title>RadControls</title>
    <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") %>');
        color:#333;
    }
     
    .RadGrid_Default .rgRow:hover td,
    .RadGrid_Default .rgAltRow:hover td
    {
        border-bottom-color:#9e9e9e;
    }
     
    </style>
    </telerik:RadCodeBlock>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
      
    <telerik:RadGrid
        ID="RadGrid1"
        runat="server"
        Width="800px"
        OnNeedDataSource="RadGrid_NeedDataSource">
        <ClientSettings>
            <Selecting AllowRowSelect="true" />
        </ClientSettings>
        <MasterTableView>
            <Columns>
                <telerik:GridTemplateColumn HeaderText="Template Column">
                    <ItemTemplate>
                        <table style="border:1px solid red"><tr><td>hover me</td></tr></table>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
      
    </form>
    </body>
    </html>


    Sincerely yours,
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top