[Solved] RadGrid column alignment issue-Firefox

[Balamurali Venkatesan]

Hi,

We are testing our application comprtability in all the browsers. The RadGrid seems to have issue in Firefox.
The header and the data columns are not aligning properly in Firefox.In IE 6.0 it works fine.
The issue is due to the scroll bar that is appearing on the grid.If we remove the scrolling the columns align perfectly in firefox.
Any help on this would be appreciated.

Below is code for creating the radGrid

<

telerik:RadGrid ID="radGridFacts" runat="server" AllowMultiRowSelection="True" AllowPaging="True"

 

 

AutoGenerateColumns="False" GridLines="None" PageSize="30" AllowAutomaticDeletes="True"

 

 

AllowAutomaticInserts="True" AllowAutomaticUpdates="True" AllowMultiRowEdit="True"

 

 

DataSourceID="objContDsFact" AllowFilteringByColumn ="True" Height="400px">

 

 

<AlternatingItemStyle BackColor="#EDEFF1" BorderColor="Blue" />

 

 

<PagerStyle AlwaysVisible="True" Mode="NextPrevNumericAndAdvanced" PageButtonCount="25"

 

 

Position="TopAndBottom" />

 

 

<MasterTableView CommandItemDisplay="Top" EditMode="InPlace" AllowFilteringByColumn="True"

 

 

DataSourceID="objContDsFact" TableLayout ="fixed">

 

 

<RowIndicatorColumn>

 

 

<HeaderStyle Width="20px" />

 

 

</RowIndicatorColumn>

 

 

<ExpandCollapseColumn>

 

 

<HeaderStyle Width="20px" />

 

 

</ExpandCollapseColumn>

 

 

<Columns>

 

 

<telerik:GridEditCommandColumn ButtonType="ImageButton" UpdateImageUrl="../images/Update.gif"

 

 

EditImageUrl="../images/Edit.gif" InsertImageUrl="../images/Insert.gif" CancelImageUrl="../images/Cancel.gif"

 

 

UniqueName="EditCommandColumn">

 

 

<HeaderStyle Width="4%" />

 

 

<ItemStyle HorizontalAlign="Center" />

 

 

</telerik:GridEditCommandColumn>

 

 

<telerik:GridButtonColumn ConfirmText="Delete this product?" ButtonType="ImageButton"

 

 

ImageUrl="../images/Delete.gif" CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">

 

 

<HeaderStyle Width="4%" />

 

 

<ItemStyle HorizontalAlign="Center" />

 

 

</telerik:GridButtonColumn>

 

 

<telerik:GridClientSelectColumn>

 

 

<HeaderStyle Width="4%" HorizontalAlign="center"/>

 

 

 

<ItemStyle HorizontalAlign="Center" />

 

 

</telerik:GridClientSelectColumn>

 

 

<telerik:GridBoundColumn DataField="Tag" HeaderText="Tag" UniqueName="factTagCol">

 

 

<HeaderStyle Width="13%" />

 

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="ShortDescription" HeaderText="Short Description"

 

 

UniqueName="colFactShortDesc">

 

 

<HeaderStyle Width="16%" />

 

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="LongDescription" HeaderText="Long Description"

 

 

UniqueName="colFactLongDesc">

 

 

<HeaderStyle Width="20%" />

 

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="CurrencyDbMarketTag" HeaderText="Currency Market Tag"

 

 

UniqueName="colCurrencyDbMarketTag" ReadOnly="True">

 

 

<HeaderStyle Width="13%" />

 

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="CurrencyDbFactTag" HeaderText="Currency Fact Tag "

 

 

UniqueName="colCurrencyDbFactTag " ReadOnly="True">

 

 

<HeaderStyle Width="13%" />

 

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="FactRate" HeaderText="Fact Rate" UniqueName="colFactRate"

 

 

ReadOnly="True">

 

 

<HeaderStyle Width="13%" />

 

 

 

</telerik:GridBoundColumn>

 

 

</Columns>

 

 

<EditFormSettings>

 

 

<EditColumn UniqueName="EditCommandColumn1">

 

 

</EditColumn>

 

 

</EditFormSettings>

 

 

<CommandItemTemplate>

 

<%

-- <div style="padding: 10px 0px;">--%>

 

 

<asp:LinkButton ID="btnEditSelected" runat="server" CommandName="UpdateEdited"

 

 

Style="vertical-align: bottom"

 

 

Visible="<%# radGridFacts.EditIndexes.Count > 0 %>"><img alt=""

 

 

src="../images/Update.gif" style="border:0px;vertical-align:middle;" />

 

Update Products

</asp:LinkButton>

 

 

&nbsp;

 

 

<asp:LinkButton ID="btnCancel" runat="server" CausesValidation="false"

 

 

CommandName="CancelAll"

 

 

