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

Unwanted Horizontal Scroll on Page due to RadGrid

7 Answers 483 Views

Grid

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

7 Answers, 1 is accepted

answered on 22 Nov 2012, 05:41 AM

Hi Pavlina,

Thanks for your response. I have done the same as you told in your post. I got scrolling in grid which fine for me and I want it from control but problem is that it causes horizontal scrolling on main page on which grid is used. I don't know why this is happening. Please see the code below and help me out if you figure out the problem.

<telerik:RadGrid ID="grdOpenProjects" runat="server" AutoGenerateColumns="false"

Width="1200px" EnableViewState="true" AllowSorting="true" Skin="WebBlue" GridLines="Both"

AllowFilteringByColumn="true" Height="580px" OnItemDataBound="grdOpenProjects_ItemDataBound"

OnDeleteCommand="grdOpenProjects_DeleteCommand"

OnItemCommand="grdOpenProjects_ItemCommand"

ondetailtabledatabind="grdOpenProjects_DetailTableDataBind">

<GroupingSettings CaseSensitive="false" />

<MasterTableView Width="100%" DataKeyNames="PRF_ID" AllowMultiColumnSorting="true"

AllowFilteringByColumn="true">

<CommandItemSettings ExportToPdfText="Export to PDF" />

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

</ExpandCollapseColumn>

<DetailTables>

<telerik:GridTableView DataKeyNames="PRF_ID" Name="Revisions" Width="100%">

<Columns>

<telerik:GridButtonColumn UniqueName="Delete" ConfirmText="Are you sure to delete this PRF?"

ConfirmDialogType="RadWindow" ConfirmTitle="Delete" ButtonType="ImageButton"

CommandName="Delete" ConfirmDialogHeight="100px" ConfirmDialogWidth="350px">

<ItemStyle Width="20px" />

<HeaderStyle Width="20px" />

</telerik:GridButtonColumn>

<telerik:GridButtonColumn UniqueName="Open" ButtonType="ImageButton" CommandName="Select"

ImageUrl="~/Images/Open.png" ConfirmTitle="Open" HeaderText="Open">

<ItemStyle Width="40px" />

<HeaderStyle Width="40px" />

</telerik:GridButtonColumn>

<telerik:GridBoundColumn UniqueName="PRF_ID" DataField="PRF_ID" Visible="false" DataType="System.Guid">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="PRF_Ref" DataField="PRF_Ref" HeaderText="PRF-Reference#"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"

SortExpression="ProjectTitle">

<HeaderStyle Width="120px" />

<ItemStyle Width="120px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="PRF_Date" DataField="PRF_Date" HeaderText="PRF-Date"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"

SortExpression="ProjectTitle" DataFormatString="{0:d}">

<HeaderStyle Width="100px" />

<ItemStyle Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ProjectTitle" HeaderText="Project Title" DataField="ProjectTitle"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"

SortExpression="ProjectTitle">

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ProjectType" SortExpression="ProjectType" HeaderText="Project Type"

DataField="ProjectType" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

ShowFilterIcon="false">

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="PnL" SortExpression="PnL" HeaderText="P&L" DataField="PnL"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false">

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SalesPerson" SortExpression="Sales Person"

HeaderText="Sales Person" DataField="Sales Person" AutoPostBackOnFilter="true"

CurrentFilterFunction="Contains" ShowFilterIcon="false">

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Customer" SortExpression="Customer" HeaderText="Customer"

DataField="Customer" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

ShowFilterIcon="false">

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="EndUser" SortExpression="EndUser" HeaderText="EndUser"

DataField="EndUser" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

ShowFilterIcon="false">

<HeaderStyle Width="180px" />

<ItemStyle Width="180px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="RFQ_Ref" DataField="RFQ_Ref" SortExpression="RFQ_Ref"

HeaderText="RFQ Reference #">

<HeaderStyle Width="180px" />

<ItemStyle Width="180px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="RFQ_Date" SortExpression="RFQ_Date" HeaderText="RFQ Date"

DataField="RFQ_Date" DataFormatString="{0:d}">

<HeaderStyle Width="180px" />

<ItemStyle Width="180px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Company" SortExpression="Company"

HeaderText="Company" DataField="Company" AutoPostBackOnFilter="true"

CurrentFilterFunction="Contains">

<HeaderStyle Width="220px" />

<ItemStyle Width="220px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Currency" SortExpression="Currency" HeaderText="Currency"

DataField="Currency" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains">

<HeaderStyle Width="100px" />

<ItemStyle Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ApproxProjectValue" SortExpression="ApproxProjectValue"

HeaderText="Approximate Project Value" DataField="ApproxProjectValue" AutoPostBackOnFilter="true"

CurrentFilterFunction="Contains">

<HeaderStyle Width="180px" />

<ItemStyle Width="180px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="TargetPrice" SortExpression="TargetPrice"

HeaderText="Target Price" DataField="TargetPrice" AutoPostBackOnFilter="true"

CurrentFilterFunction="Contains">

<HeaderStyle Width="180px" />

<ItemStyle Width="180px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SCEngineer1" SortExpression="SC Engineer1"

