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

Resize Problem With Splitters Inside Tabstrip

1 Answer 104 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 12 Jan 2009, 04:11 PM
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" />&#160; 
                                                            <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"

1 Answer, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 14 Jan 2009, 03:24 PM
Hi James,

In case everything works fine except for when the tab is changed, I suggest to hook up the

OnClientTabSelected event of the tabstrip and execute the resize code there, too.


In case this does not help, please open a new support ticket and attached a fully runnable reproduction demo along with detailed explanations there.

Best wishes,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Splitter
Asked by
James
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Share this question
or