Dynamic Client Side TabStrip and MultiPage

2 posts, 0 answers
  1. rubenhak
    rubenhak avatar
    58 posts
    Member since:
    Dec 2008

    Posted 16 Oct 2009 Link to this post


    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();  
    var ajaxManager = $find('<%= RadAjaxManager1.ClientID %>');  
    ajaxManager.ajaxRequest("ActivateTab," + menuName);  

    2) In ajax handler:
    RadTabtab = new RadTab();  
    tab.Text = args[1];  
    RadPageView pageView = new RadPageView();  
    pageView.ID = args[1];  
    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()) {  
    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);  

    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,

    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.

  2. Yana
    Yana avatar
    4547 posts

    Posted 21 Oct 2009 Link to this post

    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.

    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.
  3. DevCraft R3 2016 release webinar banner
Back to Top