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

RadTabStrip/RadMultiPage Dynamic RadPageView Load

17 Answers 1175 Views

TabStrip

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

Devin Duden asked on 12 Jan 2011, 07:14 AM

Hello,

I'm experiencing an issue with a page dynamically loading a RadPageView for a RadMultiPage control associated with a RadTabStrip. The issue is when clicking on a tab the AjaxLoadingPanel displays, when the async is complete the RadPageView is not displayed. The content remains on the original tab loaded. I have followed Teleriks example for "Dynamically Load RadPageView". My code is below. This code works greate in development, test webserver with medium trust-level, and fails to work in production (GoDaddy shared hosting with medium trust-level).

Also, as a side note. The RadPageView's are being loaded with RadGrid user controls. The production paging for a RadGrid causes a page postback, when should load the next page using Ajax. Again, works great in development and test, but not production.

If the code is changed to allow all tab PageView's to be created in the LoadTabs routine, then all works well except for the RadGrid paging issue. However, I would like to utilize the dynamic RadPageView load to reduce page load times.

Please review and provide a solution.

Thanks,
Devin D

Form Code

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<div class="button">

<a class="m2" href="#" onclick="showServicesMenu(event)">services</a>

</div>

<div class="block">

<DTS:CloseButton ID="PageClose" runat="server" SiteContext="www" PageName="Services.aspx" />

<h1 class="padding1 heading1">Our Services</h1>

<hr class="hrPageHeading" />

<p class="padding2 normalText">Please select a tab to view an IT service area details. Use the arrows to navigate between tabs and service details.</p>

<div class="padding4">

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="rtsServices">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rtsServices" />

<telerik:AjaxUpdatedControl ControlID="rmpServices" LoadingPanelID="LoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="rmpServices">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rmpServices" LoadingPanelID="LoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<script type="text/javascript">