Visible="<%# radGridFacts.EditIndexes.Count > 0 || radGridFacts.MasterTableView.IsItemInserted %>"><img

 

 

alt="" src="../images/Cancel.gif" style="border:0px;vertical-align:middle;" />

 

Cancel editing

</asp:LinkButton>

 

 

&nbsp;

 

 

<asp:LinkButton ID="btnAddProduct" runat="server" CommandName="InitInsert"

 

 

Visible="<%# !radGridFacts.MasterTableView.IsItemInserted %>"><img alt=""

 

 

src="../images/AddRecord.gif" style="border:0px;vertical-align:middle;" />

 

Add new Product

</asp:LinkButton>

 

 

<asp:LinkButton ID="btnSaveProduct" runat="server" CommandName="PerformInsert"

 

 

Visible="<%# radGridFacts.MasterTableView.IsItemInserted %>"><img alt=""

 

 

src="../images/Insert.gif" style="border:0px;vertical-align:middle;" /> Add

 

this Product

</asp:LinkButton>

 

 

&nbsp;

 

 

<asp:LinkButton ID="btnUpdateEdited" runat="server" CausesValidation="false"

 

 

CommandName="EditSelected" Visible="<%# radGridFacts.EditIndexes.Count == 0 %>"><img

 

 

alt="" src="../images/Edit.gif" style="border:0px;vertical-align:middle;" />

 

Edit Selected Products

</asp:LinkButton>

 

 

<asp:LinkButton ID="btnDeleteSelectedProducts" runat="server"

 

 

CausesValidation="false" CommandName="DeleteSelected"

 

 

OnClientClick="javascript:return confirm('Delete all selected Products?')"><img

 

 

alt="" src="../images/Delete.gif" style="border:0px;vertical-align:middle;" />

 

Delete Selected Products

</asp:LinkButton>

 

 

&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;

 

 

<asp:LinkButton ID="btnRefresh" runat="server" CommandName="RebindGrid"><img

 

 

alt="" src="../images/Refresh.gif" style="border:0px;vertical-align:middle;" />

 

Refresh Product list

</asp:LinkButton>

 

<%

-- </div>--%>

 

 

</CommandItemTemplate>

 

 

</MasterTableView>

 

 

<ClientSettings AllowKeyboardNavigation="True" AllowColumnsReorder="True">

 

 

<Selecting AllowRowSelect="True" />

 

 

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

 

 

</ClientSettings>

 

 

<FilterMenu EnableTheming="True">

 

 

<CollapseAnimation Duration="200" Type="OutQuint" />

 

 

</FilterMenu>

 

 

<EditItemStyle BackColor="#A2A2A2" />

 

 

</telerik:RadGrid>

 

Thanks
Bala

[Pavlina]

Hi Balamurali,

This is so because RadGrid renders header cells and ordinary cells in two different tables when Scrolling is enabled and UseStaticHeaders is set to "True". In general, cells with no or less side borders should have larger side padding, so that the widths of the header cells and ordinary cells remain equal.
When using static headers, RadGrid by default tries to fit its MasterTableView and all columns in the designated control width. Please set some large width to the MasterTableView (in pixels) and see how it goes.

Additionally about how to control the horizontal scroll appearance when taking advantage of the scrolling feature of our web grid you can see from the guidelines available under the Description section of this online demo of the product:
Scrolling

More information about align RadGrid cells is available in the following knowledge base:
How to align RadGrid cells when using Scrolling

Best regards,
Pavlina
the Telerik team

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

[Balamurali Venkatesan]

HI,

Thanks for the response. Actually we cannot set the width in pixels ,we need to set it in percentage only.
I set the width to 100% and all the data column is set in percentage too.Please let me know is there any way we can align the columns by setting the width in percentage.

Thanks and Regards
Bala 

[Pavlina]

Hi Balamurali,

Unfortunately there is no way to align the columns by setting the width in percentage. As you can see there are the CSS rules setting side paddings (you can set  padding only in pixels). When GridLines are turned on, cell side paddings should be equal in order to make the cells align properly.

I hope this helps.

Regards,
Pavlina
the Telerik team

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

[Balamurali Venkatesan]

HI ,
Thanks again for the reply. Actually we are not setting the Gridlines..The Gridline is set as None.
Also could you please let us know which part of the CSS neeed to be chnaged in order align the columns

Thanks
Bala

[Pavlina]

Hi Balamurali,

In case that  the GridLines property is set to None, I suggest that you try to overcome this problem by setting column widths explicitly by using HeaderStyle-Width for each column.

            <HeaderStyle Width="10%" />

When using static headers, RadGrid by default tries to fit its MasterTableView and all columns in the designated control width. If you don't want to set column widths, please set some large width to the MasterTableView (in pixels).

If you still have difficulties resolving the issue on your side, please open a formal support ticket and send us a runnable example, so that we can check it.

Regards,
Pavlina
the Telerik team

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