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

Horizontal Scroll not located at bottom of GRID

3 Answers 115 Views

Grid

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

Julian asked on 15 Feb 2012, 09:00 PM

I have a RadGrid that has the following clientSettings.

<ClientSettings>

<Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="700" EnableVirtualScrollPaging="false" SaveScrollPosition="false" />

</ClientSettings>

So I want the vertical scroll to appear when the Grid grows past the 700 height I have specified in the scrollHeight. This works fine. The problem I'm running into is that the horizontal scrollbar is always appearing at the location of the max scrollHeight (700). So If my grid has 2 rows the horizontal scroll is way down the page and there is a bunch of white space filling in the space between the bottom of the 2nd row and the actual Horizontal scroll bar.

Any help or ideas would be appreciated. If you need more code I can paste more but the issue seems pretty clear and I was hoping for a fairly simple fix.

Thanks,

Julian

3 Answers, 1 is accepted

answered on 17 Feb 2012, 03:52 PM

I just don't see how the records in my grid could possibly exceed that height. I'm not specifying a height for the grid and in my test case with a few records we are in no way coming close to the scroll height of 700. I am using a fairly complex hierarchical view. Here is the aspx code. A couple sections collapsed but they should not apply. Maybe you can see something I'm missing.

<div id="content" class="content" >

<telerik:RadTabStrip Skin="Vista" runat="server" ID="TabStrip1" MultiPageID="taskAlertMultiPage" SelectedIndex="0">

<Tabs>

<telerik:RadTab runat="server" Text="Tasks" PageViewID="taskPageView" />

<telerik:RadTab runat="server" Text="Alerts" PageViewID="alertsPageView" />

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" ID="taskAlertMultiPage" SelectedIndex="0" RenderSelectedPageOnly="false">

<telerik:RadPageView runat="server" ID="taskPageView">

<div id="TaskGrid" runat="server">

<telerik:RadGrid ID="tasksRadGrid" Width="1000"

OnNeedDataSource="TasksRadGrid_NeedDataSource" runat="server"

AllowSorting="True" AllowMultiRowSelection="False" AllowPaging="True" PageSize="15"

GridLines="Both" OnItemDataBound="TasksRadGrid_ItemDataBound"

OnItemCommand="TasksRadGrid_ItemCommand" AutoGenerateColumns="false" Skin="Vista"

AllowFilteringByColumn="true" >

<PagerStyle Mode="NumericPages"></PagerStyle>

<MasterTableView EnableViewState="true" DataKeyNames="ClientID,EntityID,ExtDocID,ID,DocumentName,TaskName,ExplorerViewName,UserRole,UserType,PeriodLocked"

AllowMultiColumnSorting="True" HierarchyLoadMode="ServerOnDemand" >

<NestedViewTemplate>

<asp:Panel runat="server" ID="InnerContainer" CssClass="detailTable">

<telerik:RadTabStrip Skin="Vista" runat="server" ID="taskActionTabStrip" MultiPageID="taskActionMultiPage" SelectedIndex="0">

<Tabs>

<telerik:RadTab runat="server" Text="Delegation" PageViewID="DelegationPageView" />

<%--<telerik:RadTab runat="server" Text="Unlock" PageViewID="UnlockPageView" />--%>

<telerik:RadTab runat="server" Text="Request More Information" PageViewID="RequestInfoPageView" />

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" ID="taskActionMultiPage" SelectedIndex="0" RenderSelectedPageOnly="false">

<telerik:RadPageView runat="server" ID="DelegationPageView" BackColor="#EFEFF7">

<asp:Panel ID="Panel1" runat="server" >

<table id="DelegationTable">

<tr>

<td>

<table>

<tr>

<td colspan="2" width="130">

<asp:Label ID="lblDelegation" runat="server">Delegate Task To:</asp:Label>

</td>

<td align="left">

<asp:DropDownList Width="150" OnSelectedIndexChanged="DelegateDropDown_SelectedIndexChanged"

ID="delegateDropDown" runat="server">

<asp:ListItem Text="" Value="" />

</asp:DropDownList>

</td>

