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

Radmultipage height problem

0 Answers 38 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Syed
Top achievements
Rank 1
Syed asked on 21 Nov 2012, 12:48 PM
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>

No answers yet. Maybe you can help?

Tags
TabStrip
Asked by
Syed
Top achievements
Rank 1
Share this question
or