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:
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">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
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
>