function onTabSelecting(sender, args) {

if (args.get_tab().get_pageViewID()) {

args.get_tab().set_postBack(false);

}

</script>

<telerik:RadTabStrip AutoPostBack="false" OnClientTabSelecting="onTabSelecting" ID="rtsServices" SelectedIndex="0" runat="server" MultiPageID="rmpServices" CssClass="tabStrip" Skin="Black" OnTabClick="rtsServices_TabClick" Orientation="HorizontalTop" ScrollChildren="true" ScrollButtonsPosition="Middle" PerTabScrolling="true">

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="rmpServices" runat="server" SelectedIndex="0" OnPageViewCreated="rmpServices_PageViewCreated" ScrollBars="Auto" CssClass="mpItems">

</telerik:RadMultiPage>

<telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1">

</telerik:RadAjaxLoadingPanel>

</div>

<div class="servicesContact">

<DTS:Contact runat="server" ID="Contact1" />

</div>

</asp:Content

Code Behind

protected void Page_Load(object sender, EventArgs e)

        {



            if (!Page.IsPostBack)

            {

                LoadTabs();

                //if (Request.QueryString["s"] != null)

                //{

                    //this.AddPageView(rtsServices.FindTabByText(Request.QueryString["s"].ToString()));

                    //rtsServices.Tabs.FindTabByText(Request.QueryString["s"].ToString()).Selected = true;

                    //rmpServices.SelectedIndex = rtsServices.Tabs.FindTabByText(Request.QueryString["s"].ToString()).Index;

                //}

            }

        }



        private void LoadTabs()

        {

            Int32 i = 1;



            if (Request.QueryString["s"] == null)

            {

                SqlDataReader reader = service.GetServices();

                while (reader.Read())

                {

                    AddTab(reader["Descr"].ToString());

                    if (i == 1)

                    {

                        AddPageView(rtsServices.FindTabByText(reader["Descr"].ToString()));

                    }

                    i++;

                }

            }

            else

            {

                AddTab(Request.QueryString["s"]);

                AddPageView(rtsServices.FindTabByText(Request.QueryString["s"].ToString()));

            }

        }



        private void AddTab(string tabName)

        {

            RadTab tab = new RadTab();

            tab.Text = tabName;

            //tab.SelectedCssClass = "tabStripSelectedCssClass";

            //tab.HoveredCssClass = "tabStripHoveredCssClass";

            rtsServices.Tabs.Add(tab);

        }



        protected void rmpServices_PageViewCreated(object sender, RadMultiPageEventArgs e)

        {

            string userControlName = e.PageView.ID + "ServiceItems.ascx";



            Control userControl = Page.LoadControl("/Controls/" + userControlName);

            userControl.ID = e.PageView.ID + "_userControl";



            e.PageView.Controls.Add(userControl);

        }



        private void AddPageView(RadTab tab)

        {

            RadPageView pageView = new RadPageView();

            pageView.ID = tab.Text;

            rmpServices.PageViews.Add(pageView);

            tab.PageViewID = pageView.ID;

        }



        protected void rtsServices_TabClick(object sender, RadTabStripEventArgs e)

        {

            AddPageView(e.Tab);

            e.Tab.PageView.Selected = true;

            //rmpServices.SelectedIndex = rtsServices.SelectedIndex;

        }

17 Answers, 1 is accepted

answered on 14 Jan 2011, 04:28 PM

Hello Telerik Support,

Thank you very much for the solution. I had step 1 implemented, but the two remaining steps solved the problem. I appreciate the quick response and solution.

I have noticed a couple of issues with this solution.

The RadTabStrip reacts irratically when you click a tab that is scrolled to and clicked to load its contents.
1. The tab strip will jump from its clicked tab to the beginning or middle of the tab strip losing focus on selected tab.
2. The arrow buttons will not allow you to scroll to the beginning of the tab strip.
The RadTabStrip in FireFox breaks to a second line when scrolling is enabled.

Thank you,

Devin

answered on 12 Apr 2012, 01:47 PM

Hi,

I have a similar kind of issue, I am dynamically loading three user controls in three tab using radmultiview in association with radtabstrip.
Each user controls has a repeater and a gridview, which are loaded using a function called BindControls, which I am calling from the page_load (not ispostback). I am using radajaxmanager in the main page, and proxies in the user controls, and also, I have few javascript inside the usercontrols, which is used to open popup using radwindow manager. I have followed the demo in this site..

First issue is, the controls inside the usercontrols are not loaded, except the first tab (that also initially only). while debugging, I found that, on tab click, it is going to the respective usercontrol, however not going to the !ispostback condition.. Is there a way to call the bindcontrols function from the main page?

Second issue is, the javascript is not found in the dynamic usercontrols. (for the time being, I set the oncli.. property to true, to avoid this issue)..

Is it possible to send me a sample which uses these critiria? I dont want simple pages like in the demo. I would appreciate if you could provide a sample with dynamic usercontrols containing radgrid/gridview or repeater control which is loaded in the page_load. Also, on tabclick, the repeater should be reloaded (since, one tab changes might effect the other..)...

for your info, i am using radajax control 2012 (latest release) .. and the project is in .net 4.0 , vs 2010...

answered on 17 Apr 2012, 04:41 PM

Hi,

First I would like to discuss the situation with the IsPostBack condition in your user controls. Since you are loading them dynamically upon tab selection it's expected that this condition will be true. This is so because the page has already been loaded and a post back has been made when a tab has been clicked. In such scenarios like your, you should bind your controls in the Page_Init event. Even though that the controls will be rebound on every post back, their selections will be retained because of the View State which will be applied after they had been bound.

As for your second problem with the JavaScript, please elaborate a bit more on what exactly is the problem that you are experiencing. What do you mean by "javascript is not found"?

All the best,
Dimitar Terziev
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 20 Jul 2012, 04:46 PM

Hi

i just configured my tabstrips and radpageview in this way

    <div id="Tabs">
        <telerik:RadTabStrip OnClientTabSelecting="onTabSelecting" ID="RadTabStrip1" SelectedIndex="0" AutoPostBack="true" ClickSelectedTab="true" CausesValidation="false"
            runat="server" MultiPageID="RadMultiPage1" OnTabClick="RadTabStrip1_TabClick"
            Width="100%" Orientation="HorizontalTop">
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" OnPageViewCreated="RadMultiPage1_PageViewCreated" RenderSelectedPageOnly="true" RegisterWithScriptManager="false">
        </telerik:RadMultiPage>
    </div>

and woolaa it works fine for me

answered on 03 Oct 2012, 11:26 AM

I have exactly the same problem. When I load dynamic usercontrol in radtab i can not find javascript that is written on this usercontrol. I think that problem is with ajaxmanager when I remove ajax section everything goes fine.

Any idea?

my code

<telerik:RadAjaxManager ID="radAjaxManager" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="rtsProjectProcess">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rtsProjectProcess" LoadingPanelID="radAjaxLoadingPanel" />

<telerik:AjaxUpdatedControl ControlID="rmpProjcetProcess" LoadingPanelID="radAjaxLoadingPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="rmpProjcetProcess">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rmpProjcetProcess" LoadingPanelID="radAjaxLoadingPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="radAjaxLoadingPanel" runat="server" Skin="Default">

</telerik:RadAjaxLoadingPanel>

<telerik:RadTabStrip ID="rtsProjectProcess" runat="server" MultiPageID="rmpProjcetProcess"

SelectedIndex="0" OnClientTabSelecting="onTabSelecting"

ontabclick="RtsProjectProcess_TabClick" Skin="Office2010Black">

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="rmpProjcetProcess" runat="server" SelectedIndex="0"

OnPageViewCreated="RmpProjcetProcess_PageViewCreated">

</telerik:RadMultiPage>

answered on 25 Oct 2012, 09:45 PM

I also get the same problem when dynamic create a pageview and add a user control to the pageveiw. the javascript in not show up.

here is my code with the RadTabstrip when click on the tab it will create a pageview and add the user control to the page. it is almost like your demos code.

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1">

</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadTabStrip1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />

<telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadMultiPage1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<script type="text/javascript">

function onTabSelecting(sender, args) {

if (args.get_tab().get_pageViewID()) {

args.get_tab().set_postBack(false);

}

</script>

<div id="psMain">

<div class="psHolderMain">

<div id="psHeader">

<div class="psHead"><strong class="psLogo"><a href="#"><%# gOEMName%></a></strong>

<div id="psShort-nav">

</div>

<div id="psMain-nav">

<telerik:RadTabStrip OnClientTabSelecting="onTabSelecting" ID="RadTabStrip1" SelectedIndex="0"

CssClass="tabStrip" runat="server" MultiPageID="RadMultiPage1"

Orientation="HorizontalTop">

</telerik:RadTabStrip>

</div>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" CssClass="multiPage" Height="600px" >

</telerik:RadMultiPage>

</div> 

</div> 

</form>

Here is the user control code

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="RadFindEmployee.ascx.vb" Inherits="RadFindEmployee" %>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function RowDblClick(sender, eventArgs) {

radopen("../RadEmpDetailEdit.aspx?EmployeeID=" + eventArgs.getDataKeyValue("KEYID"), "RadWindow1");

}

</script>

</telerik:RadCodeBlock>

<telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="btnRefresh">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadGrid1" >

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<telerik:RadFormDecorator ID="RadFormDecorator1" Runat="server"

DecoratedControls="All"

DecorationZoneID="FindEmployee_userControl_Panel1"

Skin="Default">

</telerik:RadFormDecorator>

<asp:Panel ID="Panel1" runat="server" Width="98%" Height="600px" CssClass="userControlMainPanel">

<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" Width="98%" Height="600px" BorderStyle="None">

<telerik:RadPane ID="RadPaneSearch" runat="server" width="25%" CssClass="searchPanel" BorderStyle="None">

<fieldset>

<legend>

<asp:label id="lblLeftFrame" runat="server"></asp:label>

</legend>

<ol>

<li>

<asp:Label ID="lblHeader" runat="server" ></asp:Label>

<telerik:RadTextBox ID="txtSearch" runat="server">

</telerik:RadTextBox>

</li>

</ol>

</fieldset>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server">

</telerik:RadSplitBar>

<telerik:RadPane ID="RadPaneEmployeeGrid" runat="server" Width="75%">

<telerik:RadGrid ID="RadGrid1" runat="server" ShowFooter="True" Width="99%" EnableLinqExpressions="False"

AllowSorting="True" CellSpacing="0"

GridLines="None" AllowPaging="True" >

<ClientSettings>

<Scrolling AllowScroll="True" UseStaticHeaders="True" />

<ClientEvents OnRowDblClick="RowDblClick" />

</ClientSettings>

<MasterTableView EnableViewState="False" DataKeyNames="KEYID" ClientDataKeyNames="KEYID">

<CommandItemSettings ExportToPdfText="Export to PDF" />

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"

Visible="True">

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"

Visible="True">

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False">

</FilterMenu>

</telerik:RadGrid>

</telerik:RadPane>

</telerik:RadSplitter>

</asp:Panel>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server">

<Windows>

<telerik:RadWindow runat="server" ID="RadWindow1"

Height="540px" Width="940px" ShowContentDuringLoad="false" ReloadOnShow="true" Modal="true" VisibleStatusbar="false">

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

the javascript on the user control "RowDblClick" is not load to the pageview at all, I had try to remove the <telerik:radCodeBlock> but the javascript still not included.

answered on 26 Oct 2012, 01:27 PM

I was thinking about ajax section in page that contains radtabstrip and of course all nested section in
<telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" ...
Try to leave <telerik:RadCodBlock>

Now I have something like that:
page with radtabstrip:

<telerik:RadScriptBlock runat="server" ID="RadScriptBlokProcess">

<script type="text/javascript">

function onTabSelecting(sender, args) {

if (args.get_tab().get_pageViewID()) {

args.get_tab().set_postBack(false);

}

</script>

</telerik:RadScriptBlock>

<telerik:RadTabStrip ID="rtsProjectProcess" runat="server" MultiPageID="rmpProjcetProcess"

SelectedIndex="0" OnClientTabSelecting="onTabSelecting"

ontabclick="RtsProjectProcess_TabClick" Skin="Office2010Black">

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="rmpProjcetProcess" runat="server" SelectedIndex="0"

OnPageViewCreated="RmpProjectProcess_PageViewCreated">

</telerik:RadMultiPage>

See my first post and differences in code.

answered on 23 May 2014, 05:41 AM

Hi Telerik,

I have a similar kind of experience with page dynamically loading RadPageView for a RadMultiPage control associated with a RadTabStrip and RadRotator. One landing page he/she should be displayed his corresponding images on the top navigation which is associated with radRotator control and his tabs which is associate with RadTabStrip and RadMultiPage, which is working fine. But when user click on any one of image link on the top navigation, I need to generate dynamic tabs in the same itself to add/remove tabs based on the user logins.
So as suggested in the Telerik blogs I have implemented like this, used <telerik:RadScriptManager> on Master page of SharePoint 2010, and <telerik:RadAjaxManagerProxy> on Navigational user Control(.ascx, which is a part of the default.aspx) and same way I placed <telerik:RadTabStript>, <telerik:RadMultiPage> on Tabbed user Control(.ascx, which is a part of the default.aspx) and server side code to add and remove tabs on the page. My code is working fine with for RadRotator and first time load of the tab control. But when I select an image on the radrotator the tabs on the page viewstate is not refreshing untill I press F5 manually. So please respond me on the same with some sample.

Thanks and Regards,
Venkat

answered on 27 May 2014, 11:53 AM

Hi Venkat,

If I understand your scenario correctly, you are adding tabs in the RadTabStrip control dynamically when an item in the RadRotator control is clicked and this is done via a partial postback.

It is possible that the RadTabStrip is not configured to be updated with the AJAX request. Please check the setup of the RadAjaxManager that performs the update. As described in the following help article, when updating RadMultiPage and RadTabStrip controls, you need to specify both of them as updated controls: http://www.telerik.com/help/aspnet-ajax/ajax-tips-and-tricks.html (the third case).

Note that I am guessing what your exact setup is. If you are still having difficulties, please open a support ticket and send a simple, fully runnable sample that isolates your scenario so that I can inspect it locally and provide a more to the point answer.

Regards,
Slav
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadTabStrip/RadMultiPage Dynamic RadPageView Load

17 Answers, 1 is accepted