Grid Width Extends Past Screen

10 posts, 1 answers
  1. Developer
    Developer avatar
    13 posts
    Member since:
    Nov 2008

    Posted 18 Feb 2010 Link to this post

    As the title says my grid extends past the screen width....here is my Grid:
    <telerik:RadGrid ID="RadGrid1" runat="server" Skin="Sunset" AllowSorting="true" ShowFooter="false">  
                            <ItemStyle Font-Size="11px" /> 
                            <MasterTableView> 
                                <RowIndicatorColumn> 
                                    <HeaderStyle Width="20px"></HeaderStyle> 
                                </RowIndicatorColumn> 
                                <ExpandCollapseColumn> 
                                    <HeaderStyle Width="20px"></HeaderStyle> 
                                </ExpandCollapseColumn> 
                            </MasterTableView> 
                            <ClientSettings AllowColumnHide="false">  
                                <Scrolling AllowScroll="true" UseStaticHeaders="True" ScrollHeight="450px" /> 
                                <Resizing AllowColumnResize="true" ClipCellContentOnResize="true" 
                                       /> 
                            </ClientSettings> 
                        </telerik:RadGrid> 
    When the grid loads with data it stretches past the screen width.  What I want it to do is add  a scroll bar to the bottom of the grid and allow you to scroll left or right without going off the right side of the screen.  Kind of like how you can scroll up and down within the grid with the side scroll bar....that works as inteded.

    I also set the initial size of my columns programmatically in the ColumnCreated event:
        Protected Sub RadGrid1_ColumnCreated(ByVal sender As ObjectByVal e As Telerik.Web.UI.GridColumnCreatedEventArgs) Handles RadGrid1.ColumnCreated  
     
            Dim name As String = e.Column.UniqueName  
     
            'resize columns  
            If name = "Name" Or name = "Address1" Or name = "RFI Email" Or name = "Personal Email" Or name = "Practice" Then 
                Dim boundColumn As GridBoundColumn = CType(e.Column, GridBoundColumn)  
                boundColumn.ItemStyle.Width = 150  
                boundColumn.HeaderStyle.Width = 150  
            End If 
            If name = "Initials" Or name = "State" Then 
                Dim boundColumn As GridBoundColumn = CType(e.Column, GridBoundColumn)  
                boundColumn.ItemStyle.Width = 45  
                boundColumn.HeaderStyle.Width = 45  
            End If 
            If name = "Office" Then 
                Dim boundColumn As GridBoundColumn = CType(e.Column, GridBoundColumn)  
                boundColumn.ItemStyle.Width = 80  
                boundColumn.HeaderStyle.Width = 80  
            End If 
            If name = "Ext" Or name = "Zip" Then 
                Dim boundColumn As GridBoundColumn = CType(e.Column, GridBoundColumn)  
                boundColumn.ItemStyle.Width = 50  
                boundColumn.HeaderStyle.Width = 50  
            End If 
            If name = "Cell" Or name = "Home" Or name = "Fax" Or name = "Business" Or name = "City" Then 
                Dim boundColumn As GridBoundColumn = CType(e.Column, GridBoundColumn)  
                boundColumn.ItemStyle.Width = 89  
                boundColumn.HeaderStyle.Width = 89  
            End If 
            If name = "Address2" Then 
                Dim boundColumn As GridBoundColumn = CType(e.Column, GridBoundColumn)  
                boundColumn.ItemStyle.Width = 70  
                boundColumn.HeaderStyle.Width = 70  
            End If 
            If name = "Preferred" Then 
                Dim boundColumn As GridBoundColumn = CType(e.Column, GridBoundColumn)  
                boundColumn.ItemStyle.Width = 95  
                boundColumn.HeaderStyle.Width = 95  
            End If 
     
        End Sub 

    Any help is appreciated.
    thanks,

    Coty
  2. Developer
    Developer avatar
    13 posts
    Member since:
    Nov 2008

    Posted 18 Feb 2010 Link to this post

    Actually, what is funny is that the above code snippets mimic how I want my grid to scroll.

    Thanks.

    Coty
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Developer
    Developer avatar
    13 posts
    Member since:
    Nov 2008

    Posted 18 Feb 2010 Link to this post

    Hmm, I found out if I set a fixed width I get the desired scroll bars, however I would like to auto-size the width according to the persons browser window size.  Perhaps there is an elegant way to do that?

    thanks.
  5. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 23 Feb 2010 Link to this post

    Hi Coty,

    RadGrid assumes a 100% width by default and should not expand beyond the browser window width, if you have scrolling enabled.

    However, there is one case when this happens in Internet Explorer - if you place the control inside a <table>, a browser bug is triggered, which leads to the outer table being expanded regardless of the fact that the RadGrid has scrolling. In order to avoid this, please set a table-layout:fixed CSS style to the <table> in which RadGrid is placed.

    If the above information is not relevant to your scenario, please send a runnable web page for us to take a look.

    By the way, ItemStyle.Width should not be used. Use only HeaderStyle.Width.


    Sincerely yours,
    Dimo
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  6. Dustin
    Dustin avatar
    79 posts
    Member since:
    Oct 2012

    Posted 24 Jan 2011 Link to this post

    I am having the same issue with the RadGrid width extending past the browser window as well. I am using the latest version of the RadControls, i have scolling set to true on the RadGrid, RadGrid tablelayout set to fixed and my control is in a html table in which i have table-layout set to fixed on that table too and i still can't get the RadGrid to scoll horizontally and not extend past the browser window.

    <telerik:RadGrid ID="rgd" runat="server" CssClass="rgMinHeight" Height="100%" AutoGenerateColumns="false"
            AllowPaging="true" AllowSorting="true" PageSize="21">
            <ClientSettings EnableRowHoverStyle="true" Selecting-AllowRowSelect="true" Scrolling-AllowScroll="true" />
            <GroupingSettings CaseSensitive="false" />
            <MasterTableView TableLayout="Fixed" DataKeyNames="ProgramNumber,ProgramName" ShowHeadersWhenNoRecords="true">
                <ItemStyle Wrap="false" />
                <AlternatingItemStyle Wrap="false" />
                <Columns>
                    <telerik:GridHyperLinkColumn DataTextField="ProgramNumber" HeaderText="Program #" SortExpression="ProgramNumber" HeaderStyle-Width="80px" UniqueName="ProgramNumber" />
                    <telerik:GridBoundColumn DataField="Client" HeaderText="Client" SortExpression="Client" HeaderStyle-Width="225px" UniqueName="Client" />
                    <telerik:GridBoundColumn DataField="ProgramName" HeaderText="Program Name" SortExpression="ProgramName" HeaderStyle-Width="225px" UniqueName="ProgramName" />
                    <telerik:GridBoundColumn DataField="PrimaryContact" HeaderText="Primary" SortExpression="PrimaryContact" HeaderStyle-Width="100px" UniqueName="PrimaryContact" />
                    <telerik:GridBoundColumn DataField="EndDate" HeaderText="End Date" SortExpression="EndDate" HeaderStyle-Width="75px" DataFormatString="{0:MM/dd/yyyy}" DataType="System.String" UniqueName="EndDate" />
                    <telerik:GridBoundColumn DataField="Status" HeaderText="Status" SortExpression="Status" HeaderStyle-Width="100px" UniqueName="Status" />
                    <telerik:GridBoundColumn DataField="Revenue" HeaderText="Revenue" SortExpression="Revenue" DataFormatString="{0:c}" HeaderStyle-Width="115px" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right" UniqueName="Revenue" />
                    <telerik:GridBoundColumn DataField="PAX" HeaderText="PAX" SortExpression="PAX" DataFormatString="{0:c}" HeaderStyle-Width="75px" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right" UniqueName="PAX" />
                    <telerik:GridBoundColumn DataField="AE" HeaderText="AE" SortExpression="AE" HeaderStyle-Width="35px" UniqueName="AE" />
                    <telerik:GridBoundColumn DataField="HotelName" HeaderText="Hotel" SortExpression="HotelName" HeaderStyle-Width="225px" UniqueName="HotelName" />
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
  7. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 27 Jan 2011 Link to this post

    Hi,

    Attached to this message is a simple test project that is working as expected. Please check it out and let me know if it works for you or if I am leaving something from your logic out.

    Kind regards,
    Pavlina
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  8. Dustin
    Dustin avatar
    79 posts
    Member since:
    Oct 2012

    Posted 04 Feb 2011 Link to this post

    The attachment project did work properly. But to better replicate my scenario, put the RadGrid inside an html and the width will extend past the window. My solution is a lot more complicated than just simply putting the RadGrid inside a table, but for simplicity sake, it's very easy to break to the RadGrid width.
  9. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 07 Feb 2011 Link to this post

    Hi Dustin,

    Note that at least one of the containers which wrap the control should have fixed dimensions. Only thus the grid will be able to calculate its percentage height/width values in par with the container settings.

    Therefore, make sure that the table or one of the parent containers (if available) has fixed width in pixels. Thus the width of the grid will be calculated properly in conjunction with its containers dimensions.

    Best wishes,
    Pavlina
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  10. Dustin
    Dustin avatar
    79 posts
    Member since:
    Oct 2012

    Posted 07 Feb 2011 Link to this post

    That doesn't make sense. The project you attached, there was no parent with a fixed width and it worked, but when I surround the RadGrid with a table, the dimensions of that parent table have to have a fixed width. How was the RadGrid able to calculate its width in the first place with no parent that has a fixed width?

    Just so you know, I do have a work around, but not the most desirable for implementing this anytime I have a RadGrid that I want to fill the window horizontally is ridiculous. It would be nice if the RadGrid could be fixed so that an html hack would not have to be used to get the 100% width to work as it should.


    <table width="100%" style="table-layout:fixed">
        <tr>
            <td>
                <telerik:RadGrid... />
            </td>
       
    </tr>
    </table>
  11. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 10 Feb 2011 Link to this post

    Hello Dustin,

    In this case, would it be convenient for you to open a formal support ticket in order to send us a simple running project that demonstrates the problem. I could then have a better look on your scenario and setup and try finding what could be the reason for the problem.

    Thank you for your cooperation in advance.

    Kind regards,
    Pavlina
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017