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

Radmultipage height problem

0 Answers 120 Views
This is a migrated thread and some comments may be shown as answers.
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

<%@ 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" "">
<head id="Head1" runat="server">
    <style type="text/css">
        html, body, form
            background: #fff;
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
            position: absolute;
   <link href="Styles/Default.css" rel="stylesheet" type="text/css" />
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    <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());
            AttachCloseImage(tab, "Images/Icons/close.png");
            var multiPage = $find("<%=RadMultiPage1.ClientID %>");
            var pageView = new Telerik.Web.UI.RadPageView();
        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 = e.srcElement;
                e.cancelBubble = true;
                if (e.stopPropagation) {
                return false;
        function deleteTab(tab) {
            var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
            var tabToSelect = tab.get_nextTab();
            if (!tabToSelect)
                tabToSelect = tab.get_previousTab();
            if (tabToSelect)
    <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"/>
                <div class="side01">
                    <label class="text02">XERP</label>
                <div class="side02">
       <div class="bottom">
            <telerik:RadSplitter ID="RadSplitter1" Width="99.9%" Height="100%" runat="server"
                <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:RadButton ID="searchbtn" runat="server" Skin="" CssClass="SearchButton" >
                            <Icon PrimaryIconWidth="26px" PrimaryIconHeight="26px" PrimaryIconUrl="Images/Icons/search.png" />
                    <telerik:RadPanelBar ID="RadPanelBarMenu" runat="server" ExpandMode="FullExpandedItem"
                       CssClass="radpanelbar" Width="233px" height="95.5%">
                            <telerik:RadPanelItem runat="server" Expanded="true" Height="30px" Text="Business Settings" ImageUrl="~/Images/Icons/business_settings.png">
                                    <telerik:RadPanelItem runat="server"  onclick="addtab('UserHome.aspx','Bank')" Text="Company Setup" >
                                    <telerik:RadPanelItem runat="server" onclick="addtab('FormVertical.aspx','Bank')" Text="Bank">
                <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" >
                                <telerik:RadTab Text="Dashboard">
                                <telerik:RadTab Text="Vertical Form">
                        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0"  >
                            <telerik:RadPageView ID="RadPageView1" runat="server" Height="100%"  ContentUrl="FormVertical.aspx">
                            <telerik:RadPageView ID="RadPageView2" runat="server" Height="100%"  ContentUrl="UserHome.aspx">
                    <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";

No answers yet. Maybe you can help?

Asked by
Top achievements
Rank 1
Share this question