[Solved] Row looks corrupted when row selected in IE 8

[Mazdak]

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.

[Galin]

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