I
have a problem with splitters which I resize using JavaScript (onload and
onresize). The splitter is inside a Tabstrip/MutlipageView and resizes
correctly on page load and resize event but if I resize the browser manually
and then I change the selected tab the splitter inside that tab does not resize
correctly. There are white spaces at the top and or bottom. Any help would be
appreciated.
<rad:RadTabStrip ID="NavTabStrip" runat="server" BackColor="#fff701" MultiPageID="MainPageMP" CssClass="tabStrip" BorderStyle="None" |
SelectedIndex="1" Height="20px" Width="100%" Skin="Vista"> |
<Tabs> |
<rad:RadTab Text="Directory" PageViewID="DirectoryPV"> |
</rad:RadTab> |
<rad:RadTab Text="Search" PageViewID="SearchPV"> |
</rad:RadTab> |
<rad:RadTab Text="View" PageViewID="ViewerPV"> |
</rad:RadTab> |
</Tabs> |
</rad:RadTabStrip> |
<rad:RadMultiPage ID="MainPageMP" runat="server" SelectedIndex="1" BorderColor="Silver" style="width:100%;" BorderStyle="solid" BorderWidth="1px"> |
<rad:RadPageView ID="DirectoryPV" runat="server" style="width:100%;" BorderStyle="None" BorderWidth="0px"> |
<rad:RadSplitter ID="BrowserSplitter" runat="server" BorderSize="0" style="width:100%;" LiveResize="true" Height="100%" |
Width="100%" ResizeWithParentPane="false" ResizeWithBrowserWindow="true"> |
<rad:RadPane ID="TreePane" runat="server" Scrolling="None" Width="157px" Height="100%" PanesBorderSize="0"> |
<rad:RadTreeView ID="RadTreeView1" runat="server" AccessKey="T" AutoPostBack="True" |
DragAndDrop="True" Height="100%" Skin="Vista" Width="100%"> |
<CollapseAnimation Duration="100" Type="OutQuint" /> |
<ExpandAnimation Duration="100" /> |
</rad:RadTreeView> |
</rad:RadPane> |
<rad:RadSplitBar ID="BrowserSplitBar" runat="server" Height="100%" SkinID="Telerik"> |
</rad:RadSplitBar> |
<rad:RadPane ID="DirectoryPane" runat="server" EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" |
Index="0" Scrolling="None" PanesBorderSize="0" width="100%" height="100%"> |
<rad:RadGrid ID="RadGrid1" runat="server" AllowMultiRowSelection="True" AutoGenerateColumns="False" |
EnableAJAX="True" EnableAJAXLoadingTemplate="True" GridLines="None" Height="100%" |
OnUpdateCommand="RadGrid1_UpdateCommand" ShowStatusBar="True" Skin="Gray" Width="100%"> |
<ClientSettings> |
<Selecting AllowRowSelect="true" /> |
</ClientSettings> |
<MasterTableView CommandItemDisplay="Top" DataKeyNames="file_id" Width="100%"> |
<CommandItemTemplate> |
<div style="padding: 10px 0px;"> |
Custom command item template |
<asp:LinkButton ID="btnEditSelected" runat="server" CausesValidation="false" CommandName="EditSelected" |
Style="vertical-align: bottom" Visible="<%# RadGrid1.EditIndexes.Count = 0 %>"> <img alt="" |
src="../../DataEditing/Img/Edit.gif" |
style="border:0px;vertical-align:middle;" /> Edit Selected Products</asp:LinkButton><asp:LinkButton |
ID="btnUpdateEdited" runat="server" CommandName="UpdateEdited" Visible="<%# RadGrid1.EditIndexes.Count > 0 %>"> <img alt="" |
src="../../DataEditing/Img/Update.gif" |
style="border:0px;vertical-align:middle;" /> Update Products</asp:LinkButton><asp:LinkButton |
ID="btnCancel" runat="server" CausesValidation="false" CommandName="CancelAll" |
Visible="<%# RadGrid1.EditIndexes.Count > 0 OrElse RadGrid1.MasterTableView.IsItemInserted %>"> <img |
alt="" src="../../DataEditing/Img/Cancel.gif" |
style="border:0px;vertical-align:middle;" /> Cancel editing</asp:LinkButton><asp:LinkButton |
ID="LinkButton1" runat="server" CommandName="InitInsert" Visible="<%# Not RadGrid1.MasterTableView.IsItemInserted %>"> <img alt="" |
src="../../DataEditing/Img/AddRecord.gif" |
style="border:0px;vertical-align:middle;" /> Add new Product</asp:LinkButton><asp:LinkButton |
ID="LinkButton3" runat="server" CommandName="PerformInsert" Visible="<%# RadGrid1.MasterTableView.IsItemInserted %>"> <img alt="" |
src="../../DataEditing/Img/Insert.gif" |
style="border:0px;vertical-align:middle;" /> Add this Product</asp:LinkButton><asp:LinkButton |
ID="lbtnDelete" runat="server" CausesValidation="false" CommandName="DeleteSelected" |
OnClientClick="javascript:return confirm('Delete all selected Products?')"> <img |
alt="" src="../../DataEditing/Img/Delete.gif" |
style="border:0px;vertical-align:middle;" /> Delete Selected Products</asp:LinkButton><asp:LinkButton |
ID="lbtnZip" runat="server" CommandName="Zip" OnClick="lbtnZip_Click" OnClientClick="GetSelectedItems(); return false;"> <img alt="" |
src="../../DataEditing/Img/Refresh.gif" |
style="border:0px;vertical-align:middle;" />Download and Zip</asp:LinkButton></div> |
</CommandItemTemplate> |
<Columns> |
<rad:GridTemplateColumn DataField="Id" HeaderText="Id" SortExpression="Id" UniqueName="Id" |
Visible="False"> |
<ItemTemplate> |
<asp:Label ID="idlabel" runat="server" Text='<%#Eval("file_id") %>'></asp:Label> |
</ItemTemplate> |
</rad:GridTemplateColumn> |
<rad:GridTemplateColumn HeaderText="Type" SortExpression="Type" UniqueName="Type" |
Visible="False"> |
<ItemTemplate> |
<asp:Label ID="typelabel" runat="server" Text='<%#Eval("type") %>'></asp:Label> |
</ItemTemplate> |
</rad:GridTemplateColumn> |
<rad:GridTemplateColumn HeaderText="Location" SortExpression="Location" UniqueName="Location" |
Visible="False"> |
<ItemTemplate> |
<asp:Label ID="locationlabel" runat="server" Text='<%#Eval("location") %>'></asp:Label> |
</ItemTemplate> |
</rad:GridTemplateColumn> |
<rad:GridTemplateColumn DataField="filename" HeaderText="Name" SortExpression="Name" |
UniqueName="Name"> |
<ItemTemplate> |
<asp:LinkButton ID="btnLoad" runat="server" CssClass="filelink"> |
<asp:Image ID="icon" runat="server" />  |
<asp:Label ID="filelabel" runat="server" Text='<%#Eval("filename") %>'></asp:Label></asp:LinkButton> |
</ItemTemplate> |
</rad:GridTemplateColumn> |
<rad:GridTemplateColumn DataField="description" HeaderText="Description" SortExpression="Description" |
UniqueName="Description"> |
<ItemTemplate> |
<asp:Label ID="descriptionlabel" runat="server" Text='<%#Eval("description") %>'></asp:Label> |
</ItemTemplate> |
</rad:GridTemplateColumn> |
<rad:GridTemplateColumn HeaderText="Size" SortExpression="Size" UniqueName="Size"> |
<ItemTemplate> |
<asp:Label ID="sizelable" runat="server" CssClass="filelink" Text='<%#Eval("description") %>'></asp:Label> |
</ItemTemplate> |
</rad:GridTemplateColumn> |
<rad:GridClientSelectColumn Display="false" Reorderable="False" UniqueName="ClientSelectColumn"> |
<HeaderStyle Width="20px"></HeaderStyle> |
</rad:GridClientSelectColumn> |
<rad:GridEditCommandColumn UniqueName="EditCommandColumn"> |
</rad:GridEditCommandColumn> |
</Columns> |
<RowIndicatorColumn> |
<HeaderStyle Width="20px" /> |
</RowIndicatorColumn> |
<ExpandCollapseColumn> |
<HeaderStyle Width="20px" /> |
</ExpandCollapseColumn> |
<EditFormSettings EditFormType="WebUserControl" UserControlName="~/filecontrols/partialedit.ascx"> |
<EditColumn UniqueName="EditCommandColumn1"> |
</EditColumn> |
</EditFormSettings> |
</MasterTableView> |
<FilterMenu EnableTheming="True"> |
<CollapseAnimation Duration="200" Type="OutQuint" /> |
</FilterMenu> |
</rad:RadGrid> |
</rad:RadPane> |
</rad:RadSplitter> |
</rad:RadPageView> |
<rad:RadPageView ID="SearchPV" runat="server" style="width:100%;" BorderStyle="None" Width="100%" BorderWidth="0px" |
Height="100%"> |
<rad:RadSplitter ID="SearchSplitter" runat="server" BorderSize="0" Height="100%" |
Width="100%" LiveResize="True" ResizeWithParentPane="false" ResizeWithBrowserWindow="true" Skin="Telerik"> |
<rad:RadPane ID="SearchPane" runat="server" BorderStyle="None" BorderWidth="0px" PanesBorderSize="0" |
Height="100%" Scrolling="None" Width="157px"> |
<rad:RadPanelBar ID="RadPanelBar1" runat="server" Width="157px" Skin="Default2006"> |
<CollapseAnimation Duration="100" Type="None" /> |
<Items> |
<rad:RadPanelItem runat="server" Text="OCR Search" Value="TemplatedItem"> |
<ItemTemplate> |
<asp:TextBox ID="txtOcrSearch" runat="server" Width="100px"></asp:TextBox> |
<asp:Button ID="btnSearch" runat="server" Text="Search" /> |
</ItemTemplate> |
</rad:RadPanelItem> |
<rad:RadPanelItem runat="server" Text="Text Search" Value="TemplatedItem2"> |
</rad:RadPanelItem> |
</Items> |
<ExpandAnimation Duration="100" Type="None" /> |
</rad:RadPanelBar> |
</rad:RadPane> |
<rad:RadSplitBar ID="RadSplitBar4" runat="server" Height="100%" SkinID="Telerik" /> |
<rad:RadPane ID="ResultsPane" runat="server" BorderStyle="None" BorderWidth="0px" |
Height="100%" Width="100%" PanesBorderSize="0" CssClass="ScrollingFix"> |
<rad:RadGrid ID="RadGrid2" runat="server" AutoGenerateColumns="False" AllowMultiRowSelection="True" |
AllowPaging="True" EnableAJAX="True" EnableAJAXLoadingTemplate="True" GridLines="None" |
Height="100%" ShowStatusBar="True" Skin="Gray" Width="100%" AllowFilteringByColumn="True"> |
<MasterTableView> |
<GroupByExpressions> |
<rad:GridGroupByExpression> |
<SelectFields> |
<rad:GridGroupByField FieldAlias="Filename" FieldName="Filename"></rad:GridGroupByField> |
</SelectFields> |
<GroupByFields> |
<rad:GridGroupByField FieldName="Filename"></rad:GridGroupByField> |
</GroupByFields> |
</rad:GridGroupByExpression> |
</GroupByExpressions> |
<RowIndicatorColumn> |
<HeaderStyle Width="20px" /> |
</RowIndicatorColumn> |
<ExpandCollapseColumn> |
<HeaderStyle Width="20px" /> |
</ExpandCollapseColumn> |
<Columns> |
<rad:GridTemplateColumn DataField="Filename" HeaderText="File Name" SortExpression="Filename" |
UniqueName="Filename"> |
<ItemTemplate> |
<asp:LinkButton ID="btnOpen" runat="server" CssClass="filelink"> |
<asp:Image ID="Image1" runat="server" /><asp:Label ID="Label2" runat="server" Text='<%#Eval("Filename") %>'></asp:Label></asp:LinkButton></ItemTemplate> |
</rad:GridTemplateColumn> |
<rad:GridTemplateColumn DataField="Location" HeaderText="Location" SortExpression="Location" |
UniqueName="Location"> |
<ItemTemplate> |
<asp:Label ID="lblLocation" runat="server" Text='<%#Eval("Location") %>'></asp:Label></ItemTemplate> |
</rad:GridTemplateColumn> |
<rad:GridTemplateColumn DataField="Page" HeaderText="Page" SortExpression="Page" |
UniqueName="Page"> |
<ItemTemplate> |
<asp:Label ID="lblPage" runat="server" Text='<%#Eval("Page") %>'></asp:Label></ItemTemplate> |
</rad:GridTemplateColumn> |
<rad:GridTemplateColumn DataField="Summary" HeaderText="Summary" SortExpression="Summary" |
UniqueName="Summary"> |
<ItemTemplate> |
<asp:Label ID="lblSummary" runat="server" Text='<%#Eval("Summary") %>'></asp:Label></ItemTemplate> |
</rad:GridTemplateColumn> |
</Columns> |
</MasterTableView><ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True" |
AllowGroupExpandCollapse="True" ReorderColumnsOnClient="True"> |
</ClientSettings> |
<FilterMenu EnableTheming="True"> |
<CollapseAnimation Duration="200" Type="OutQuint" /> |
</FilterMenu> |
<HeaderContextMenu EnableTheming="True" Skin="Gray"> |
<CollapseAnimation Duration="200" Type="OutQuint" /> |
</HeaderContextMenu> |
<PagerStyle Mode="NumericPages"></PagerStyle> |
</rad:RadGrid> |
</rad:RadPane> |
</rad:RadSplitter> |
</rad:RadPageView> |
<rad:RadPageView ID="ViewerPV" runat="server" style="width:100%;" BorderStyle="None" Width="100%" BorderWidth="0px" |
Height="100%"> |
<rad:RadSplitter ID="ViewerSplitter" runat="server" BorderSize="0" Height="100%" |
Width="100%" LiveResize="True" ResizeWithParentPane="false" ResizeWithBrowserWindow="true" Skin="Telerik"> |
<rad:RadPane ID="ThumbPane" runat="server" BorderStyle="None" BorderWidth="0px" Height="100%" |
Scrolling="None" Width="157px" PanesBorderSize="0"> |
<cc1:WebThumbnailViewer ID="WebThumbnailViewer1" runat="server" Height="100%" Width="157px" |
ShowAnnotations="True" ViewerID="WebAnnotationViewer1" /> |
</rad:RadPane> |
<rad:RadSplitBar ID="ThumbViewSplitbar" runat="server" SkinID="Telerik"> |
</rad:RadSplitBar> |
<rad:RadPane ID="ContentPane" runat="server" BorderStyle="None" BorderWidth="0px" |
Height="100%" Scrolling="none" Width="100%" PanesBorderSize="0"> |
<rad:RadSplitter ID="ContentSplitter" runat="server" Orientation="Horizontal" Height="100%" |
Width="100%" Skin="Telerik"> |
<rad:RadPane ID="ToolPane" runat="server" BorderStyle="None" BorderWidth="0px" Height="28px" |
Scrolling="None" Width="100%"> |
<rad:RadToolBar ID="ViewerToolBar" runat="server" Skin="Default2006" Width="100%" |
BorderStyle="None"> |
<CollapseAnimation Duration="200" Type="OutQuint" /> |
<Items> |
<rad:RadToolBarButton runat="server"> |
<ItemTemplate> |
<asp:Label ID="Label_FileName" runat="server" Text="Label"></asp:Label> |
</ItemTemplate> |
</rad:RadToolBarButton> |
<rad:RadToolBarButton runat="server" Text="Pan Image" onclick="WebAnnotationViewer1.setMouseTool(MouseToolType.Pan);"> |
</rad:RadToolBarButton> |
<rad:RadToolBarButton runat="server" Text="Zoom" onclick="WebAnnotationViewer1.setAutoZoom(AutoZoomMode.None);WebAnnotationViewer1.setMouseTool(MouseToolType.ZoomIn , MouseToolType.ZoomOut);"> |
</rad:RadToolBarButton> |
<rad:RadToolBarButton runat="server" Text="Button 7" IsSeparator="True"> |
</rad:RadToolBarButton> |
<rad:RadToolBarButton runat="server" Text="Best Fit" onclick="WebAnnotationViewer1.setAutoZoom(AutoZoomMode.BestFit);"> |
</rad:RadToolBarButton> |
<rad:RadToolBarButton runat="server" Text="Fit to Width" onclick="WebAnnotationViewer1.setAutoZoom(AutoZoomMode.FitToWidth);"> |
</rad:RadToolBarButton> |
<rad:RadToolBarButton runat="server" Text="Full Size" onclick="WebAnnotationViewer1.setAutoZoom(AutoZoomMode.None);WebAnnotationViewer1.setAutoZoom(1);"> |
</rad:RadToolBarButton> |
<rad:RadToolBarButton runat="server" IsSeparator="True" Text="Button 8"> |
</rad:RadToolBarButton> |
<rad:RadToolBarButton runat="server" Text="Prev" onclick="prev(); return false;"> |
</rad:RadToolBarButton> |
<rad:RadToolBarButton runat="server" onclick="nextPage(); return false;" Text="Next"> |
</rad:RadToolBarButton> |
<rad:RadToolBarButton runat="server" IsSeparator="True" Text="Button 9"> |
</rad:RadToolBarButton> |
<rad:RadToolBarDropDown runat="server" Text="DropDown 0"> |
</rad:RadToolBarDropDown> |
<rad:RadToolBarDropDown runat="server" Text="DropDown 1"> |
</rad:RadToolBarDropDown> |
<rad:RadToolBarButton runat="server" Text="Export" onclick="exportPages(); return false;"> |
</rad:RadToolBarButton> |
<rad:RadToolBarButton runat="server" IsSeparator="True" Text="Button 11"> |
</rad:RadToolBarButton> |
<rad:RadToolBarButton runat="server" Text="Notes" onclick="showStickyNote();"> |
</rad:RadToolBarButton> |
</Items> |
</rad:RadToolBar> |
</rad:RadPane> |
<rad:RadSplitBar ID="ToolViewSplitbar" runat="server" BorderStyle="None" Visible="false" |
EnableResize="False" SkinID="Telerik"></rad:RadSplitBar> |
<rad:RadPane ID="ViewerPane" runat="server" BorderStyle="None" BorderWidth="0px" |
Height="100%" Width="100%" scrolling=None> |
<cc2:WebAnnotationViewer ID="WebAnnotationViewer1" runat="server" Width="100%" Height="100%" |
BackColor="Silver" Centered="True" CssClass="ScrollingFix" AutoLinkThumbnailViewer="True" /> |
</rad:RadPane> |
</rad:RadSplitter> |
</rad:RadPane> |
</rad:RadSplitter></rad:RadPageView> |
</rad:RadMultiPage> |
function resizeWindow() |
{ |
var documentObj = GetDocument(); |
var pageSize = documentObj.clientHeight; |
var pageWidth= documentObj.clientWidth; |
pageSize = AdjustHeight(pageSize,'footer'); |
pageSize = AdjustHeight(pageSize,'header'); |
var elem = document.getElementById("BodyDiv"); |
elem.style.height = pageSize + "px"; |
elem.style.width = pageWidth + "px"; |
var PaneSizeDir=pageSize; |
PaneSizeDir = AdjustHeight(pageSize,'NavTabStrip'); |
var elem1 = document.getElementById("MainPageMP"); |
elem1.style.height = PaneSizeDir + "px"; |
elem1.style.width = pageWidth + "px"; |
} |