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

Add PageView via Client

4 Answers 162 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Officialboss
Top achievements
Rank 1
Officialboss asked on 30 May 2008, 11:05 PM
Hello,

I am adding Tabs via client functions but I am not sure how to go about adding PageView to my MultiPage control so that I can also add content to the Tab. I could not find any samples, would appreciate any help and sample code.
function addTab() 
{    
    //Adds the tab to the Tabs Collection of the selected tab 
    var persistChanges = true
     
    var tabStrip = $find("<%= RadTabStrip1.ClientID %>"); 
    var selectedTab = tabStrip.get_selectedTab(); 
    var test = arguments[0]; 
    alert(test); 
     
    if (persistChanges) 
        tabStrip.trackChanges(); 
         
    var tab = new Telerik.Web.UI.RadTab(); 
    //selectedTab.get_tabs().add(tab); 
    tabStrip.get_tabs().add(tab);    
    //tab.set_text("Child Tab " + selectedTab.get_tabs().get_count()); 
     
    var pageView = new Telerik.Web.UI.PageView(); // DOES NOT WORK 
    var multiPage = $find("<%= RadMultiPage1.ClientID %>"); 
     
    if (persistChanges) 
        tabStrip.commitChanges(); 
     
    return false;       

4 Answers, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 02 Jun 2008, 08:55 AM
Hi Howard,

Please find below a sample code snippet that shows the needed approach.

<script type="text/javascript">  
function addtab()    
{  
    var tabStrip = $find('<%= RadTabStrip1.ClientID %>');    
    var mymultiPage = $find('<%= RadMultiPage1.ClientID %>');  
 
    tabStrip.trackChanges();    
    mymultiPage.trackChanges();  
 
    var tab = new Telerik.Web.UI.RadTab();    
    tabStrip.get_tabs().add(tab);     
    tab.set_text("Child Tab " + tabStrip.get_tabs().get_count());  
    tab.select();  
 
    var pageView = new Telerik.Web.UI.RadPageView();    
    mymultiPage.get_pageViews().add(pageView);  
    pageView.get_element().innerHTML = ("PageView" + mymultiPage.get_pageViews().get_count());  
    pageView.set_selected(true);  
      
    tabStrip.commitChanges();    
    mymultiPage.commitChanges();  
 
    return false;          
}  
</script> 


All the best,
Paul
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Officialboss
Top achievements
Rank 1
answered on 02 Jun 2008, 06:53 PM
Paul,
Thank you for your solution. Runs perfect and just what I was looking for.

I have one followup question. I can not get the loading panel to show up.
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
<script type="text/javascript"
function addtab()     
{   
    var tabStrip = $find('<%= RadTabStrip1.ClientID %>');     
    var mymultiPage = $find('<%= RadMultiPage1.ClientID %>');   
  
    tabStrip.trackChanges();     
    mymultiPage.trackChanges();   
  
    var tab = new Telerik.Web.UI.RadTab();     
    tabStrip.get_tabs().add(tab);      
    tab.set_text("Child Tab " + tabStrip.get_tabs().get_count());   
    tab.select();   
  
    var pageView = new Telerik.Web.UI.RadPageView();     
    mymultiPage.get_pageViews().add(pageView);  
    pageView.get_element().innerHTML = ("PageView " + Date());   
    pageView.set_selected(true);   
       
    tabStrip.commitChanges();     
    mymultiPage.commitChanges();   
  
    return false;           
}   
</script> 
</telerik:RadCodeBlock> 
 
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel2"
 
<telerik:radtabstrip id="RadTabStrip1" MultiPageID="RadMultiPage1" Runat="server"
                <Tabs> 
                </Tabs> 
            </telerik:radtabstrip> 
             
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0"
            </telerik:RadMultiPage> 
            <button onclick="return addtab();">Add new tab</button> 
</telerik:RadAjaxPanel> 
 
<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> 
The code above is in a user control and I have rad ajax proxy manager on the User control. The Ajax manager is in a master page. I have a public property on the master page;
    public RadAjaxManager AjaxManager 
    { 
        get { return this.RadAjaxManagerMaster; } 
    }  
I cant use <ClientEvents OnRequestStart="RequestStart" /> on the proxy manager.

I am not using a server button to add my tab, just an html button. How can I initiate the loading panel.
Thanks


0
Missing User
answered on 05 Jun 2008, 10:58 AM
Hello Howard,


Please find attached a sample project showing how to hide/show the loading template. Feel free to modify it according to your needs.

All the best,
Plamen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
mzn developer
Top achievements
Rank 1
answered on 14 Aug 2008, 06:48 PM
Deleted original post - working as intended after further investigation.
Tags
TabStrip
Asked by
Officialboss
Top achievements
Rank 1
Answers by
Paul
Telerik team
Officialboss
Top achievements
Rank 1
Missing User
mzn developer
Top achievements
Rank 1
Share this question
or