RadGrid Firefox 3 Issue

[prem]

Hi,

In IE 7, when we set "usestaticheaders=true" in "ClientSettings>Scrolling" in a grid and if there is a row with a lengthy name, it will truncate the item in that row and it is adding 3 dot's "..." at the end. But In Firefox 3,  it doesn't do that and it is overlapping with the text in the next column.

So how do we fix this in Firefox 3?

This is the grid we use:

 

<telerik:RadGrid ID="grdRadAssetHistory" runat="server" AllowPaging="False" AllowSorting="True"

 

 

AutoGenerateColumns="False" BorderWidth="1px" CellPadding="1" CellSpacing="1"

 

 

GridLines="None" GroupingEnabled="False" EnableEmbeddedSkins="false"

 

 

Skin="Web20" Style="margin-bottom: 0px" Width="650px"

 

 

MasterTableView-DataKeyNames="AssetId"

 

 

onneeddatasource="grdRadAssetHistory_NeedDataSource" CssClass="grid" >

 

 

<PagerStyle Mode="NextPrevAndNumeric" HorizontalAlign="Left" PagerTextFormat=""></PagerStyle>

 

 

<HeaderStyle HorizontalAlign="Left" />

 

 

<ItemStyle HorizontalAlign="Left" />

 

 

<AlternatingItemStyle HorizontalAlign="Left" />

 

 

<ClientSettings AllowColumnsReorder="True">

 

 

<Resizing AllowColumnResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="True">

 

 

</Resizing>

 

 

<Scrolling AllowScroll="True" SaveScrollPosition="True" ScrollHeight="200px" UseStaticHeaders="true"></Scrolling>

 

 

</ClientSettings>

 

 

<MasterTableView AllowNaturalSort="false">

 

 

<NoRecordsTemplate>

 

No Records found

</NoRecordsTemplate>

 

 

<Columns>

 

 

<telerik:GridBoundColumn HeaderText="Changed By" DataField="LoginName" HeaderStyle-Width="130px">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn HeaderText="Comment" DataField="Comments" HeaderStyle-Width="200px">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridTemplateColumn HeaderText="Preview" HeaderStyle-Width="135px"

 

 

DataField="AssetId" >

 

 

<ItemTemplate>

 

 

<a target="_blank" href="API/AssetDeliveryHandler.ashx?assetId=<%# Eval("AssetId") %>" ><%# Eval("FileName") %></a>

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridBoundColumn HeaderText="Change Date" DataField="CreateDate" DataType="System.DateTime"

 

 

DataFormatString="{0:yyyy-MM-dd HH:mm:ss}" HeaderStyle-Width="125px">

 

 

</telerik:GridBoundColumn>

 

 

</Columns>

 

 

</MasterTableView>

 

 

 

</telerik:RadGrid>

 

Early response is appreciated.

[IQworks]

 Hi,

I am also having this problem. Any resolution posted anywhere ?

thanks

[Sebastian]

Hi guys,

The Gecko-based browsers do not support text clipping and that is why you observed different behavior under IE and FireFox. The solution for Gecko-based browsers would be to apply text wrapping as shown in this online demo of RadGrid:

http://demos.telerik.com/aspnet-ajax/grid/examples/programming/webmailgrid/defaultcs.aspx (see the Subject column settings)

Kind regards,
Sebastian
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[IQworks]

Hi Princy,
   Sorry, I dont see the "Subject column settings"  in the "Web Mail"  at  http://demos.telerik.com/aspnet-ajax/grid/examples/programming/webmailgrid/defaultcs.aspx .
   The first subject I see is "Feature_Request - r.a.d. controls Sharepoint"  and the last one I see is
, "Title" ?   
 Maybe I am looking at this incorrectly ?

[IQworks]

 Hi Princy,

    You did give me an idea though. I will wait to see the proper information you where directing me to.
    In the mean, I changed my GridBoundColumn to a GridTemplateColumn and it allowed me to use "text-overflow: ellipsis". This showed up acceptably for me in Firefox and IE. (A note, it will give a warning about "text-overflow: ellipsis", but it works for IE anyway)
    Is this an acceptable scenerio to use ? Or should I still look for the "Subject column settings" for a better one ?

thanks again Princy,

    <%-- <telerik:GridBoundColumn DataField="equLocationName" HeaderText="LocationName" UniqueName="equLocationName"
                                    ReadOnly="true"   Resizable="false" ItemStyle-Wrap="false">
                                </telerik:GridBoundColumn> --%>
                                 <telerik:GridTemplateColumn HeaderText="Location"  HeaderStyle-Width="100px" Resizable="false" >
                                <ItemTemplate>
                                <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                            <asp:Label Font-Underline="true"
                                            ID="lblequLocationName" runat="server" Text='<%#Eval("equLocationName")%>'></asp:Label>
                                        </div>
                               </ItemTemplate>
                                </telerik:GridTemplateColumn>