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

Dynamic Client Tab, Not working?

4 Answers 266 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Officialboss
Top achievements
Rank 1
Officialboss asked on 05 Jun 2008, 11:39 PM
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> 
 

4 Answers, 1 is accepted

Sort by
0
Officialboss
Top achievements
Rank 1
answered on 05 Jun 2008, 11:44 PM
    private void InitializeComponent() 
    { 
        this.RadTabStrip1.TabClick += new Telerik.Web.UI.RadTabStripEventHandler(this.RadTabStrip1_Click); 
    } 
This how I have wired the Click Event.
0
Helen
Telerik team
answered on 09 Jun 2008, 04:21 PM
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
0
Shawn
Top achievements
Rank 1
answered on 21 Nov 2008, 06:37 AM
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();

0
Paul
Telerik team
answered on 04 Dec 2008, 02:35 PM
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.
Tags
TabStrip
Asked by
Officialboss
Top achievements
Rank 1
Answers by
Officialboss
Top achievements
Rank 1
Helen
Telerik team
Shawn
Top achievements
Rank 1
Paul
Telerik team
Share this question
or