I am adding dynamic tabs within a tab, not sure what I am doing wrong.
I get a javascript error. UserControl gets loaded dynamically into a
Tab and withing that tab I am trying to add more tabs. It worked when I
used NavigateUrl in the content page Tabs.
Could someone please check my code and advise.
Thanks
p.s. I accidentally posted in the asp.net forum.
Master Page
Content Page
Content Page Code behind
User Control ascx
Could someone please check my code and advise.
Thanks
p.s. I accidentally posted in the asp.net forum.
Master Page
<form id="form1" runat="server"> |
<asp:ScriptManager ID="smMain" runat="server" EnablePartialRendering="true" EnablePageMethods="true"> |
<Scripts> |
</Scripts> |
<Services> |
</Services> |
</asp:ScriptManager> |
<telerik:RadAjaxManager ID="RadAjaxManagerMaster" runat="server"> |
</telerik:RadAjaxManager> |
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" skin="Vista"></telerik:RadWindowManager> |
<div> |
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> |
</asp:ContentPlaceHolder> |
</div> |
</form> |
Content Page
<telerik:RadTabStrip Visible="true" BorderStyle="Solid" BorderColor="black" BorderWidth="0px" |
ID="RadTabStrip1" runat="server" Skin="Outlook" SelectedIndex="0" AutoPostBack="True"> |
<Tabs> |
<telerik:RadTab Text="Albums" ID="tab0" runat="server"></telerik:RadTab> |
<telerik:RadTab Text="Pictures" ID="tab1" runat="server"></telerik:RadTab> |
<telerik:RadTab Text="Comments" ID="tab2" runat="server"></telerik:RadTab> |
<telerik:RadTab Text="Add Tabs" ID="tab3" runat="server"></telerik:RadTab> |
</Tabs> |
</telerik:RadTabStrip> |
<asp:Panel ID="pnlControls" runat="server" |
style="border:solid 1px Blue; padding:5px 1px 5px 5px;" Visible="false" /> |
<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server"> |
<AjaxSettings> |
<telerik:AjaxSetting AjaxControlID="RadTabStrip1"> |
<UpdatedControls> |
<telerik:AjaxUpdatedControl ControlID="RadTabStrip1" /> |
<telerik:AjaxUpdatedControl ControlID="pnlControls" LoadingPanelID="RadAjaxLoadingPanel1" /> |
<telerik:AjaxUpdatedControl ControlID="lblMessage" /> |
</UpdatedControls> |
</telerik:AjaxSetting> |
</AjaxSettings> |
</telerik:RadAjaxManagerProxy> |
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="30" BackColor="#E0E0E0"> |
<asp:Image ID="Image1" ImageUrl="~/Images/Loading7.gif" BorderWidth="0px" AlternateText="Loading" |
runat="server" Style="margin-top: 45px;" /> |
</telerik:RadAjaxLoadingPanel> |
Content Page Code behind
private void RadTabStrip1_Click(object sender, Telerik.Web.UI.RadTabStripEventArgs e) |
{ |
lblMessage.Text = e.Tab.Text + " " + e.Tab.SelectedIndex.ToString() + " " + e.Tab.ID ; |
LoadContentTab(e.Tab.ID); |
} |
private void LoadContentTab(string tabId) |
{ |
switch (tabId.Trim().ToUpper()) |
{ |
case "I0": |
LoadUserControl("~/NestedAjaxTabs/WebUserControl.ascx"); |
break; |
case "I1": |
LoadUserControl("~/NestedAjaxTabs/WebUserControl2.ascx"); |
break; |
case "I2": |
LoadUserControl("~/NestedAjaxTabs/WebUserControl3.ascx"); |
break; |
case "I3": |
LoadUserControl("~/NestedAjaxTabs/WebUserControl4.ascx"); |
break; |
default: |
break; |
} |
} |
User Control ascx
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> |
<script type="text/javascript"> |
function addNewTab() |
{ |
showloadingpanel(); // Show Loading Panel |
//Adds the tab to the Tabs Collection of the selected tab |
var persistChanges = true; |
var tabStrip = $find("<%= RadTabStrip1.ClientID %>"); |
var mymultiPage = $find('<%= RadMultiPage1.ClientID %>'); |
var tabCount = tabStrip.get_tabs().get_count(); |
// Check if we have already opened the Tab |
for (i = 0; i< tabCount; i++) |
{ |
var tab2 = tabStrip.get_tabs().getTab(i); |
if (tab2 != null) |
{ |
if (tab2.get_text() == "Plan Id " + arguments[0].toString()) |
{ |
tab2.select(); |
hideloadingpanel(); // Hide Loading Panel |
return false; |
} |
} |
} |
var selectedTab = tabStrip.get_selectedTab(); |
var test = arguments[0]; |
//alert(test); |
if (persistChanges) { |
tabStrip.trackChanges(); |
mymultiPage.trackChanges(); |
} |
var tab = new Telerik.Web.UI.RadTab(); |
//selectedTab.get_tabs().add(tab); |
tabStrip.get_tabs().add(tab); |
tab.set_text("Plan Id " + arguments[0].toString()); |
tab.select(); |
var pageView = new Telerik.Web.UI.RadPageView(); |
mymultiPage.get_pageViews().add(pageView); |
pageView.get_element().innerHTML = "Page content here"; |
pageView.set_selected(true); |
if (persistChanges) { |
tabStrip.commitChanges(); |
mymultiPage.commitChanges(); |
} |
hideloadingpanel(); // Hide Loading Panel |
return false; |
} |
function showloadingpanel() |
{ |
var panel = document.getElementById("<%=RadAjaxLoadingPanel2.ClientID%>"); |
panel.style.display = "block"; |
} |
function hideloadingpanel() |
{ |
var panel = document.getElementById("<%=RadAjaxLoadingPanel2.ClientID%>"); |
panel.style.display = "none"; |
} |
</script> |
</telerik:RadCodeBlock> |
<asp:ListView runat="server" ID="lvPlans" ItemPlaceholderID="plhItemContainer" |
OnItemCommand="lvPlans_OnItemCommand" DataKeyNames="Field1"> |
<LayoutTemplate> |
<ul> |
<asp:PlaceHolder runat="server" ID="plhItemContainer" /> |
</ul> |
</LayoutTemplate> |
<ItemTemplate> |
<li><asp:LinkButton runat="server" ID="lbtnPlanId" |
Text='<%#Eval("Field3")%> ' |
CommandArgument='<%#Eval("Field1")%>' |
CommandName="ShowDetails" OnClientClick="return addNewTab('<%#Eval("Field1")%>');"> |
</asp:LinkButton> ( <%#Eval("Field2")%> )</li> |
<br /><input type="button" value="open" onClick="return addNewTab('<%#Eval("Field1")%>');" /> |
</ItemTemplate> |
</asp:ListView> |
<%--DYNAMIC TABS--%> |
<telerik:RadTabStrip runat="server" ID="RadTabStrip1" Skin="Outlook" Style="float:left" |
SelectedIndex="0" CssClass="tabStrip" MultiPageID="RadMultiPage1"> |
</telerik:RadTabStrip> |
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" CssClass="multiPage" |
BorderStyle="Solid" |
BorderWidth="1px" |
BorderColor="#999999"> |
</telerik:RadMultiPage> |
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" Transparency="30" BackColor="#E0E0E0"> |
<asp:Image ID="Image1" ImageUrl="~/Images/Loading7.gif" BorderWidth="0px" AlternateText="Loading" |
runat="server" Style="margin-top: 45px;" /> |
</telerik:RadAjaxLoadingPanel> |