Few Problems with Load on Demand

[David]

Hi,

I have tried to implement a load-on-demand scenario as per this demo, but have run into problems. When I first load the page, the first tab is populated properly. If I then click on the 2nd tab and then click back to the first one, the first tab is blank.

Here is my code:
CustomerDetails.aspx

    <script type="text/javascript">

        function onTabSelecting(sender, args) {
            if (args.get_tab().get_pageViewID()) {
                args.get_tab().set_postBack(false);
            }
        }

    </script>

<h1>Customer Details</h1>

<div class="normalPanel"><asp:Label ID="CustomerIdLabel" runat="server" Text="Customer ID: " /></div>

<telerik:RadTabStrip ID="CustomerDetailsRadTabStrip" ClientIDMode="Static" ShowBaseLine="true"
                     OnClientTabSelecting="onTabSelecting" runat="server" MultiPageID="CustomerDetailsRadMultiPage"
                     OnTabClick="RadTabStrip1_TabClick" Orientation="HorizontalTop">
</telerik:RadTabStrip>

<telerik:RadMultiPage ID="CustomerDetailsRadMultiPage" ClientIDMode="Static" runat="server" SelectedIndex="0"
                      OnPageViewCreated="RadMultiPage1_PageViewCreated">
</telerik:RadMultiPage>

CustomerDetails.aspx.cs

using System;
using Microsoft.Practices.ObjectBuilder;
using System.Collections;
using AWModel;
using System.Data.Objects;
using Telerik.Web.UI;
using System.Web.UI;
using AdvWorksWCSF.Shared.Code;

namespace AdvWorksWCSF.Customer.Views
{
    public partial class CustomerDetails : Microsoft.Practices.CompositeWeb.Web.UI.Page, ICustomerDetailsView
    {
        private CustomerDetailsPresenter _presenter;
        private ViewStateValue<int> customerID;

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                this._presenter.OnViewInitialized();

                this.AddTab("Customer Details", "CustomerDetailsControl");
                this.AddPageView(this.CustomerDetailsRadTabStrip.FindTabByValue("CustomerDetailsControl"));
                this.AddTab("Demographics", "DemographicInfoControl");

                CustomerDetailsControl customerDetailsControl = this.CustomerDetailsRadMultiPage.FindControl("CustomerDetailsControl_userControl") as CustomerDetailsControl;
                customerDetailsControl.CustomerID = int.Parse(Request.QueryString["CustomerID"]);
                this.CustomerIdLabel.Text += customerDetailsControl.CustomerID.ToString();
            }
            this._presenter.OnViewLoaded();
        }

        [CreateNew]
        public CustomerDetailsPresenter Presenter
        {
            get
            {
                return this._presenter;
            }
            set
            {
                if (value == null)
                    throw new ArgumentNullException("value");

                this._presenter = value;
                this._presenter.View = this;
            }
        }

        private void AddTab(string tabName, string tabValue)
        {
            RadTab tab = new RadTab();
            tab.Text = tabName;
            tab.Value = tabValue;
            this.CustomerDetailsRadTabStrip.Tabs.Add(tab);
        }

        protected void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e)
        {
            string userControlToLoad = this.AppRelativeTemplateSourceDirectory +
                string.Format(Constants.BuildTabString, e.PageView.ID);

            Control userControl = Page.LoadControl(userControlToLoad);
            userControl.ID = string.Format(Constants.BuildUserControlString, e.PageView.ID);

            e.PageView.Controls.Add(userControl);
        }

        private void AddPageView(RadTab tab)
        {
            RadPageView pageView = new RadPageView();
            pageView.ID = tab.Value;
            this.CustomerDetailsRadMultiPage.PageViews.Add(pageView);
            //pageView.CssClass = "pageView";
            tab.PageViewID = pageView.ID;
        }

        protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)
        {
            AddPageView(e.Tab);
            e.Tab.PageView.Selected = true;
        }
    }
}

CustomerDetailsControl.ascx

