RadPanelBar with "Load on demand" items

14 posts, 0 answers
  1. Pascal
    Pascal avatar
    3 posts
    Member since:
    Oct 2012

    Posted 06 Mar 2009 Link to this post

    I have a scenario where I would like to use User Controls as items of a my Panel Bar and I only want the contents for the User Controls to be loaded (i.e. made visible on the server-side) when the Panel Item that contains the control is expanded. I.e. I would like the contents of a Panel Item to be "loaded on demand". (I am aware that if a User Control is not visible, that the control "is processed" until the rendering stage of the page life cycle, but my aim with this "load on demand" functionality is to minimize the amount of HTML on the clients side until it is "really needed"/requested)

    Do you guys have any examples of such a scenario? Or would you not suggest using a RadPanelBar for this?
  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 09 Mar 2009 Link to this post

    Hi Pascal,

    Please find below a sample code snippet that shows the needed approach.

    ASPX:
    <form id="form1" runat="server">  
    <asp:ScriptManager ID="ScriptManager1" runat="server">  
    </asp:ScriptManager> 
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">  
        <AjaxSettings> 
        <telerik:AjaxSetting AjaxControlID="RadPanelBar1">  
            <UpdatedControls> 
            <telerik:AjaxUpdatedControl ControlID="RadPanelBar1" /> 
            </UpdatedControls> 
        </telerik:AjaxSetting> 
        </AjaxSettings> 
    </telerik:RadAjaxManager> 
    <telerik:RadPanelBar ID="RadPanelBar1" runat="server" OnItemClick="RadPanelBar1_ItemClick" 
        ExpandMode="FullExpandedItem">  
        <CollapseAnimation Duration="100" Type="None" /> 
        <Items> 
        <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1">  
            <Items> 
            <telerik:RadPanelItem runat="server">  
            </telerik:RadPanelItem> 
            </Items> 
        </telerik:RadPanelItem> 
        <telerik:RadPanelItem runat="server" Text="Root RadPanelItem2">  
            <Items> 
            <telerik:RadPanelItem runat="server">  
            </telerik:RadPanelItem> 
            </Items> 
        </telerik:RadPanelItem> 
        </Items> 
        <ExpandAnimation Duration="100" Type="None" /> 
    </telerik:RadPanelBar> 
    </form> 

    Code-behind:
    using System;  
    using System.Data;  
    using System.Configuration;  
    using System.Collections;  
    using System.Web;  
    using System.Web.Security;  
    using System.Web.UI;  
    using System.Web.UI.WebControls;  
    using System.Web.UI.WebControls.WebParts;  
    using System.Web.UI.HtmlControls;  
    using Telerik.Web.UI;  
     
    public partial class _Default : System.Web.UI.Page  
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            if (this.RadPanelBar1.SelectedItem != null)  
            {  
                LoadControls(this.RadPanelBar1.SelectedItem.Text);  
            }  
        }  
     
        private void LoadControls(string text)  
        {  
            switch (text)  
            {  
                case "Root RadPanelItem1":  
                    Control userControl1 = Page.LoadControl("~/WebUserControl.ascx");  
                    userControl1.ID = "userControl1";  
                    RadPanelItem pItem = (RadPanelItem)RadPanelBar1.FindItemByText("Root RadPanelItem1");  
                    pItem.Items[0].Controls.Add(userControl1);  
                    pItem.Expanded = true;  
                    break;  
     
                case "Root RadPanelItem2":  
                    Control userControl2 = Page.LoadControl("~/WebUserControl2.ascx");  
                    userControl2.ID = "userControl1";  
                    RadPanelItem pItem2 = (RadPanelItem)RadPanelBar1.FindItemByText("Root RadPanelItem2");  
                    pItem2.Items[0].Controls.Add(userControl2);  
                    pItem2.Expanded = true;  
                    break;  
            }  
        }  
     
        protected void RadPanelBar1_ItemClick(object sender, Telerik.Web.UI.RadPanelBarEventArgs e)  
        {  
              
        }  
    }  
     


    Sincerely yours,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. J-F
    J-F avatar
    4 posts
    Member since:
    Apr 2009

    Posted 02 Apr 2009 Link to this post

    Hi,

    Excellent, the "load on demand" panel bar is working fine for me.
    I have a user control under the RadPanelItem of the RadPanelBar the same way you show.

    But...

    My user control have a RadWindows and some Javascript.
    It seem that the javascript cannot be recognize.
    It says "  'functionA' is undefined

    How can i make my javascript work in a user control under a RadPanelBar "Load on-demand"?

    Note: the UC's javascript works perfectly outside the RadPanelBar

    I think this is a tought one.

    J-F

  5. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 03 Apr 2009 Link to this post

    Hi J-F,

    Just wrap the scripts defined in the UserControl(s) inside RadScriptBlock, i.e.

    <telerik:RadScriptBlock runat="server" ID="RadScriptBlock2">  
    <script type="text/javascript">  
        function pageLoad() {  
            alert()  
        }  
    </script> 
    </telerik:RadScriptBlock> 


    Regards,
    Paul
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  6. J-F
    J-F avatar
    4 posts
    Member since:
    Apr 2009

    Posted 03 Apr 2009 Link to this post

    Its working.

    Thanks for the vary fast reponse.

    I'm impress.

    J-F
  7. J-F
    J-F avatar
    4 posts
    Member since:
    Apr 2009

    Posted 06 Apr 2009 Link to this post

    Oups...

    It's working fine but a functionnality do not work properly.

    When I load on demande my User control, the "Page.isPostBack" is always true, even if this is the first time the uc is loaded.

    For exemple

    public

     

    partial class ucCratesAndContainersList

     

    {
        protected void Page_Load(object sender, EventArgs e)

     

        {
            if ( !Page.IsPostBack  )

     

            {
                //Load data
            }
            //Do something else
        }
    }
     "Load data" is never call because Page.IsPostBack  is always true.
    This problem appear with the "Load on demand" strategy for an UC like you mention.

    My question is:
    1. why Page.IsPostBack is always true even if the User Control is load for the first time
    2. What can i do to use my UC normaly with the Page.isPostback functionnality

    Thanks

    And thank you for your always good services

  8. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 07 Apr 2009 Link to this post

    Hello J-F,

    You can easily achieve your goal by raising a flag in the ViewState, i.e.

    public partial class WebUserControl : System.Web.UI.UserControl  
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            if (ViewState["IsPostBack"] == null)  
            {  
                //Load data  
     
                ViewState["IsPostBack"] = true;  
            }  
            //Do something else  
        }  


    Sincerely yours,
    Paul
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  9. Brent
    Brent avatar
    11 posts
    Member since:
    Oct 2009

    Posted 18 Feb 2010 Link to this post

    Hi there,

    I'm having the same JavaScript problem as J-F... I've already got the Javascript in a RadCodeBlock, but still getting the same error about things being undefined. Does anyone have any suggestions?

    Cheers,

    Brent
  10. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 20 Feb 2010 Link to this post

    Brent, can you give any more detail?  Can we see your page code?
  11. Brent
    Brent avatar
    11 posts
    Member since:
    Oct 2009

    Posted 20 Feb 2010 Link to this post

    Hi Steve,

    I have actually managed to solve this. The problem was I was wrapping my JavaScript in RadCodeBlock tags, not RadScriptBlock tags. Once I changed that over all was well.

    Cheers,

    Brent.
  12. Joshua Grippo
    Joshua Grippo avatar
    10 posts
    Member since:
    Nov 2009

    Posted 07 Mar 2011 Link to this post

    This almost works for me, but I have 2 problems. 1. If I change the ExpandMode from Full to Multiple it loses the previous control that was loaded. 2. If I click on the expand/collapse icon, then no postback ever happens.

    http://www.telerik.com/community/forums/aspnet-ajax/panelbar/radpanelbar-itemclick-does-not-fire-when-expand-collapse-icon-is-clicked.aspx
  13. Anne Chinn
    Anne Chinn avatar
    15 posts
    Member since:
    Mar 2004

    Posted 01 Sep 2011 Link to this post

    I wanted to follow this example, but it causes the panel to be loaded on every expand/collapse, which isn't much of an improvement.
    Shouldn't it have code similar to the on demand tab example that checks client-side if the tab has already been loaded and aborts the post-back if it has?

    If so, can you show me the client-side equivalent code to check if the panel has already been loaded? I see that I can handle the ItemClicking event, but can't figure out what I should be testing to see if the panelitem already exists.

    Thanks,

    Anne
  14. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 06 Sep 2011 Link to this post

    Hello Anne,

    The functionality that you liked for RadTabStrip is actually achieved with the help of RadMultiPage. Unfortunately the same functionality cannot be translated for RadPanelBar.

    Regards, Peter
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  15. dotnetrockerzzz
    dotnetrockerzzz avatar
    32 posts
    Member since:
    Aug 2010

    Posted 01 Oct 2011 Link to this post

    Hello every1 a same 'type of' problem coming up with me .. help out 
    http://www.telerik.com/community/forums/aspnet-ajax/panelbar/urgent-load-on-demand-radpanelbar-with-multipage.aspx

    Thanks... 
    It's pretty urgent
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017