RadGrid Horizontal Scrollbar too wide in Firefox

[Shane]

I have a RadGrid that contains 31 columns of various data types and widths. I have the width set to 98% so that it shows the horizontal scroll bar and it's working as expected in IE. But in Firefox the horizontal scroll bar is far too wide, even wider than the screen itself, and the grid extends far beyond the edge of the page. If I try to scroll to the right side of the grid the scroll bar hits the right side before the last column comes into view; so it's impossible to see the last few columns in the grid.

The grid is also inside a panel, not sure if that could be a factor; but the application has many grids inside panels and I'm only seeing it on this one page. Any help would be greatly appreciated.

Thanks
Shane

[Pavlina]

Hello,

Can you specify which is the version of RadControls you are using in your project? Providing the problematic code and live url where the described problem can be observed will also help to investigate the issue further.

Greetings,
Pavlina
the Telerik team

[Shane]

The version I'm using is ASP.NET AJAX Q1 2012 SP1. Unfortunately I can't provide a URL to the page in question because you wouldn't be able to access it anyway without access to the VPN. As for the code; it's very customized code and it isn't legally mine. I'll have to check with management before providing a sample of it.

[Shane]

Ok, I cleared this much with my manager. The control you see in the markup called TempoGridControl is an extension of the RadGrid control.

Here's the declaration of the grid, master table view, and client settings. There are 31 columns in the columns declaration so I'll omit those.

<tempo:NvPanel ID="nvPnlAirStackLA" runat="server" SpanRow="true">
       <fieldset>
           <legend>Release Point Information</legend>
           <tempo:TempoGridControl ID="radGridAirStackLA" runat="server" PageSize="10" AllowMultiRowSelection="false"
               OnNeedDataSource="radGridAirStackLA_NeedDataSource" OnItemDataBound="radGridAirStackLA_ItemDataBound"
               OnInsertCommand="radGridAirStackLA_InsertCommand" OnUpdateCommand="radGridAirStackLA_UpdateCommand"
               OnDeleteCommand="radGridAirStackLA_DeleteCommand" CssClass="fllft witherror" Width="98%"
               ViewEntityType="CGI.ESG.TEMPO.ViewEntity.AirStacksLAView, CGI.ESG.TEMPO.ViewEntity">
               <TempoCommandItem Enabled="true"/>
               <MasterTableView CommandItemDisplay="Top" EditMode="InPlace" TableLayout="Auto" DatakeyNames="TemporaryID,State,MASTER_AI_ID,INT_DOC_ID,STACK_ID">
                   <Columns>
                       31 columns declared here
                   </Columns>
                   <EditFormSettings>
                       <EditColumn FilterControlAltText="Filter EditCommandColumn" UniqueName="EditCommandColumn" ButtonType="ImageButton">
                       </EditColumn>
                   </EditFormSettings>
               </MasterTableView>
               <ClientSettings>
                   <Resizing AllowColumnResize="true" ShowRowIndicatorColumn="true" />
                   <Selecting AllowRowSelect="true" />
                   <Scrolling AllowScroll="true" SaveScrollPosition="true" UseStaticHeaders="true"/>
               </ClientSettings>
           </tempo:TempoGridControl>
       </fieldset>
   </tempo:NvPanel>

As you can see, I have the width of the grid set to less than the width of the page so that it inserts the scroll bar. But for some reason in Firefox the scroll bar doesn't scroll all the way to the right; it works perfectly in Internet Explorer.

[Pavlina]

Hi Shane,

You can try setting MasterTableView TableLayout property to Fixed and see if this helps to resolve the problem you are facing in Firefox:

<MasterTableView CommandItemDisplay="Top" EditMode="InPlace" TableLayout="Fixed" DatakeyNames="TemporaryID,State,MASTER_AI_ID,INT_DOC_ID,STACK_ID">

All the best,
Pavlina
the Telerik team

[Shane]

Well, I had already tried that. But I tried it again just to be certain and again it didn't change anything. The scroll bar is still too wide and doesn't scroll all the way to the right. This may help too; the RadGrid is inside a panel, but for some reason the RadGrid is actually wider than the panel itself. I can see the border on the right side of the panel; but the grid continues past the edge of the panel. Almost like the Width property isn't being applied to the grid. It should be 98% the width of the grid; but it's not getting set.

I've attached a screenshot that may help illustrate the issue.

Shane

[Pavlina]

Hi,

Generally, we do not provide support for extended Telerik controls. However, you can try setting fixed width in px to the panel which wraps the grid and see if this helps.

Kind regards,
Pavlina
the Telerik team

[Shane]

Well, you were close. I set the width in the panel and it didn't work; but then I tried setting the width in the grid to a fixed 1213px and finally, success. Thanks for your help.