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

Dynamic Client Side TabStrip and MultiPage

1 Answer 187 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
rubenhak
Top achievements
Rank 1
rubenhak asked on 17 Oct 2009, 02:07 AM
Hi,

I'm struggling with developing a page which has dynamic TabStrip and MultiPage. When a button is clicked a new tab and pageView should be created and selected. The main challenge for me is to make it happen on client side so that the whole page does not refresh. A've already checked the LoadOnDemand demo, but my case is bit different, as I'm instanciating tabs and pageviews dynamicly.

What is the approach that you guys follow to resolve such a problem?

So far I managed to do the following:
1) when button clicked create a tab on client side and send an ajax request to server to create a tab item and pageview on the server side:
var tab = new Telerik.Web.UI.RadTab();  
tabStrip.get_tabs().add(tab);  
tab.set_text(menuName);  
tab.select();
 
var ajaxManager = $find('<%= RadAjaxManager1.ClientID %>');  
ajaxManager.ajaxRequest("ActivateTab," + menuName);  

2) In ajax handler:
RadTabtab = new RadTab();  
tab.Text = args[1];  
RadTabStrip1.Tabs.Add(tab);  
 
RadPageView pageView = new RadPageView();  
pageView.ID = args[1];  
rmp.PageViews.Add(pageView);  
tab.PageViewID = pageView.ID; 

3) Hooked up to tab selecting handlers:
<telerik:RadTabStrip .... OnClientTabSelecting="OnMainTabSelecting" OnTabClick="RadTabStrip1_TabClick" > 
canceling the postback if pageview is already attached to tab.
        function OnMainTabSelecting(sender, args) {  
            if (args.get_tab().get_pageViewID()) {  
                args.get_tab().set_postBack(false);  
            }  
        } 
TabClick server handler:
    protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)  
    {  
    } 

4) Loading control for pageView
    protected void rmp_PageViewCreated(object sender, RadMultiPageEventArgs e)  
    {  
            string userControlName = getUserControl(e.PageView.ID);  
            Control userControl = Page.LoadControl(userControlName);  
            e.PageView.Controls.Add(userControl);  
    } 

This partially works. My main concern is that when creating a tab, it does not load the content of the pageView(I need to click on the tab load page content). Another minor issue is then I create tabs fast enough and select one of them, some of the previously created tabs disapper. Most probably the ajax request is being sent in the middle of receiveing previous postback, and some of tab creating requests are missed.

So, please help me to fix those issues. I need to make the page completely dynamic.

Thanks in advance,
Ruben.

P.S. I also tried to manipulate with PageViews in javascript, creating them on the client side and adding to multipage.get_pageViews() and multipage.get_pageViewData() arrays, and loading user control contents using WebMethods and HTTPContext.Current.Server.Execute(...) methods. It works for very simple usercontrols that have no ajaxmanagers. The ones that have some complicated controls are failing in Server.Execute methods. I'm open to any kind of solution.





1 Answer, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 21 Oct 2009, 01:44 PM
Hello Rubenhak,

I suggest you add also the tabs in AjaxRequest event handler and also you should set Selected property of the pageview after you add it.  Please find attached my test page based on your code which demonstrates this.

Greetings,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Tags
TabStrip
Asked by
rubenhak
Top achievements
Rank 1
Answers by
Yana
Telerik team
Share this question
or