RadGrid Horizontal Scrollbar too wide in Firefox

8 posts, 0 answers
  1. Shane
    Shane avatar
    17 posts
    Member since:
    Jan 2013

    Posted 30 Jan 2013 Link to this post

    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
  2. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 04 Feb 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Shane
    Shane avatar
    17 posts
    Member since:
    Jan 2013

    Posted 04 Feb 2013 Link to this post

    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.
  4. Shane
    Shane avatar
    17 posts
    Member since:
    Jan 2013

    Posted 04 Feb 2013 Link to this post

    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.
  5. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 07 Feb 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Shane
    Shane avatar
    17 posts
    Member since:
    Jan 2013

    Posted 07 Feb 2013 Link to this post

    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
  7. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 13 Feb 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Shane
    Shane avatar
    17 posts
    Member since:
    Jan 2013

    Posted 13 Feb 2013 Link to this post

    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.
Back to Top