Bailey Everitt
Top achievements
Rank 1
Rank 1
Bailey Everitt
asked on 19 Dec 2008, 12:27 AM
Hi Everyone,
I have a Splitter, that has a three sections. The top panel is a sliding panel (top), a middle panel contains a grid, and the bottom panel will contain various controls. My problem is that when the grid is populated with data, through a button click on the sliding panel, the grid is only occupying about half of the middle panel. The thing is, when I dock the sliding panel, then undock it, the grid will resize and then occupy the entire middle section. Below is my code. Any help is greatly appreciated!
I have a Splitter, that has a three sections. The top panel is a sliding panel (top), a middle panel contains a grid, and the bottom panel will contain various controls. My problem is that when the grid is populated with data, through a button click on the sliding panel, the grid is only occupying about half of the middle panel. The thing is, when I dock the sliding panel, then undock it, the grid will resize and then occupy the entire middle section. Below is my code. Any help is greatly appreciated!
| <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Trips.aspx.cs" Inherits="Web.Trips" %> |
| <%@ 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 id="Head1" runat="server"> |
| <title>Untitled Page</title> |
| <style type="text/css"> |
| .RadPicker_WebBlue |
| { |
| vertical-align: middle; |
| } |
| .RadPicker_WebBlue .rcInputCell |
| { |
| padding: 0 4px 0 0; |
| } |
| .RadInput_Default |
| { |
| font: 12px arial,sans-serif; |
| } |
| .RadInput_Default |
| { |
| vertical-align: middle; |
| } |
| .RadPicker_WebBlue .rcCalPopup |
| { |
| background-position: 0 -200px; |
| } |
| .RadPicker_WebBlue td a |
| { |
| display: block; |
| overflow: hidden; |
| position: relative; /*FF*/ |
| outline: none; /*FF*/ |
| z-index: 2; /*Opera*/ |
| width: 16px; |
| height: 16px; |
| margin: 0 2px; |
| background: url( 'mvwres://Telerik.Web.UI, Version=2008.3.1125.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.WebBlue.Calendar.sprite.gif' ) no-repeat; |
| text-indent: -1111px; |
| text-align: center; |
| text-decoration: none; |
| } |
| .filterControls |
| { |
| font-family: Calibri; |
| font-size: medium; |
| padding: 5px; |
| } |
| .tripDetailsTop |
| { |
| font-family: Calibri; |
| margin-left: auto; |
| margin-right: auto; |
| width: 108%; |
| } |
| .tripDetailsNested |
| { |
| font-family: Calibri; |
| border: 1px solid #333; |
| } |
| html, body, form |
| { |
| height: 100%; |
| padding: 0px; |
| margin: 0px; |
| overflow: hidden; |
| } |
| .filterColumns |
| { |
| width: 1%; |
| white-space: nowrap; |
| } |
| </style> |
| <script type="text/javascript"> |
| function centerUpdatePanel() |
| { |
| centerElementOnScreen(document.getElementById("uxRadAjaxLoadingPanel")); |
| } |
| function centerElementOnScreen(element) |
| { |
| var scrollTop = document.body.scrollTop; |
| var scrollLeft = document.body.scrollLeft; |
| var viewPortHeight = document.body.clientHeight; |
| var viewPortWidth = document.body.clientWidth; |
| if (document.compatMode == "CSS1Compat") |
| { |
| viewPortHeight = document.documentElement.clientHeight; |
| viewPortWidth = document.documentElement.clientWidth; |
| scrollTop = document.documentElement.scrollTop; |
| scrollLeft = document.documentElement.scrollLeft; |
| } |
| var topOffset = Math.ceil(viewPortHeight/2 - element.offsetHeight/2); |
| var leftOffset = Math.ceil(viewPortWidth/2 - element.offsetWidth/2); |
| var top = scrollTop + topOffset - 40; |
| var left = scrollLeft + leftOffset - 70; |
| element.style.position = "absolute"; |
| element.style.top = top + "px"; |
| element.style.left = left + "px"; |
| } |
| </script> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="uxRadScriptManager" runat="server" /> |
| <telerik:RadAjaxLoadingPanel IsSticky="true" ID="uxRadAjaxLoadingPanel" runat="server" Height="75px" |
| Width="75px"> |
| <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading1.gif") %>' |
| style="border: 0px;" /> |
| </telerik:RadAjaxLoadingPanel> |
| <telerik:RadFormDecorator ID="uxRadFormDecorator" runat="server" Skin="Web20" /> |
| <telerik:RadWindowManager ID="uxRadWindowManager" runat="server" Skin="Web20"> |
| </telerik:RadWindowManager> |
| <telerik:RadSplitter ID="uxRadSplitter" runat="server" LiveResize="True" Skin="Inox" |
| Height="100%" Width="100%" SplitBarsSize="10px" BorderSize="0" BorderStyle="None" |
| Orientation="Horizontal" FullScreenMode="True" PanesBorderSize="0" VisibleDuringInit="False"> |
| <telerik:RadPane ID="uxRadPaneFilter" runat="server" Height="0px" Width="243px" MaxWidth="400" |
| MinWidth="200" MaxHeight="0" Scrolling="None" MinHeight="0"> |
| <telerik:RadSlidingZone ID="uxRadSlidingZone" runat="server" ClickToOpen="True"> |
| <telerik:RadSlidingPane ID="uxRadSlidingPanel" runat="server" |
| IconUrl="UIComponents/Images/filter.gif" Title="Filter" CssClass="filterControls" |
| Height="350px" Scrolling="None" BackColor="White"> |
| <div class="filterControls"> |
| <table cellpadding="0" cellspacing="5" width="100%"> |
| <tr> |
| <td class="filterColumns"> |
| Trips Dates: |
| </td> |
| <td class="filterColumns"> |
| <telerik:RadDatePicker ID="uxRadDatePickerFrom" runat="server" Skin="WebBlue"> |
| <Calendar runat="server" Skin="WebBlue" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" |
| ViewSelectorText="x"> |
| </Calendar> |
| <DatePopupButton HoverImageUrl="" ImageUrl="" /> |
| </telerik:RadDatePicker> |
|   To  |
| <telerik:RadDatePicker ID="uxRadDatePickerTo" runat="server" Skin="WebBlue"> |
| <Calendar runat="server" Skin="WebBlue" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" |
| ViewSelectorText="x"> |
| </Calendar> |
| <DatePopupButton HoverImageUrl="" ImageUrl="" /> |
| </telerik:RadDatePicker> |
| </td> |
| <td> |
|   |
| </td> |
| </tr> |
| <tr> |
| <td class="filterColumns"> |
| Division: |
| </td> |
| <td> |
| <telerik:RadComboBox ID="uxRadComboBoxDivision" runat="server" Skin="WebBlue" Width="330px"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </telerik:RadComboBox> |
| </td> |
| <td> |
| <asp:Button ID="uxButtonClearDivision" runat="server" Text="Clear" /> |
| </td> |
| </tr> |
| <tr> |
| <td class="filterColumns"> |
| Route: |
| </td> |
| <td> |
| <telerik:RadComboBox ID="uxRadComboBoxRoute" runat="server" Skin="WebBlue" Width="330px"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </telerik:RadComboBox> |
| </td> |
| <td> |
| <asp:Button ID="uxButtonClearRoute" runat="server" Text="Clear" /> |
| </td> |
| </tr> |
| <tr> |
| <td class="filterColumns"> |
| Direction: |
| </td> |
| <td> |
| <telerik:RadComboBox ID="uxRadComboBoxDirection" runat="server" Skin="WebBlue" Width="330px"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </telerik:RadComboBox> |
| </td> |
| <td> |
| <asp:Button ID="uxButtonClearDirection" runat="server" Text="Clear" /> |
| </td> |
| </tr> |
| <tr> |
| <td class="filterColumns"> |
| Trip Status: |
| </td> |
| <td> |
| <telerik:RadComboBox ID="uxRadComboBoxTripStatus" runat="server" Skin="WebBlue" Width="330px"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </telerik:RadComboBox> |
| </td> |
| <td> |
| <asp:Button ID="uxButtonClearTripStatus" runat="server" Text="Clear" /> |
| </td> |
| </tr> |
| <tr> |
| <td class="filterColumns"> |
| Origin: |
| </td> |
| <td> |
| <telerik:RadComboBox ID="uxRadComboBoxOrigin" runat="server" Skin="WebBlue" Width="330px"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </telerik:RadComboBox> |
| </td> |
| <td> |
| <asp:Button ID="uxButtonClearOrigin" runat="server" Text="Clear" /> |
| </td> |
| </tr> |
| <tr> |
| <td class="filterColumns"> |
| Destination: |
| </td> |
| <td> |
| <telerik:RadComboBox ID="uxRadComboBoxDestination" runat="server" Skin="WebBlue" |
| Width="330px"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </telerik:RadComboBox> |
| </td> |
| <td> |
| <asp:Button ID="uxButtonClearDestination" runat="server" Text="Clear" /> |
| </td> |
| </tr> |
| <tr> |
| <td class="filterColumns"> |
| Train #: |
| </td> |
| <td> |
| <telerik:RadComboBox ID="uxRadComboBoxTrainNumber" runat="server" Skin="WebBlue" |
| Width="330px"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </telerik:RadComboBox> |
| </td> |
| <td> |
| <asp:Button ID="uxButtonClearTrainNumber" runat="server" Text="Clear" /> |
| </td> |
| </tr> |
| <tr> |
| <td class="filterColumns"> |
|   |
| </td> |
| <td> |
| <asp:RadioButtonList ID="uxOptRevenueType" runat="server" RepeatDirection="Horizontal"> |
| <asp:ListItem Selected="True">Revenue</asp:ListItem> |
| <asp:ListItem>Non-Revenue</asp:ListItem> |
| <asp:ListItem>Both</asp:ListItem> |
| </asp:RadioButtonList> |
| </td> |
| <td> |
|   |
| </td> |
| </tr> |
| <tr> |
| <td class="filterColumns"> |
| </td> |
| <td> |
| </td> |
| <td> |
| </td> |
| </tr> |
| <tr> |
| <td class="filterColumns"> |
| </td> |
| <td> |
| <asp:Button ID="uxButtonOK" runat="server" Text="OK" |
| onclick="uxButtonOK_Click" /> |
| |
| <asp:Button ID="uxButtonNew" runat="server" Text="New" /> |
| |
| <asp:Button ID="uxButtonClearFilter" runat="server" Text="Clear" /> |
| </td> |
| <td> |
| </td> |
| </tr> |
| </table> |
| </div> |
| </telerik:RadSlidingPane> |
| </telerik:RadSlidingZone></telerik:RadPane> |
| <telerik:RadPane ID="uxRadPaneList" runat="server" Height="" Scrolling="Y"> |
| <telerik:RadGrid ID="uxRadGridList" runat="server" GridLines="None" |
| Skin="WebBlue" AllowSorting="True" |
| oncolumncreated="uxRadGridList_ColumnCreated" |
| onneeddatasource="uxRadGridList_NeedDataSource" Height="100%" Width="100%"> |
| <HeaderContextMenu EnableTheming="True"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </HeaderContextMenu> |
| <MasterTableView> |
| <RowIndicatorColumn> |
| <HeaderStyle Width="20px" /> |
| </RowIndicatorColumn> |
| <ExpandCollapseColumn> |
| <HeaderStyle Width="20px" /> |
| </ExpandCollapseColumn> |
| </MasterTableView> |
| <ClientSettings> |
| <Selecting AllowRowSelect="True" /> |
| </ClientSettings> |
| <FilterMenu EnableTheming="True"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </FilterMenu> |
| </telerik:RadGrid></telerik:RadPane> |
| <telerik:RadSplitBar ID="uxRadSplitBarListDetail" runat="server" CollapseExpandPaneText="" /> |
| <telerik:RadPane ID="uxRadPaneDetail" runat="server" Height=""> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| <telerik:RadAjaxManager runat="server" ClientEvents-OnRequestStart="centerUpdatePanel();"> |
| <AjaxSettings> |
| <telerik:AjaxSetting AjaxControlID="uxButtonOK"> |
| <UpdatedControls> |
| <telerik:AjaxUpdatedControl ControlID="uxRadGridList" LoadingPanelID="uxRadAjaxLoadingPanel" /> |
| </UpdatedControls> |
| </telerik:AjaxSetting> |
| <telerik:AjaxSetting AjaxControlID="uxRadGridList"> |
| <UpdatedControls> |
| <telerik:AjaxUpdatedControl ControlID="uxRadGridList" |
| LoadingPanelID="uxRadAjaxLoadingPanel" /> |
| </UpdatedControls> |
| </telerik:AjaxSetting> |
| </AjaxSettings> |
| </telerik:RadAjaxManager> |
| </form> |
| </body> |
| </html> |
1 Answer, 1 is accepted
0
Hello Matthew,
Thanks for providing a sample page.
The problem is caused by the fact that RadGrid is ajaxified. In this case it is surrounded by an update panel with no height and as a result, the RadGrid's 100% height cannot be applied properly by the browser.
Please refer to the following code library example for more information and a solution to your problem:
How to Set 100% Height and Random Styles to a RadAjaxManager Update Panel
Best wishes,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Thanks for providing a sample page.
The problem is caused by the fact that RadGrid is ajaxified. In this case it is surrounded by an update panel with no height and as a result, the RadGrid's 100% height cannot be applied properly by the browser.
Please refer to the following code library example for more information and a solution to your problem:
How to Set 100% Height and Random Styles to a RadAjaxManager Update Panel
Best wishes,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.