Dynamic Client Tab, Not working?

[Officialboss]

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

    <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")%> &nbsp;'
                                CommandArgument='<%#Eval("Field1")%>'
                                CommandName="ShowDetails" OnClientClick="return addNewTab('<%#Eval("Field1")%>');">
                                </asp:LinkButton>&nbsp;(&nbsp;<%#Eval("Field2")%>&nbsp;)</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>

[Officialboss]

    private void InitializeComponent()
    {
        this.RadTabStrip1.TabClick += new Telerik.Web.UI.RadTabStripEventHandler(this.RadTabStrip1_Click);
    }

This how I have wired the Click Event.

[Helen]

Hi Howard,

I have already answered your another forum post regarding the same issue.

Please review our post and let us know how it goes.


Regards,
Helen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Shawn]

I'm creating radTab on the client side, and I want each tab to have different style.
Is it possible to set cssClass using the client side object?

 

var ii = 0;

 

 

var tabStrip = $find("<%= RadTabStrip1.ClientID %>");

 

tabStrip.trackChanges();

 

if (!tab) {

 

 

// Create the new tab here.

 

tab =

new Telerik.Web.UI.RadTab();

 

tabStrip.get_tabs().add(tab);

ii++;

tab.set_text(

"myTab" + ii);

 

tab.set_value(tabID);

}

tabStrip.commitChanges();

[Paul]

Hi Shawn,

You can use the set_cssClass() method to achive your goal.

Sincerely yours,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.