<%@ Control Language="C#" AutoEventWireup="true" Codebehind="CustomerDetailsControl.ascx.cs" Inherits="AdvWorksWCSF.Customer.Views.CustomerDetailsControl" %>

<%@ Import Namespace="AWModel" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

    <asp:FormView ID="CustomerDetailsFormView" runat="server" CssClass="customerDetailsForView">
        <ItemTemplate>
        <asp:Panel ID="NameDetailsPanel" runat="server" ClientIDMode="Static" GroupingText="Name and Title" CssClass="normalPanel">
            <div class="customerDetailsRow">
                <div class="customerDetailsLeftCell">
                    <div class="customerDetailsLabel">Title:</div>
                    <div class="customerDetailsValue"><asp:Label ID="TitleLabel" Text='<%# Eval("Title") %>' runat="server" /></div>
                </div>
                <div class="customerDetailsRightCell">
                    <div class="customerDetailsLabel">Last Name:</div>
                    <div class="customerDetailsValue"><asp:Label ID="LastNameLabel" Text='<%# ((GetDetailsForIndividualCustomerCT)Container.DataItem).LastName.ToString() %>' runat="server" /></div>
                </div>
            </div>
            <div class="customerDetailsRow">
                <div class="customerDetailsLeftCell">
                    <div class="customerDetailsLabel">First Name:</div>
                    <div class="customerDetailsValue"><asp:Label ID="FirstNameLabel" Text='<%# ((GetDetailsForIndividualCustomerCT)Container.DataItem).FirstName.ToString() %>' runat="server" /></div>
                </div>
                <div class="customerDetailsRightCell">
                    <div class="customerDetailsLabel">Middle Name:</div>
                    <div class="customerDetailsValue"><asp:Label ID="MiddleNameLabel" Text='<%# Eval("MiddleName") %>' runat="server" /></div>
                </div>
            </div>
        </asp:Panel>
        <asp:Panel ID="ContactDetailsPanel" GroupingText="Contact Details" runat="server" CssClass="normalPanel">
            <div class="customerDetailsRow">
                <div class="customerDetailsLeftCell">
                    <div class="customerDetailsLabel">Email:</div>
                    <div class="customerDetailsValue"><asp:Label ID="EmailLabel" Text='<%# ((GetDetailsForIndividualCustomerCT)Container.DataItem).EmailAddress.ToString() %>' runat="server" /></div>
                </div>
                <div class="customerDetailsRightCell">
                    <div class="customerDetailsLabel">Phone:</div>
                    <div class="customerDetailsValue"><asp:Label ID="PhoneLabel" Text='<%# Eval("Phone") %>' runat="server" /></div>
                </div>
            </div>
            <div class="customerDetailsRow">
                <div class="customerDetailsLeftCell">
                    <div class="customerDetailsLabel">Address:</div>
                    <div class="customerDetailsValue"><asp:Label ID="AddressLine1Label" Text='<%# ((GetDetailsForIndividualCustomerCT)Container.DataItem).AddressLine1.ToString() %>' runat="server" /></div>
                </div>
                <div class="customerDetailsLeftCell">
                    <div class="customerDetailsLabel"></div>
                    <div class="customerDetailsValue"><asp:Label ID="AddressLine2Label" Text='<%# Eval("AddressLine2") %>' runat="server" /></div>
                </div>
            </div>
            <div class="customerDetailsRow">
                <div class="customerDetailsLeftCell">
                    <div class="customerDetailsLabel">City:</div>
                    <div class="customerDetailsValue"><asp:Label ID="CityLabel" Text='<%# ((GetDetailsForIndividualCustomerCT)Container.DataItem).City.ToString() %>' runat="server" /></div>
                </div>
                <div class="customerDetailsRightCell">
                    <div class="customerDetailsLabel">Post code:</div>
                    <div class="customerDetailsValue"><asp:Label ID="PostalCodeLabel" Text='<%# Eval("PostalCode") %>' runat="server" /></div>
                </div>
            </div>
            <div class="customerDetailsRow">
                <div class="customerDetailsLeftCell">
                    <div class="customerDetailsLabel">State/Province:</div>
                    <div class="customerDetailsValue"><asp:Label ID="Label1" Text='<%# ((GetDetailsForIndividualCustomerCT)Container.DataItem).State_Province.ToString() %>' runat="server" /></div>
                </div>
                <div class="customerDetailsRightCell">
                    <div class="customerDetailsLabel">Sales Territory:</div>
                    <div class="customerDetailsValue"><asp:Label ID="Label2" Text='<%# ((GetDetailsForIndividualCustomerCT)Container.DataItem).Sales_Territory.ToString() %>' runat="server" /></div>
                </div>
            </div>
        </asp:Panel>
        </ItemTemplate>
    </asp:FormView>