HeaderText="SC Engineer1" DataField="SC Engineer1" AutoPostBackOnFilter="true"

CurrentFilterFunction="Contains">

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SCEngineer2" SortExpression="SC Engineer2"

HeaderText="SC Engineer2" DataField="SC Engineer2" AutoPostBackOnFilter="true"

CurrentFilterFunction="Contains">

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SCEngineer3" SortExpression="SC Engineer3"

HeaderText="SC Engineer3" DataField="SC Engineer3" AutoPostBackOnFilter="true"

CurrentFilterFunction="Contains">

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="IsPRFSubmitted" DataField="IsPRFSubmitted"

HeaderText="PRF Submitted">

<ItemTemplate>

<asp:CheckBox ID="chkPRFSubmitted" runat="server" Checked='<%# DataBinder.Eval(Container.DataItem, "IsPRFSubmitted") %>'

Enabled="false" />

</ItemTemplate>

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="IsSCEnggAssigned" DataField="IsSCEnggAssigned"

HeaderText="SC-Engg Assigned">

<ItemTemplate>

<asp:CheckBox ID="chkSCEnggAssigned" runat="server" Checked='<%# DataBinder.Eval(Container.DataItem, "IsSCEnggAssigned") %>'

Enabled="false" />

</ItemTemplate>

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="IsProposalSubmitted" DataField="IsProposalSubmitted"

HeaderText="Proposal Submitted">

<ItemTemplate>

<asp:CheckBox ID="chkProposalSubmitted" runat="server" Checked='<%# DataBinder.Eval(Container.DataItem, "IsProposalSubmitted") %>'

Enabled="false" />

</ItemTemplate>

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn UniqueName="ModifiedBy" DataField="ModifiedBy" HeaderText="Modified By">

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SalesPersonId" DataField="SalesPersonId" Visible="false" />

<telerik:GridBoundColumn UniqueName="SalesPerson2Id" DataField="SalesPerson2Id" Visible="false" />

<telerik:GridBoundColumn UniqueName="SalesPerson3Id" DataField="SalesPerson3Id" Visible="false" />

<telerik:GridBoundColumn UniqueName="PRFInitiatedBy" DataField="PRFInitiatedBy" Visible="false" />

<telerik:GridBoundColumn UniqueName="PnLId" DataField="PnLId" Visible="false" />

<telerik:GridBoundColumn UniqueName="CompanyID" DataField="CompanyID" Visible="false" />

<telerik:GridBoundColumn UniqueName="SC_EngineerUserID" DataField="SC_EngineerUserID"

Visible="false" />

<telerik:GridBoundColumn UniqueName="MasterPRF_ID" DataField="MasterPRF_ID" Visible="false" />

<telerik:GridBoundColumn UniqueName="Rev" DataField="Rev" Visible="false" />

</Columns>

</telerik:GridTableView>

</DetailTables>

<Columns>

<telerik:GridButtonColumn UniqueName="Delete" ConfirmText="Are you sure to delete this PRF?"

ConfirmDialogType="RadWindow" ConfirmTitle="Delete" ButtonType="ImageButton"

CommandName="Delete" ConfirmDialogHeight="100px" ConfirmDialogWidth="350px">

<ItemStyle Width="20px" />

<HeaderStyle Width="20px" />

</telerik:GridButtonColumn>

<telerik:GridButtonColumn UniqueName="Open" ButtonType="ImageButton" CommandName="Select"

ImageUrl="~/Images/Open.png" ConfirmTitle="Open" HeaderText="Open">

<ItemStyle Width="40px" />

<HeaderStyle Width="40px" />

</telerik:GridButtonColumn>

<telerik:GridBoundColumn UniqueName="PRF_ID" DataField="PRF_ID" Visible="false" DataType="System.Guid">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="PRF_Ref" DataField="PRF_Ref" HeaderText="PRF-Reference#"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"

SortExpression="ProjectTitle">

<HeaderStyle Width="120px" />

<ItemStyle Width="120px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="PRF_Date" DataField="PRF_Date" HeaderText="PRF-Date"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"

SortExpression="ProjectTitle" DataFormatString="{0:d}">

<HeaderStyle Width="100px" />

<ItemStyle Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ProjectTitle" HeaderText="Project Title" DataField="ProjectTitle"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"

SortExpression="ProjectTitle">

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ProjectType" SortExpression="ProjectType" HeaderText="Project Type"

DataField="ProjectType" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

ShowFilterIcon="false">

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="PnL" SortExpression="PnL" HeaderText="P&L" DataField="PnL"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false">

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SalesPerson" SortExpression="Sales Person"

HeaderText="Sales Person" DataField="Sales Person" AutoPostBackOnFilter="true"

CurrentFilterFunction="Contains" ShowFilterIcon="false">

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Customer" SortExpression="Customer" HeaderText="Customer"

DataField="Customer" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

ShowFilterIcon="false">

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="EndUser" SortExpression="EndUser" HeaderText="EndUser"

DataField="EndUser" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

ShowFilterIcon="false">

