Radmultipage height problem

1 posts, 0 answers
  1. Syed
    Syed avatar
    6 posts
    Member since:
    May 2009

    Posted 21 Nov 2012 Link to this post

    I have a page where I'm adding radtab,multipage and radpageview at runtime.The page also has a static radpageview.The static page contenturl page height loads perfectly since there is a script that makes it work.But the problem is the tab that added by script a scroll appears.I have attached the code and screenshot of the page.Actually i was trying to implement an UI similar to this link
    Sample Link
    Please help.Thanks i advance.
    Check Image

    Code:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <%@ 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">
     
    <head id="Head1" runat="server">
        <title></title>
     
        <style type="text/css">
            html, body, form
            {
                background: #fff;
                height: 100%;
                margin: 0;
                padding: 0;
                width: 100%;
                position: absolute;
            }
        </style>
     
       <link href="Styles/Default.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <script type="text/javascript">
            var tabStrip1;
     
            function OnClientLoad() {
                tabStrip1 = $find('<%= RadTabStrip1.ClientID %>');
     
                for (var i = 0; i < tabStrip1.get_tabs().get_count(); i++) {
                    AttachCloseImage(tabStrip1.get_tabs().getItem(i), "Images/Icons/close.png");
     
                }
            }
            function addtab(url, text) {
                var tab = new Telerik.Web.UI.RadTab();
                tab.set_text(text + tabStrip1.get_tabs().get_count());
                tabStrip1.get_tabs().add(tab);
                tab.select();
                AttachCloseImage(tab, "Images/Icons/close.png");
     
                var multiPage = $find("<%=RadMultiPage1.ClientID %>");
     
                multiPage.trackChanges();
     
                var pageView = new Telerik.Web.UI.RadPageView();
                multiPage.get_pageViews().add(pageView);
                pageView.set_contentUrl(url);
                multiPage.commitChanges();
            }
     
            function CreateCloseImage(closeImageUrl) {
                var closeImage = document.createElement("img");
                closeImage.src = closeImageUrl;
                closeImage.alt = "Close this tab";
                return closeImage;
            }
     
            function AttachCloseImage(tab, closeImageUrl) {
                var closeImage = CreateCloseImage(closeImageUrl);
                closeImage.AssociatedTab = tab;
                closeImage.onclick = function (e) {
                    if (!e) e = event;
                    if (!e.target) e = e.srcElement;
     
                    deleteTab(tab);
     
                    e.cancelBubble = true;
                    if (e.stopPropagation) {
                        e.stopPropagation();
                    }
     
                    return false;
                }
                tab.get_innerWrapElement().appendChild(closeImage);
            }
     
            function deleteTab(tab) {
                var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
     
                var tabToSelect = tab.get_nextTab();
                if (!tabToSelect)
                    tabToSelect = tab.get_previousTab();
     
                tabStrip.get_tabs().remove(tab);
     
                if (tabToSelect)
                    tabToSelect.set_selected(true);
            }
        </script>
     
        <div class="page">
           <div class="header01">
                <div class="head_top">
                    <div class="homeicon">
                        <asp:HyperLink ID="HyperLink1" runat="server" Target="_parent" NavigateUrl="~/Default.aspx">
                            <asp:Image ID="Homeicon" runat="server" BorderWidth="0px" ImageUrl="~/Images/home.png"/>
                        </asp:HyperLink>  
                    </div>
                    <div class="side01">
                        <label class="text02">XERP</label>
                    </div>
                    <div class="side02">
                         
                   </div>             
                </div>
           </div>
           <div class="bottom">
                <telerik:RadSplitter ID="RadSplitter1" Width="99.9%" Height="100%" runat="server"
                    ResizeMode="EndPane">
                    <telerik:RadPane ID="RadPane1" runat="server" Width="230px" CssClass="menu" Scrolling="Y">
                        <div style="height:4%; margin:3px 1px 0px 3px;">
                            <telerik:RadTextBox  EmptyMessage="Search Menu...." ID="searchbox" runat="server" Width="175px">
                                 
                            </telerik:RadTextBox>
                            <telerik:RadButton ID="searchbtn" runat="server" Skin="" CssClass="SearchButton" >
                                <Icon PrimaryIconWidth="26px" PrimaryIconHeight="26px" PrimaryIconUrl="Images/Icons/search.png" />
                            </telerik:RadButton>
                        </div>
                        <telerik:RadPanelBar ID="RadPanelBarMenu" runat="server" ExpandMode="FullExpandedItem"
                           CssClass="radpanelbar" Width="233px" height="95.5%">
                            <Items>
                                <telerik:RadPanelItem runat="server" Expanded="true" Height="30px" Text="Business Settings" ImageUrl="~/Images/Icons/business_settings.png">
                                    <Items>
                                        <telerik:RadPanelItem runat="server"  onclick="addtab('UserHome.aspx','Bank')" Text="Company Setup" >
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" onclick="addtab('FormVertical.aspx','Bank')" Text="Bank">
                                        </telerik:RadPanelItem>
                                    </Items>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelBar>
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" />
                   
                    <telerik:RadPane runat="server" ID="MainPane" BackColor="#f1f5fb" Height="100%" >
                            <telerik:RadTabStrip ID="RadTabStrip1" runat="server"  MultiPageID="RadMultiPage1"
                                SelectedIndex="0" onclientload="OnClientLoad" >
                                <Tabs>
                                    <telerik:RadTab Text="Dashboard">
                                    </telerik:RadTab>
                                    <telerik:RadTab Text="Vertical Form">
                                    </telerik:RadTab>
                                </Tabs>
                            </telerik:RadTabStrip>
                            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0"  >
                                <telerik:RadPageView ID="RadPageView1" runat="server" Height="100%"  ContentUrl="FormVertical.aspx">
                                </telerik:RadPageView>
                                <telerik:RadPageView ID="RadPageView2" runat="server" Height="100%"  ContentUrl="UserHome.aspx">
                                </telerik:RadPageView>
                            </telerik:RadMultiPage>
                        <script type="text/javascript">
                            function pageLoad() {
     
                                var $ = $telerik.$;
                                var height = $(window).height();
     
                                var multiPage = $find("<%=RadMultiPage1.ClientID %>");
                                var totalHeight = height - 76;
                                multiPage.get_element().style.height = totalHeight + "px";
     
                            }
                        </script>
     
     
                    </telerik:RadPane>
                </telerik:RadSplitter>
                </div>
     
     
        </div>
        </form>
    </body>
    </html>
Back to Top