Table in GridTemplateColumn causes problem with EnableRowHoverStyle

[Quinten]

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>

 

[Dimo]

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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<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