Hi
I have to create multiple Tab and Pageview at client side. My requirement is to create tabs on link click and show the one URL inside the tab in pageview. Also functionality to close the tab and open again.
I am using the below code but i am facing few issues
1. When I set the pageview id to the tab then pageview content is not showing. When i use tabStrip1.get_tabs().findTabByText(title).set_pageViewID(title); this code my pageview did not show any controls. why ?
2. When i close the tab i need to remove the pageview also how can i do this ?
<
telerik:RadTabStrip
ID
=
"rtsMenu"
runat
=
"server"
SelectedIndex
=
"0"
OnClientTabSelecting
=
"onClientTabSelecting"
ScrollChildren
=
"true"
MultiPageID
=
"RadMultiPage1"
Skin
=
"Windows7"
OnTabClick
=
"rtsMenu_TabClick"
OnClientLoad
=
"OnClientLoad"
BorderColor
=
"Green"
BorderWidth
=
"3"
>
</
telerik:RadTabStrip
>
<
telerik:RadMultiPage
ID
=
"RadMultiPage1"
runat
=
"server"
BorderWidth
=
"2"
BorderColor
=
"Red"
SelectedIndex
=
"0"
>
</
telerik:RadMultiPage
>
var
tabStrip1;
var
multiPage;
function
onClientTabSelecting(sender, args) {
var
tab = args.get_tab();
var
pg = tab.get_pageView();
//alert(pg);
if
(tab.get_pageView()) {
tab.set_postBack(
false
);
}
}
function
OnClientLoad() {
tabStrip1 = $find(
'<%= rtsMenu.ClientID %>'
);
multiPage = $find(
'<%= RadMultiPage1.ClientID %>'
);
}
function
addtab(title, contenturl) {
var
oldtab = tabStrip1.findTabByText(title);
if
(oldtab !=
null
) {
oldtab.select();
return
;
}
// alert(contenturl);
var
tab =
new
Telerik.Web.UI.RadTab(title);
tab.set_text(title);
tabStrip1.trackChanges();
tabStrip1.get_tabs().add(tab);
tabStrip1.commitChanges();
//tab.get_element().innerHTML = "<iframe src=\"" + contenturl + "\" frameBorder=\"1\" style=\"width: 1000px; height: 600px;\"></iframe>";
AttachCloseImage(tab,
"delete.png"
);
multiPage = $find(
'<%= RadMultiPage1.ClientID %>'
);
multiPage.trackChanges();
var
pageView =
new
Telerik.Web.UI.RadPageView();
pageView.set_id(title);
//pageView.set_contentUrl(contenturl);
multiPage.get_pageViews().add(pageView);
//pageView.get_element().id = title;
//tabStrip1.get_tabs().findTabByText(title).set_pageViewID(title);
pageView.get_element().innerHTML =
"<iframe src=\""
+ contenturl +
"\" frameBorder=\"1\" style=\"width: 1000px; height: 600px;\"></iframe>"
;
multiPage.commitChanges();
//tab.set_pageViewID(title);
tab.select();
}
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) {
tab.select();
var
pageView =
new
Telerik.Web.UI.RadPageView();
//pageView = tab.get_pageView();
pageView = tabStrip1.get_selectedPageView();
alert(pageView);
alert(pageView.get_index());
if
(pageView) {
pageView.hide();
}
//
var
tabToSelect = tab.get_nextTab();
if
(!tabToSelect)
tabToSelect = tab.get_previousTab();
tabStrip1.get_tabs().remove(tab);
if
(tabToSelect)
tabToSelect.set_selected(
true
);
pageView = tabToSelect.get_pageView();
if
(pageView) {
pageView.select();
}
//tabStrip1.repaint();
}