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> |