Resize Problem With Splitters Inside Tabstrip

2 posts, 0 answers
  1. James
    James avatar
    1 posts
    Member since:
    Sep 2007

    Posted 12 Jan 2009 Link to this post

    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"
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 14 Jan 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top