Few Problems with Load on Demand

7 posts, 0 answers
  1. David
    David avatar
    87 posts
    Member since:
    Jul 2010

    Posted 16 Jul 2011 Link to this post

    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
  2. David
    David avatar
    87 posts
    Member since:
    Jul 2010

    Posted 16 Jul 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 19 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  5. David
    David avatar
    87 posts
    Member since:
    Jul 2010

    Posted 13 Aug 2011 Link to this post


  6. Kwok (Andrew)
    Kwok (Andrew) avatar
    10 posts
    Member since:
    Oct 2012

    Posted 01 Nov 2012 Link to this post

    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.
  7. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 06 Nov 2012 Link to this post

    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
    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.
  8. Kwok (Andrew)
    Kwok (Andrew) avatar
    10 posts
    Member since:
    Oct 2012

    Posted 06 Nov 2012 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017