[Solved] Grid width TableLayout issue in Firefox

[Tushar]

Hi,
I am using RadGrid in my project. I have explicitly set width of all columns.
I have not set width of Grid because I want the Grid to cover all the width. Scrollbar is enabled.

    <div style="height:400px">
        <telerik:RadGrid id="RadGrid1" Height="90%" runat="server" ClientSettings-Scrolling-AllowScroll="true"
            autogeneratecolumns="false" onneeddatasource="RadGrid1_NeedDataSource" 
            enableheadercontextmenu="true" allowfilteringbycolumn="true">
            <HeaderContextMenu>
            </HeaderContextMenu>
            <MasterTableView TableLayout="Fixed">
                <Columns>
                    <telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID" HeaderStyle-Width="100px" />
                    <telerik:GridBoundColumn DataField="Name" HeaderText="Name1" UniqueName="Name1" HeaderStyle-Width="200px" />
                    <telerik:GridBoundColumn DataField="Name" HeaderText="Name2" UniqueName="Name2" HeaderStyle-Width="100px" />
                    <telerik:GridBoundColumn DataField="Name" HeaderText="Name3" UniqueName="Name3" HeaderStyle-Width="200px" />
                    <telerik:GridBoundColumn DataField="Name" HeaderText="Name4" UniqueName="Name4" HeaderStyle-Width="100px" />
                    <telerik:GridBoundColumn DataField="Name" HeaderText="Name5" UniqueName="Name5" HeaderStyle-Width="200px" />
                    <telerik:GridBoundColumn DataField="Name" HeaderText="Name6" UniqueName="Name6" HeaderStyle-Width="200px" />
                    <telerik:GridBoundColumn DataField="Name" HeaderText="Name7" UniqueName="Name7" HeaderStyle-Width="100px" />
                    <telerik:GridBoundColumn DataField="Name" HeaderText="Name8" UniqueName="Name8" HeaderStyle-Width="200px" />
                    <telerik:GridBoundColumn DataField="Name" HeaderText="Name9" UniqueName="Name9" HeaderStyle-Width="100px" />
                    <telerik:GridBoundColumn DataField="Name" HeaderText="Name10" UniqueName="Name10" HeaderStyle-Width="200px" />
                    <telerik:GridBoundColumn DataField="Name" HeaderText="Name11" UniqueName="Name11" HeaderStyle-Width="100px" />
                    <telerik:GridBoundColumn DataField="Number" HeaderText="Number" UniqueName="Number" HeaderStyle-Width="150px" />
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </div>


In IE and Chrome, when I select less number of columns (2/3), column width is increased automatically to cover all available width.
But in Firefox, column width is not automatically increased. Instead whitespace is displayed on right. Please refer the attched snapshot.
IF I remove TableLayout=Fixed, it works fine in Firefox. But I do not want to remove it since I have explicitly specified each column width.
How can I fix the issue in Firefox?

Thanks in Advance!!

[Pavlina]

Hello Tushar,

I tested the provided code but I was not able to observe the problem you are facing in Firefox. Please find attached my test project and check what is the difference in your case.

Meanwhile you can also try leaving one column without width(for example the last one) and see if it will help.

Regards,
Pavlina
Telerik

 

 

[Tushar]

Thanks Pavlina,
I will try your solution and let you know.

[Tushar]

Hi Pavlina,
I tried your code and was able to rerpoduce the issue in firefox.
Please find the snapshot attached.
I am using Firefox version 29.0.1.

[Pavlina]

Hi Tushar,

Can you confirm that you are using version 2014.1.403 of UI controls for ASP.NET AJAX in your project?

Regards,
Pavlina
Telerik

 

 

[Tushar]

Hi Pavlina,
Yes I am using version 2014.1.403.40 of ASP.NET AJAX in my project.

[Tushar]

Hi Pavlina,
I have shared the exact solution at following location:
https://onedrive.live.com/redir?resid=75D0F01BEA2498F9!158&authkey=!AJx6i10cj_VcMKg&ithint=file%2c.zip

Please check if you can reproduce the issue with it.

Thanks
Tushar

[Pavlina]

Hello Tushar,

The issue you are facing in Firefox is caused by the fact that static headers are not enabled for the grid but you are setting TableLayout="Fixed". If you enable static headers (set ClientSettings-Scrolling-UseStaticHeaders="true") the grid will behave as expected. In case you don't need static headers but just scrolling you should set TableLayout property to "Auto".

Regards,
Pavlina
Telerik

 

 

[Tushar]

Thanks Pavlina, enabling static headers fixed the issue.