<td align="left">

<asp:Button Width="60" ID="delegation" runat="server" Text="Save" OnClick="DelegationButton_Click" />

</td>

</tr>

<tr>

<td></td>

</tr>

<tr>

<td colspan="4">

<asp:Label ID="delegateStatus" runat="server" />

</td>

</tr>

<tr><td></td></tr>

<tr>

<td></td>

<td colspan="3">

<asp:LinkButton CssClass="linkButton" ID="cancelDelegation" runat="server" Text=""

OnClick="CancelDelegation_Click"></asp:LinkButton>

</td>

</tr>

<tr>

<td></td>

<td colspan="3">

<asp:LinkButton CssClass="linkButton" ID="rejectDelegation" runat="server" Text=""

OnClick="RejectDelegation_Click"></asp:LinkButton>

</td>

</tr>

</table>

</td>

</tr>

</table>

</asp:Panel>

</telerik:RadPageView>

<%--<telerik:RadPageView runat="server" ID="UnlockPageView">

<table id="UnlockTable">

<tr><td></td></tr>

<tr>

<td>

<table>

<tr>

<td colspan="3">

<asp:Label ID="lockStatus" runat="server" Text="" />

</td>

</tr>

</table>

<table>

<tr><td></td></tr>

<tr>

<td><asp:Label ID="unlockDocument" runat="server" Text="" /></td>

<td>

<asp:Button CssClass="button" ID="btnUnlock" runat="server" Text="Yes"

OnClick="UnlockButton_Click" Visible="true"></asp:Button>

</td>

</tr>

</table>

</td>

</tr>

</table>

</telerik:RadPageView>--%>

<telerik:RadPageView runat="server" ID="RequestInfoPageView">

<asp:Panel ID="MoreInfoPanel" runat="server">

<table id="RequestMoreInfoTable">

<tr>

<td></td>

</tr>

<tr>

<td>

<table>

<tr>

<td class="indent">

</td>

<td align="left">

Select Alert Recipient(s):

</td>

<td align="left">

<asp:DropDownList Width="200" ID="alertRecipients" runat="server">

<asp:ListItem Text="" Value="" />

</asp:DropDownList>

</td>

</tr>

<tr>

<td class="indent">

</td>

<td align="left">

Enter Alert Subject:

</td>

<td align="left">

<asp:TextBox Width="300px" ID="alertSubject" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td class="indent">

</td>

<td colspan="2" align="left" valign="top">

Enter Alert Text Below:

</td>

</tr>

<tr>

<td class="indent">

</td>

<td colspan="2" align="right">

<telerik:RadEditor ID="radEditAlertText" Height="200px" Width="500px" ToolsFile="RadControls/Editor/BasicTools.xml"

ShowSubmitCancelButtons="false" ShowHtmlMode="false" ShowPreviewMode="false"

Skin="Default" SkinsPath="~/App_Themes/Vertex/Editor" runat="server">

<Content></Content>

</telerik:RadEditor>

</td>

</tr>

<tr align="right">

<td>

</td>

<td colspan="2">

<asp:Button ID="btnSendAlert" Text="Send Alert" CommandName="RequestMoreInfo" runat="server"

OnClick="SendAlertButton_Click" />

</td>

</tr>

</table>

</td>

</tr>

</table>

</asp:Panel>

</telerik:RadPageView>

</telerik:RadMultiPage>

</asp:Panel>

</NestedViewTemplate>

<Columns>

<telerik:GridBoundColumn HeaderText="" DataField="DocumentUserID" UniqueName="DocumentUserID"

Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="" DataField="ExplorerViewID" UniqueName="ExplorerViewID"

Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="" DataField="ExtDocID" UniqueName="ExtDocID"

Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="" DataField="LockedUserName" UniqueName="LockedUserName"

Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="" DataField="UserID" UniqueName="UserID" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="" DataField="DelegateUserID" UniqueName="DelegateUserID"

Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="" DataField="ID" UniqueName="ID"

Visible="false">

</telerik:GridBoundColumn>

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

DataField="EntityObligationID" Visible="false">

</telerik:GridBoundColumn>

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

