Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Horizontal scroll on multiple RadGrids

1 Answer 108 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 29 Feb 2012, 06:01 PM
Hello, 

I have 2 grids on a .aspx page.  I would like to horizontally scroll both grids from the actual grid control.  Below is the code that I have generated.

The width for each grid is fixed, which creates a problem when user's use a different resolution.  If I use width = 100%, then I lose the horizontal grid scroll bar for each grid.

What I need is to allow for 100% width, but not lose the horizontal scrolling for each grid.

I am binding to Northwind, Contacts and Employee tables.

<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>
        <div style="height: 100%; overflow: auto;">
            <table>
                <tr>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <td>
                <div class="inset" style="padding: 10px; overflow: auto;">
                    <div class="inset-title">Contacts</div>
                        <telerik:RadGrid ID="gridContacts" runat="server" AutoGenerateColumns="False" AllowSorting="False" AllowPaging="False" 
                                                                    PageSize="10" AllowCustomPaging="True" BorderColor="#688CAF" BorderWidth="1px" BorderStyle="Solid" Width="1035px">
                            <ClientSettings EnableRowHoverStyle="True" EnablePostBackOnRowClick="false">
                                <Scrolling FrozenColumnsCount="3" AllowScroll="true" UseStaticHeaders="true" ScrollHeight="" />
                            </ClientSettings>
                            <MasterTableView DataKeyNames="ContactID" CommandItemDisplay="Top" TableLayout="Fixed">
                                <Columns>
                                    <telerik:GridBoundColumn DataField="ContactType" HeaderText="ContactType" UniqueName="ContactType">
                                        <HeaderStyle Wrap="false" Width="120" />
                                        <ItemStyle Wrap="false" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="CompanyName" HeaderText="CompanyName" UniqueName="CompanyName">
                                        <HeaderStyle Wrap="false" Width="100" HorizontalAlign="Left" />
                                        <ItemStyle Wrap="false" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="ContactName" HeaderText="ContactName" UniqueName="ContactName">
                                        <HeaderStyle Wrap="false" Width="80" />
                                        <ItemStyle Wrap="false" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="ContactTitle" HeaderText="ContactTitle" UniqueName="ContactTitle">
                                        <HeaderStyle Wrap="false" Width="100" />
                                        <ItemStyle Wrap="false" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="Address" HeaderText="Address" UniqueName="Address">
                                        <HeaderStyle Wrap="false" Width="100" />
                                        <ItemStyle Wrap="false" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="City" HeaderText="City" UniqueName="City">
                                        <HeaderStyle Wrap="false" Width="100" />
                                        <ItemStyle Wrap="false" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="Region" HeaderText="Region" UniqueName="Region">
                                        <HeaderStyle Wrap="false" Width="100" />
                                        <ItemStyle Wrap="false" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="PostalCode" HeaderText="PostalCode" UniqueName="PostalCode">
                                        <HeaderStyle Wrap="false" Width="100" />
                                        <ItemStyle Wrap="false" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="Phone" HeaderText="Phone" UniqueName="Phone">
                                        <HeaderStyle Wrap="false" Width="100" />
                                        <ItemStyle Wrap="false" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="Extension" HeaderText="Extension" UniqueName="Extension">
                                        <HeaderStyle Wrap="false" Width="150" />
                                        <ItemStyle Wrap="false" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="Fax" HeaderText="Fax" UniqueName="Fax" >
                                        <HeaderStyle Wrap="false" Width="100" />
                                        <ItemStyle Wrap="false" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="HomePage" HeaderText="HomePage" UniqueName="HomePage">
                                        <HeaderStyle Wrap="True" Width="250" />
                                        <ItemStyle Wrap="false" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="PhotoPath" HeaderText="PhotoPath" UniqueName="PhotoPath" >
                                        <HeaderStyle Wrap="false" Width="100" />
                                        <ItemStyle Wrap="false" />
                                    </telerik:GridBoundColumn>
                                </Columns>
                                <NoRecordsTemplate>
                                    <div style="padding: 10px; text-align: center">
                                        No Records to display.</div>
                                </NoRecordsTemplate>
                                <CommandItemTemplate>
                                    <telerik:RadToolBar ID="GridToolbar" runat="server" Width="100%" AutoPostBack="true">
                                        <Items>                                  
                                            <telerik:RadToolBarButton ImageUrl="~/images/icons/document-excel.png" CommandName="ExportToExcel" Text="Export to Excel" />
                                            <telerik:RadToolBarButton ImageUrl="~/images/icons/report.png" CommandName="ExportPropertyValuesReport" Text="Print Report" Enabled="False" />
                                        </Items>
                                    </telerik:RadToolBar>
                                </CommandItemTemplate>
                            </MasterTableView>
                        </telerik:RadGrid>
                </div>
            </td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <div class="inset" style="padding: 10px; overflow: auto;">
                    <div class="inset-title">Employees</div>
                        <telerik:RadGrid ID="gridEmployees" runat="server" AutoGenerateColumns="false" AllowSorting="True" AllowPaging="false" BorderColor="#688CAF" BorderWidth="1px" BorderStyle="Solid" Width="1035px">
                            <ClientSettings EnableRowHoverStyle="True" EnablePostBackOnRowClick="false">
                                <Scrolling FrozenColumnsCount="3" AllowScroll="true" ScrollHeight="" UseStaticHeaders="true" />
                            </ClientSettings>
                            <MasterTableView DataKeyNames="EmployeeId" CommandItemDisplay="Top" 
                                GroupLoadMode="Server" TableLayout="Fixed" CommandItemSettings-ShowAddNewRecordButton="False" CommandItemSettings-ShowRefreshButton="False">
                            <Columns>
                                <telerik:GridBoundColumn DataField="LastName" UniqueName="LastName" HeaderText="LastName">
                                    <HeaderStyle Width="150" Wrap="false" />
                                    <ItemStyle Wrap="false" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="FirstName" UniqueName="FirstName" HeaderText="FirstName">
                                    <HeaderStyle Width="150" Wrap="false" />
                                    <ItemStyle Wrap="false" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="Title" UniqueName="Title" HeaderText="Title">
                                    <HeaderStyle Width="150" Wrap="false" />
                                    <ItemStyle Wrap="false" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="TitleOfCourtesy" UniqueName="TitleOfCourtesy" HeaderText="TitleOfCourtesy">
                                    <HeaderStyle Width="200" Wrap="false" />
                                    <ItemStyle Wrap="false" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="BirthDate" HeaderText="BirthDate" UniqueName="BirthDate" >
                                    <HeaderStyle Width="90" Wrap="false" />
                                    <ItemStyle HorizontalAlign="Right" Wrap="false" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="Address" UniqueName="Address" HeaderText="Address">
                                    <HeaderStyle Width="90" Wrap="false" />
                                    <ItemStyle Wrap="false" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="City" UniqueName="City" HeaderText="City">
                                    <HeaderStyle Width="90" Wrap="false" />
                                    <ItemStyle Wrap="false" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="Region" UniqueName="Region" HeaderText="Region">
                                    <HeaderStyle Width="90" Wrap="false" />
                                    <ItemStyle HorizontalAlign="Right" Wrap="false" />
                                </telerik:GridBoundColumn>
                                <telerik:GridDateTimeColumn UniqueName="PostalCode" DataField="PostalCode" HeaderText="PostalCode">
                                    <HeaderStyle Wrap="false" Width="100" />
                                    <ItemStyle Wrap="false" />
                                </telerik:GridDateTimeColumn>
                                <telerik:GridDateTimeColumn UniqueName="HomePhone" DataField="HomePhone" HeaderText="HomePhone">
                                    <HeaderStyle Wrap="false" Width="100" />
                                    <ItemStyle Wrap="false" />
                                </telerik:GridDateTimeColumn>
                                <telerik:GridBoundColumn DataField="Extension" UniqueName="Extension" HeaderText="Extension">
                                    <HeaderStyle Width="100" Wrap="false" />
                                    <ItemStyle Wrap="false" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="Notes" UniqueName="Notes" HeaderText="Notes">
                                    <HeaderStyle Width="120" Wrap="false" />
                                    <ItemStyle HorizontalAlign="Right" Wrap="false" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="ReportsTo" UniqueName="ReportsTo" HeaderText="ReportsTo" DataFormatString="{0:c}">
                                    <HeaderStyle Width="100" Wrap="false" />
                                    <ItemStyle HorizontalAlign="Right" Wrap="false" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="PhotoPath" UniqueName="PhotoPath" HeaderText="PhotoPath">
                                    <HeaderStyle Width="110" Wrap="false" />
                                    <ItemStyle Wrap="false" />
                                </telerik:GridBoundColumn>
                            </Columns>
                            <NoRecordsTemplate>
                                <div style="padding: 10px; text-align: center">
                                    No Offers to display.</div>
                            </NoRecordsTemplate>
                            <CommandItemTemplate>
                                <telerik:RadToolBar ID="GridToolbarOffers" runat="server" Width="100%" AutoPostBack="true">
                                    <Items>
                                        <telerik:RadToolBarButton ImageUrl="~/images/icons/document-excel.png" CommandName="ExportToExcel" Text="Export to Excel" />
                                        <telerik:RadToolBarButton ImageUrl="~/images/icons/report.png" CommandName="ExportPropertyValuesReport" Text="Print Report" Enabled="False" />
                                    </Items>
                                </telerik:RadToolBar>
                            </CommandItemTemplate>
                            </MasterTableView>
                        </telerik:RadGrid>
                </div>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

1 Answer, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 05 Mar 2012, 08:15 AM
Hello Kevin,

In order to have the grids show at 100% width but their columns to take up more space, you could try leaving out the grids without any width setting (as it is 100% by default) and then set the fixed width to the MasterTableView.

All the best,
Tsvetina
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.
Tags
Grid
Asked by
Kevin
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or