Row looks corrupted when row selected in IE 8

2 posts, 1 answers
  1. Mazdak
    Mazdak avatar
    30 posts
    Member since:
    Nov 2010

    Posted 25 Aug 2011 Link to this post

    I have RadGrid with many columns and selectable rows, here is its code:

    <telerik:RadGrid AutoGenerateColumns="false" ID="RadGrid1" AllowMultiRowSelection="true" OnNeedDataSource="RadGrid1_NeedDataSource" OnItemCreated="RadGrid1_ItemDataBound" OnPreRender="RadGrid1_PreRender"
                Width="2000px" AllowFilteringByColumn="True" AllowSorting="True"
                PageSize="20" ShowGroupPanel="true" ShowStatusBar="true" ShowFooter="True" AllowPaging="True" runat="server"
                GridLines="Both" EnableLinqExpressions="true">
                <PagerStyle Mode="NextPrevNumericAndAdvanced"></PagerStyle>
                <GroupingSettings CaseSensitive="false" />
                <MasterTableView AutoGenerateColumns="false" GroupsDefaultExpanded="false" CommandItemDisplay="None" EditMode="InPlace"  AllowFilteringByColumn="True" DataKeyNames="VendorChargeId"
                    ShowFooter="True" TableLayout="Fixed">               
                     
                    <Columns>
                     
                    <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn">
                    <HeaderStyle Width="40px"/>
                    </telerik:GridClientSelectColumn>                                       
     
                    <telerik:GridCheckBoxColumn  DataType="System.Boolean" AllowFiltering="true" HeaderText="Requires Comment" Groupable="false" DataField="RequiresComments" UniqueName="RequiresComments" ReadOnly="false" >
                            <HeaderStyle Width="80px"/>
                        </telerik:GridCheckBoxColumn>
     
                        <telerik:GridTemplateColumn UniqueName="TemplateEditColumn" HeaderText="Comments">                       
                            <ItemTemplate><asp:LinkButton ID="ShowComment" runat="server" OnClick='<%# String.Format("ShowComment({0}); return false;",Eval("VendorChargeId")) %>'  Text='<%# Eval("Comments") %>'></asp:LinkButton></ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridDateTimeColumn  FilterControlWidth="105px" DataField="ChargeDate" HeaderText="Transaction Date" DataFormatString="{0:dd/MM/yyyy}"
                            UniqueName="ChargeDate" AutoPostBackOnFilter="true" AllowSorting="true" AllowFiltering="false" Groupable="true" ShowFilterIcon="false">
                            <HeaderStyle Width="80px"/>
                            <ItemStyle Width="80px" />
                        </telerik:GridDateTimeColumn >
                         
                        <telerik:GridBoundColumn AllowFiltering="true" FilterControlWidth="40px" Groupable="true" DataField="Resource" UniqueName="Resource" HeaderText="Resource">
                            <HeaderStyle Width="80px"/>
                            <ItemStyle Width="80px" />
                        </telerik:GridBoundColumn>
     
                        <telerik:GridBoundColumn AllowFiltering="true" Groupable="true" DataField="Researcher" UniqueName="Researcher" HeaderText="Researcher"></telerik:GridBoundColumn>
     
                        <telerik:GridBoundColumn AllowFiltering="true" Groupable="true" DataField="ResearcherValid" UniqueName="ResearcherValid" HeaderText="ResearcherValid" Visible="false"></telerik:GridBoundColumn>
     
                        <telerik:GridBoundColumn AllowFiltering="true" Groupable="true" DataField="Timekeeper" UniqueName="Timekeeper" HeaderText="Timekeeper"></telerik:GridBoundColumn>
     
                        <telerik:GridBoundColumn AllowFiltering="true" Groupable="true" DataField="TimekeeperValid" UniqueName="TimekeeperValid" HeaderText="TimekeeperValid" Visible="false"></telerik:GridBoundColumn>
     
                        <telerik:GridBoundColumn AllowFiltering="true" Groupable="true" DataField="MatterNumber" UniqueName="MatterNumber" HeaderText="Matter Number"></telerik:GridBoundColumn>
     
                        <telerik:GridBoundColumn AllowFiltering="true" Groupable="true" DataField="MatterName" UniqueName="MatterName" HeaderText="Matter Name"></telerik:GridBoundColumn>
     
                        <telerik:GridBoundColumn AllowFiltering="true" Groupable="true" DataField="MatterValid" UniqueName="MatterValid" HeaderText="MatterValid" Visible="false"></telerik:GridBoundColumn>
     
                        <telerik:GridBoundColumn AllowFiltering="true" Groupable="true" DataField="ClientName" UniqueName="ClientName" HeaderText="Client Name"></telerik:GridBoundColumn>
     
                        <telerik:GridBoundColumn AllowFiltering="true" Groupable="true" DataField="ChargeService" UniqueName="ChargeService" HeaderText="Service"></telerik:GridBoundColumn>
     
                        <telerik:GridBoundColumn AllowFiltering="true" Groupable="true" DataField="ChargeDescription" UniqueName="ChargeDescription" HeaderText="Charge Description">
                        <ItemStyle Width="180px" />
                        <HeaderStyle Width="180px" />
                        </telerik:GridBoundColumn>
     
                        <telerik:GridBoundColumn AllowFiltering="true" FilterControlWidth="50px" Groupable="false" DataField="ChargeDatabaseTime" UniqueName="ChargeDatabaseTime" HeaderText="Database Time">
                            <HeaderStyle Width="90px"/>
                            <ItemStyle Width="90px" />
                        </telerik:GridBoundColumn>
     
                        <telerik:GridBoundColumn AllowFiltering="true" Groupable="false" DataField="TransactionCount" UniqueName="TransactionCount" HeaderText="Transactions"></telerik:GridBoundColumn>
                        <telerik:GridMaskedColumn FilterControlWidth="70px" AllowFiltering="true" Groupable="true" DataField="TotalCharge" UniqueName="TotalCharge" HeaderText="Total Charge" SortExpression="TotalCharge" DataType="System.Double" Aggregate="Sum" DataFormatString="{0:0.00}" FooterAggregateFormatString="Grand Total: {0:0.00}" >                   
                        </telerik:GridMaskedColumn>
                         
                        <telerik:GridTemplateColumn FilterControlWidth="85px" UniqueName="VendorChargeIdLink" HeaderText="Import Raw Data" AllowFiltering="false" Groupable="false">
                            <ItemTemplate>
                                <asp:LinkButton ID="ShowRawData" runat="server" OnClick='<%# String.Format("ShowRecords({0}); return false;",Eval("VendorChargeId")) %>'  Text='<%# Eval("VendorChargeId") %>'></asp:LinkButton>
                            </ItemTemplate>
                            <HeaderStyle Width="80px"/>
                            <ItemStyle Width="80px" />
                        </telerik:GridTemplateColumn>
                         
                        <telerik:GridBoundColumn AllowFiltering="false" Groupable="false" DataField="VendorChargeId" UniqueName="VendorChargeId" HeaderText="Id" Display="false">
                        <HeaderStyle Width="30px" />
                    </telerik:GridBoundColumn>
                    </Columns>
                     <CommandItemSettings ShowExportToExcelButton="true" ShowAddNewRecordButton="false" />
                      
                </MasterTableView>
                <ExportSettings IgnorePaging="true" ExportOnlyData="true" HideStructureColumns="true" OpenInNewWindow="true" FileName="Export">
                     
                </ExportSettings>
                <ClientSettings AllowDragToGroup="true">
                    <Selecting AllowRowSelect="true" EnableDragToSelectRows="true" />
                    <Scrolling AllowScroll="false" />
                </ClientSettings>
            </telerik:RadGrid>

    the problem is with Comments column which is template column (its UniqueName is TemplateEditColumn) , in IE 8 when I select a row it looks corrupted:

    http://screencast.com/t/QkJzsLZU5bv

    It looks fine in IE 9 and Firefox 5.
  2. Answer
    Galin
    Admin
    Galin avatar
    526 posts

    Posted 31 Aug 2011 Link to this post

    Hi Mazdak,

    It seems you use a custom css, which changes the border-bottom-color to white in all cells in the  TemplateEditColumn. Even on the screenshot you can see that not only the selected cell have this problem.

    I highly recommend you to use web tools like Firebug for Firefox / IE developer tool. Shortcut F12 activates both and with them is very easy to inspect the elements and to see the styles that they have. After researching the styles of elements you can add or edit their rules.

    Also you can try the following CSS rule, ( in case it does not help you, add !important for specificity) :
    div.RadGrid_Telerik .rgSelectedRow td {
        border-bottom-color: #155800;
    }

    I hope this helps.

    Best wishes,
    Galin
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top