DataField="ObligationType" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridButtonColumn CommandName="Download" ButtonType="ImageButton" ImageUrl="Images/download.gif"

Text="Download Document" UniqueName="Download" HeaderStyle-Width="35px">

</telerik:GridButtonColumn>

<telerik:GridBoundColumn FooterStyle-Wrap="false" SortExpression="ClientName" ItemStyle-Wrap="false"

HeaderText="Client" HeaderButtonType="TextButton" DataField="ClientName" UniqueName="ClientName" HeaderStyle-Width="140px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="EntityCode" ItemStyle-Wrap="false" HeaderText="Entity"

HeaderButtonType="TextButton" DataField="EntityCode" UniqueName="EntityCode" HeaderStyle-Width="140px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="EntityCodeDesc" ItemStyle-Wrap="false" HeaderText="Entity"

HeaderButtonType="TextButton" DataField="EntityCodeDesc" UniqueName="EntityCodeDesc" HeaderStyle-Width="140px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="ExplorerViewName" FooterStyle-Wrap="false"

ItemStyle-Wrap="false" HeaderText="Template Name" HeaderButtonType="TextButton"

DataField="ExplorerViewName" UniqueName="ExplorerViewName">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="DocumentName" UniqueName="DocumentName" HeaderText="Document / Task Name" HeaderStyle-Width="240px">

<ItemTemplate>

<asp:LinkButton ID="DocumentNameLinkButton" OnClick="DownloadDocument_Click" runat="server" Text='<%# Bind("DocumentName") %>' />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="TaskName" UniqueName="TaskName" HeaderText="Document / Task Name">

<ItemTemplate>

<asp:LinkButton ID="TaskNameLinkButton" OnClick="DownloadDocument_Click" runat="server" Text='<%# Bind("TaskName") %>' />

<telerik:RadToolTip id="TaskNameToolTip" TargetControlID="TaskNameLinkButton" Position="BottomCenter" Text="Hello" runat="server"/>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn SortExpression="UserRole" FooterStyle-Wrap="false"

ItemStyle-Wrap="false" HeaderText="User Role" HeaderButtonType="TextButton"

DataField="UserRole" UniqueName="UserRole" HeaderStyle-Width="120px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="UserType" FooterStyle-Wrap="false"

ItemStyle-Wrap="false" HeaderButtonType="TextButton"

DataField="UserType" UniqueName="UserType" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="ObligationName" ItemStyle-Wrap="false" HeaderText="Obligation"

HeaderButtonType="TextButton" DataField="ObligationName" UniqueName="ObligationName" HeaderStyle-Width="120px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="PeriodName" ItemStyle-Wrap="false" HeaderText="Period"

HeaderButtonType="TextButton" DataField="PeriodName" UniqueName="PeriodName" HeaderStyle-Width="120px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="PeriodLocked" ItemStyle-Wrap="false" HeaderText="Period Locked"

HeaderButtonType="TextButton" DataField="PeriodLocked" UniqueName="PeriodLocked" HeaderStyle-Width="96px">

</telerik:GridBoundColumn>

<telerik:GridDateTimeColumn DataFormatString="{0:M/d/yyyy}" SortExpression="DueDate"

ItemStyle-Wrap="false" HeaderText="Due Date" HeaderButtonType="TextButton" DataField="DueDate"

UniqueName="DueDate" HeaderStyle-Width="126px">

</telerik:GridDateTimeColumn>

<telerik:GridBoundColumn SortExpression="CurrentStatus" ItemStyle-Wrap="false" HeaderText="Status"

HeaderButtonType="TextButton" DataField="CurrentStatus" UniqueName="CurrentStatus"

AllowFiltering="false" Visible="true" HeaderStyle-Width="80px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Status" ItemStyle-Wrap="false" HeaderText="Status"

HeaderButtonType="TextButton" DataField="Status" UniqueName="Status"

AllowFiltering="false" HeaderStyle-Width="80px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="AssignedUserID" ItemStyle-Wrap="false"

