Grid Width Extends Past Screen

[Developer]

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 Object, ByVal 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

[Developer]

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

Thanks.

Coty

[Developer]

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.

[Dimo]

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.

[Dustin]

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>

[Pavlina]

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

[Dustin]

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.

[Pavlina]

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

[Dustin]

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>

[Pavlina]

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