<HeaderStyle Width="180px" />

<ItemStyle Width="180px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="RFQ_Ref" DataField="RFQ_Ref" SortExpression="RFQ_Ref"

HeaderText="RFQ Reference #">

<HeaderStyle Width="180px" />

<ItemStyle Width="180px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="RFQ_Date" SortExpression="RFQ_Date" HeaderText="RFQ Date"

DataField="RFQ_Date" DataFormatString="{0:d}">

<HeaderStyle Width="180px" />

<ItemStyle Width="180px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Company" SortExpression="Company"

HeaderText="Company" DataField="Company" AutoPostBackOnFilter="true"

CurrentFilterFunction="Contains">

<HeaderStyle Width="220px" />

<ItemStyle Width="220px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Currency" SortExpression="Currency" HeaderText="Currency"

DataField="Currency" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains">

<HeaderStyle Width="100px" />

<ItemStyle Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ApproxProjectValue" SortExpression="ApproxProjectValue"

HeaderText="Approximate Project Value" DataField="ApproxProjectValue" AutoPostBackOnFilter="true"

CurrentFilterFunction="Contains">

<HeaderStyle Width="180px" />

<ItemStyle Width="180px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="TargetPrice" SortExpression="TargetPrice"

HeaderText="Target Price" DataField="TargetPrice" AutoPostBackOnFilter="true"

CurrentFilterFunction="Contains">

<HeaderStyle Width="180px" />

<ItemStyle Width="180px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SCEngineer1" SortExpression="SC Engineer1"

HeaderText="SC Engineer1" DataField="SC Engineer1" AutoPostBackOnFilter="true"

CurrentFilterFunction="Contains">

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SCEngineer2" SortExpression="SC Engineer2"

HeaderText="SC Engineer2" DataField="SC Engineer2" AutoPostBackOnFilter="true"

CurrentFilterFunction="Contains">

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SCEngineer3" SortExpression="SC Engineer3"

HeaderText="SC Engineer3" DataField="SC Engineer3" AutoPostBackOnFilter="true"

CurrentFilterFunction="Contains">

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="IsPRFSubmitted" DataField="IsPRFSubmitted"

HeaderText="PRF Submitted">

<ItemTemplate>

<asp:CheckBox ID="chkPRFSubmitted" runat="server" Checked='<%# DataBinder.Eval(Container.DataItem, "IsPRFSubmitted") %>'

Enabled="false" />

</ItemTemplate>

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="IsSCEnggAssigned" DataField="IsSCEnggAssigned"

HeaderText="SC-Engg Assigned">

<ItemTemplate>

<asp:CheckBox ID="chkSCEnggAssigned" runat="server" Checked='<%# DataBinder.Eval(Container.DataItem, "IsSCEnggAssigned") %>'

Enabled="false" />

</ItemTemplate>

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="IsProposalSubmitted" DataField="IsProposalSubmitted"

HeaderText="Proposal Submitted">

<ItemTemplate>

<asp:CheckBox ID="chkProposalSubmitted" runat="server" Checked='<%# DataBinder.Eval(Container.DataItem, "IsProposalSubmitted") %>'

Enabled="false" />

</ItemTemplate>

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn UniqueName="ModifiedBy" DataField="ModifiedBy" HeaderText="Modified By">

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SalesPersonId" DataField="SalesPersonId" Visible="false" />

<telerik:GridBoundColumn UniqueName="SalesPerson2Id" DataField="SalesPerson2Id" Visible="false" />

<telerik:GridBoundColumn UniqueName="SalesPerson3Id" DataField="SalesPerson3Id" Visible="false" />

<telerik:GridBoundColumn UniqueName="PRFInitiatedBy" DataField="PRFInitiatedBy" Visible="false" />

<telerik:GridBoundColumn UniqueName="PnLId" DataField="PnLId" Visible="false" />

<telerik:GridBoundColumn UniqueName="CompanyID" DataField="CompanyID" Visible="false" />

<telerik:GridBoundColumn UniqueName="SC_EngineerUserID" DataField="SC_EngineerUserID"

Visible="false" />

<telerik:GridBoundColumn UniqueName="MasterPRF_ID" DataField="MasterPRF_ID" Visible="false" />

<telerik:GridBoundColumn UniqueName="Rev" DataField="Rev" Visible="false" />

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<ClientSettings EnableRowHoverStyle="true" EnableAlternatingItems="false" ReorderColumnsOnClient="True"

AllowColumnsReorder="True">

<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True">

</Scrolling>

<Selecting AllowRowSelect="true" />

</ClientSettings>

<FilterMenu EnableImageSprites="False">

</FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Vista">

</HeaderContextMenu>

</telerik:RadGrid>

answered on 04 Dec 2012, 03:17 PM

browser-scroll.zip

Hi,

To prevent horizontal scrollbar of the browser to appear and keep the vertical scroll you can use the CSS class below:

<style type="text/css">

body

{

overflow-x: hidden;

}

</style>

You can also remove the fixed width of the grid which you have set.

I am also attaching a sample project which I prepared based on the provided code and it is working as you expected.

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.