This is a migrated thread and some comments may be shown as answers.

[Solved] Horizontal Scrolling with Heirarchical Data

5 Answers 147 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Stuart Hemming asked on 03 Jun 2009, 10:36 AM

I've a grid with scrolling and static headers enabled.

When I add a 'wide' table the grid scrolls horizontally. If I add a detail table the horizontal scrolling disables itself.

Is there a magic spell I'm missing?

FYI, below is a listing of the test page I created which uses the Northwind DB...

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="WebApplication1.WebForm6" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"> 
        
                <title></title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                </telerik:RadScriptManager> 
        
                <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" GridLines="None" Skin="WebBlue" Width="100%"> 
        
            <MasterTableView DataSourceID="SqlDataSource1" CommandItemDisplay="Top" DataKeyNames="OrderID"> 
        
            <RowIndicatorColumn> 
        
            <HeaderStyle Width="20px"></HeaderStyle> 
        
            </RowIndicatorColumn> 
        
                <DetailTables> 
        
                  <telerik:GridTableView runat="server" AutoGenerateColumns="True" DataSourceID="SqlDataSource2"> 
        
                    <ParentTableRelation> 
        
                      <telerik:GridRelationFields DetailKeyField="OrderId" MasterKeyField="OrderId" /> 
        
                    </ParentTableRelation> 
        
                    <RowIndicatorColumn> 
        
                      <HeaderStyle Width="20px" /> 
        
                    </RowIndicatorColumn> 
        
                    <ExpandCollapseColumn> 
        
                      <HeaderStyle Width="20px" /> 
        
                    </ExpandCollapseColumn> 
        
                  </telerik:GridTableView> 
        
                </DetailTables> 
        
            <ExpandCollapseColumn Visible="True"> 
        
            </ExpandCollapseColumn> 
        
              <Columns> 
        
                <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32" HeaderText="OrderID" ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID"> 
        
                </telerik:GridBoundColumn> 
        
                <telerik:GridBoundColumn DataField="CustomerID" HeaderText="CustomerID" SortExpression="CustomerID" UniqueName="CustomerID"> 
        
                </telerik:GridBoundColumn> 
        
                <telerik:GridBoundColumn DataField="EmployeeID" DataType="System.Int32" HeaderText="EmployeeID" SortExpression="EmployeeID" UniqueName="EmployeeID"> 
        
                </telerik:GridBoundColumn> 
        
                <telerik:GridBoundColumn DataField="OrderDate" DataType="System.DateTime" HeaderText="OrderDate" SortExpression="OrderDate" UniqueName="OrderDate"> 
        
                </telerik:GridBoundColumn> 
        
                <telerik:GridBoundColumn DataField="RequiredDate" DataType="System.DateTime" HeaderText="RequiredDate" SortExpression="RequiredDate" UniqueName="RequiredDate"> 
        
                </telerik:GridBoundColumn> 
        
                <telerik:GridBoundColumn DataField="ShippedDate" DataType="System.DateTime" HeaderText="ShippedDate" SortExpression="ShippedDate" UniqueName="ShippedDate"> 
        
                </telerik:GridBoundColumn> 
        
                <telerik:GridBoundColumn DataField="ShipVia" DataType="System.Int32" HeaderText="ShipVia" SortExpression="ShipVia" UniqueName="ShipVia"> 
        
                </telerik:GridBoundColumn> 
        
                <telerik:GridBoundColumn DataField="Freight" DataType="System.Decimal" HeaderText="Freight" SortExpression="Freight" UniqueName="Freight"> 
        
                </telerik:GridBoundColumn> 
        
                <telerik:GridBoundColumn DataField="ShipName" HeaderText="ShipName" SortExpression="ShipName" UniqueName="ShipName"> 
        
                </telerik:GridBoundColumn> 
        
                <telerik:GridBoundColumn DataField="ShipAddress" HeaderText="ShipAddress" SortExpression="ShipAddress" UniqueName="ShipAddress"> 
        
                </telerik:GridBoundColumn> 
        
                <telerik:GridBoundColumn DataField="ShipCity" HeaderText="ShipCity" SortExpression="ShipCity" UniqueName="ShipCity"> 
        
                </telerik:GridBoundColumn> 
        
                <telerik:GridBoundColumn DataField="ShipRegion" HeaderText="ShipRegion" SortExpression="ShipRegion" UniqueName="ShipRegion"> 
        
                </telerik:GridBoundColumn> 
        
                <telerik:GridBoundColumn DataField="ShipPostalCode" HeaderText="ShipPostalCode" SortExpression="ShipPostalCode" UniqueName="ShipPostalCode"> 
        
                </telerik:GridBoundColumn> 
        
                <telerik:GridBoundColumn DataField="ShipCountry" HeaderText="ShipCountry" SortExpression="ShipCountry" UniqueName="ShipCountry"> 
        
                </telerik:GridBoundColumn> 
        
              </Columns> 
        
            </MasterTableView> 
        
                  <ClientSettings> 
        
                    <Selecting AllowRowSelect="True" /> 
        
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" /> 
        
                  </ClientSettings> 
        
                </telerik:RadGrid> 
        
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWIND.MDFConnectionString %>" SelectCommand="SELECT * FROM [Orders]"></asp:SqlDataSource> 
        
                <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWIND.MDFConnectionString %>" SelectCommand="SELECT * FROM [Order Details]"></asp:SqlDataSource> 
        
                </form> 
        
            </body> 
        
            </html>

--
Stuart

5 Answers, 1 is accepted

Accepted

answered on 05 Jun 2009, 12:06 PM

Hi Stuart,

When using nested table views, RadGrid enforces a fixed table layout. This causes the horizontal scrolling to disappear. To work around the problem, you can take a couple of approaches:

1. Set your MasterTableView's Width property to a value larger than RadGrid's. This will put horizontal scrolling back.

2. Set an explicit width in pixels for your columns either using the column's HeaderStyle-Width property, or the same property of the MasterTableView to apply for all columns.

Best wishes,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.