CustomerDetailsControl.ascx.cs:

using System;

using Microsoft.Practices.ObjectBuilder;

using AWModel;

using System.Data.Objects;

 

namespace AdvWorksWCSF.Customer.Views

{

    public partial class CustomerDetailsControl : Microsoft.Practices.CompositeWeb.Web.UI.UserControl, ICustomerDetailsControlView

    {

        private CustomerDetailsControlPresenter _presenter;

        private int customerID;

 

        protected void Page_Load(object sender, EventArgs e)

        {

            if (!this.IsPostBack)

            {

                this._presenter.OnViewInitialized();

            }

            this._presenter.OnViewLoaded();

        }

 

        [CreateNew]

        public CustomerDetailsControlPresenter Presenter

        {

            get

            {

                return this._presenter;

            }

            set

            {

                if (value == null)

                    throw new ArgumentNullException("value");

 

                this._presenter = value;

                this._presenter.View = this;

            }

        }

 

        public int CustomerID

        {

            get

            {

                return customerID;

            }

            set

            {

                customerID = value;

            }

        }

 

        public ObjectResult<GetDetailsForIndividualCustomerCT> CustomerDetailsFormDataSource

        {

            set

            {

                this.CustomerDetailsFormView.DataSource = value;

                this.CustomerDetailsFormView.DataBind();

            }

        }

    }

}

There's another interesting thing which happens. If I add a RadAjaxManagerProxy to the aspx page setting the tabstrip as the source and updated controls along with the Multipage as a second updated control (as is done in the demo referred to above, a javascript error (null reference) is thrown.

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="CustomerDetailsRadTabStrip">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="CustomerDetailsRadTabStrip" />
                <telerik:AjaxUpdatedControl ControlID="CustomerDetailsRadMultiPage" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="CustomerDetailsRadMultiPage">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="CustomerDetailsRadMultiPage" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

Here is a screenshot of the error.

Can anyone see why there is a problem? What have I done wrong?

Cheers

[David]

I figured the 2nd part out i.e. the javascript error.
It was because I had ClientIDMode="Static" set on both of the controls.
Apparently, it does not like the new static ID thing.

But the 1st problem remains i.e. the empty 1st tab upon return.

[Dimitar Terziev]

Hello David,

As it seems from the code snippet posted, you are using the approach from the demo. I've noticed that you are using custom implementation of the RadTabStrip, so in order to troubleshoot this issue, please open a support ticket and provide us with a runnable sample project.

Regards,
Dimitar Terziev
the Telerik team

[David]

[Kwok (Andrew)]

Is any solution for this problem. I get the same problem when i click on the 2nd tab and click back the 1st tab the page is bank. I find that when I click on the 2nd tab, it will do the postback and the pageview.controls for all pageviews are set to 0 (all controls are loss). Please let me know if you have solve this problem.

[Dimitar Terziev]

Hello,

In order to help you troubleshoot the experienced problem please share the implementation that you are using. From what you have provided as information it seems that the RenderSelectedPageOnly property of the RadMultiPage is set to true. In case this is so, only the currently selected pageview will render its content and a post-back should be made when switching between tabs so the controls in the corresponding pageview which is about to be shown could be initialized.

Greetings,
Dimitar Terziev
the Telerik team

[Kwok (Andrew)]

Dimitar Terziev

Thank you for your help. you are right, I set the RenderSelectedPageOnly to true. Once I set it to false. It is ok.

Thank you