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

Table in GridTemplateColumn causes problem with EnableRowHoverStyle

1 Answer 93 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Quinten
Top achievements
Rank 1
Quinten asked on 22 Jun 2010, 09:50 PM
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> 

 

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 24 Jun 2010, 03:11 PM
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
Tags
Grid
Asked by
Quinten
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or