HeaderButtonType="TextButton" DataField="AssignedUserID" UniqueName="AssignedUserID" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="ApproverUserID" ItemStyle-Wrap="false"

HeaderButtonType="TextButton" DataField="ApproverUserID" UniqueName="ApproverUserID" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="FirstReviewerUserID" ItemStyle-Wrap="false"

HeaderButtonType="TextButton" DataField="FirstReviewerUserID" UniqueName="FirstReviewerUserID" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="SecondReviewerUserID" ItemStyle-Wrap="false"

HeaderButtonType="TextButton" DataField="SecondReviewerUserID" UniqueName="SecondReviewerUserID" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="AssignedDelegateID" ItemStyle-Wrap="false"

HeaderButtonType="TextButton" DataField="AssignedDelegateID" UniqueName="AssignedDelegateID" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="ApproverDelegateID" ItemStyle-Wrap="false"

HeaderButtonType="TextButton" DataField="ApproverDelegateID" UniqueName="ApproverDelegateID" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="FirstReviewerDelegateID" ItemStyle-Wrap="false"

HeaderButtonType="TextButton" DataField="FirstReviewerDelegateID" UniqueName="FirstReviewerDelegateID" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="SecondReviewerDelegateID" ItemStyle-Wrap="false"

HeaderButtonType="TextButton" DataField="SecondReviewerDelegateID" UniqueName="SecondReviewerDelegateID" Visible="false">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<Scrolling AllowScroll="true" ScrollHeight="640" UseStaticHeaders="true" EnableVirtualScrollPaging="false" SaveScrollPosition="true" />

</ClientSettings>

</telerik:RadGrid>

<div id="refresh">

<asp:panel id="RefreshPanel" runat="server">

<table>

<tr>

<td> </td>

</tr>

<tr>

<td width="440"> </td>

<td align="right">

<asp:Button EnableTheming="true" ID="RefreshGrid" runat="server" Text="Refresh Tasks" OnClick="RefreshGrid_Click" />

</td>

</tr>

</table>

</asp:panel>

</div>

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="alertsPageView">

<telerik:RadGrid ID="AlertsGrid" Width="1000" runat="server" OnNeedDataSource="AlertsGrid_NeedDataSource"

ShowGroupPanel="false" OnItemCommand="AlertsGrid_ItemCommand" AllowSorting="True"

AllowMultiRowSelection="False" AllowPaging="True" PageSize="10" GridLines="Both"

AutoGenerateColumns="false" Skin="Vista" AllowFilteringByColumn="true">

<PagerStyle Mode="NumericPages"></PagerStyle>

<MasterTableView EnableViewState="true" DataKeyNames="AlertID,ClientID,EntityID"

AllowMultiColumnSorting="True" HierarchyLoadMode="ServerOnDemand">

<NestedViewTemplate>

<table class="detailTable" cellpadding="0px">

<tr>

<td class="headerText">

Alert Contents

</td>

</tr>

<tr>

<td>

<asp:Label Width="600" ID="bodyText" runat="server" />

</td>

</tr>

</table>

<asp:Panel runat="server" ID="delegationResponsePanel" Visible="false">

<table class="detailTable">

<tr>

<td>

</td>

</tr>

<tr>

<td class="headerText">

Delegation Response

</td>

</tr>

<tr id="delegateResponse">

<td>

Would you like to <asp:LinkButton CssClass="linkButton" ID="acceptDelegation"

Text="accept" runat="server" OnClick="AcceptDelegation_Click" /> this

delegation.

</td>

</tr>

</table>

</asp:Panel>

<asp:Panel runat="server" ID="helpResponsePanel" Visible="false">

<table class="detailTable">

<tr>

<td class="spacer">

</td>

</tr>

<tr>

<td>

<asp:LinkButton ID="btnHelpResponse" CssClass="linkButton" Text="Click here to respond to this request for more information."

OnClick="HelpResponseButton_Click" runat="server"></asp:LinkButton>

</td>

</tr>

</table>

</asp:Panel>

<asp:Panel runat="server" ID="createResponseAlertPanel" Visible="false">

<table class="detailTable">

<tr>

<td>

<table>

