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

Row looks corrupted when row selected in IE 8

1 Answer 56 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mazdak
Top achievements
Rank 1
Mazdak asked on 25 Aug 2011, 04:07 PM
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.

1 Answer, 1 is accepted

Sort by
0
Accepted
Galin
Telerik team
answered on 31 Aug 2011, 10:02 AM
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 >>

Tags
Grid
Asked by
Mazdak
Top achievements
Rank 1
Answers by
Galin
Telerik team
Share this question
or