<tr>

<td class="indent">

</td>

<td align="left">

Select Alert Recipient(s):

</td>

<td align="left">

<asp:DropDownList Width="200" ID="alertRecipients" runat="server">

<asp:ListItem Text="" Value="" />

</asp:DropDownList>

</td>

</tr>

<tr>

<td class="indent">

</td>

<td align="left">

Enter Alert Subject:

</td>

<td align="left">

<asp:TextBox Width="300px" ID="alertSubject" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td class="indent">

</td>

<td colspan="2" align="left" valign="top">

Enter Alert Text Below:

</td>

</tr>

<tr>

<td class="indent">

</td>

<td colspan="2" align="right">

<telerik:RadEditor ID="radEditAlertText" Height="200px" Width="500px" ToolsFile="RadControls/Editor/BasicTools.xml"

ShowSubmitCancelButtons="false" ShowHtmlMode="false" ShowPreviewMode="false"

Skin="Default" SkinsPath="~/App_Themes/Vertex/Editor" runat="server">

<Content></Content>

</telerik:RadEditor>

</td>

</tr>

<tr align="right">

<td>

</td>

<td colspan="2">

<asp:Button ID="btnSendAlert" Text="Send Alert" CommandName="ResponseToRequest" runat="server"

OnClick="SendAlertButton_Click" />

</td>

</tr>

</table>

</td>

</tr>

</table>

</asp:Panel>

<table class="detailTable" cellpadding="0px">

<tr>

<td></td>

<td>

<asp:button ID="DeleteAlert" Text="Delete Alert" CommandName="DeleteAlert" runat="server" OnClick="DeleteAlert_Click" />

</td>

</tr>

</table>

</NestedViewTemplate>

<Columns>

<telerik:GridBoundColumn SortExpression="EventName" HeaderText="Alert Event" HeaderButtonType="TextButton"

DataField="EventName" UniqueName="EventName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="EntityCode" HeaderText="Entity" HeaderButtonType="TextButton"

DataField="EntityCode" UniqueName="EntityCode">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Obligation" HeaderText="Obligation" HeaderButtonType="TextButton"

DataField="Obligation" UniqueName="Obligation">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Period" HeaderText="Period" HeaderButtonType="TextButton"

DataField="Period" UniqueName="Period">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="SubjectText" HeaderText="Alert Subject"

HeaderButtonType="TextButton" DataField="SubjectText" UniqueName="SubjectText">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="CreateDateTime" HeaderText="Creation Date"

HeaderButtonType="TextButton" DataField="CreateDateTime" UniqueName="CreateDateTime">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="CreateUserName" HeaderText="User" HeaderButtonType="TextButton"

DataField="CreateUserName" UniqueName="CreateUserName" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="BodyText" HeaderText="" HeaderButtonType="TextButton"

DataField="BodyText" UniqueName="BodyText" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="" DataField="EventTypeID" UniqueName="EventTypeID"

Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="" DataField="CreateUserID" UniqueName="CreateUserID"

Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="" DataField="ID" UniqueName="ID"

Visible="false">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</telerik:RadPageView>

</telerik:RadMultiPage>

</div>

answered on 20 Feb 2012, 09:41 PM

I have come up with my own solution for the problem. Since the grid insisted on placing the horizontal scroll at the location of the scrollHeight parameter I manage the scrollHeight so the HBar appears at the very bottom of my grid. This is how I handle it on the Pager pages. You may close this thread as resolved.

protected void TasksRadGrid_ItemEvent(object sender, Telerik.Web.UI.GridItemEventArgs e)

{

int rowsOnCurrentPage = 0;

if (e.EventInfo is GridInitializePagerItem)

{

rowsOnCurrentPage = tasksRadGrid.MasterTableView.Items.Count;

// Figure out scrollHeight for page (Meaning page from the Pager Control)

if (rowsOnCurrentPage == 15)

{

scrollHeight = 620;

}

else if (rowsOnCurrentPage == 1)

{

scrollHeight = 60;

}else

{

scrollHeight = ((rowsOnCurrentPage - 1) * 40) + 60;

}