This is a migrated thread and some comments may be shown as answers.
RadPanelBar with "Load on demand" items
14 Answers 388 Views
This is a migrated thread and some comments may be shown as answers.
Pascal
Top achievements
Rank 1
Pascal asked on 06 Mar 2009, 11:54 AM
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?

14 Answers, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 09 Mar 2009, 02:14 PM
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.
0
J-F
Top achievements
Rank 1
answered on 03 Apr 2009, 02:15 AM
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

0
Paul
Telerik team
answered on 03 Apr 2009, 08:02 AM
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.
0
J-F
Top achievements
Rank 1
answered on 03 Apr 2009, 03:13 PM
Its working.

Thanks for the vary fast reponse.

I'm impress.

J-F
0
J-F
Top achievements
Rank 1
answered on 06 Apr 2009, 02:46 PM
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

0
Paul
Telerik team
answered on 07 Apr 2009, 08:22 AM
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.
0
Brent
Top achievements
Rank 1
answered on 19 Feb 2010, 03:06 AM
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
0
Steve
Top achievements
Rank 2
answered on 20 Feb 2010, 03:53 PM
Brent, can you give any more detail?  Can we see your page code?
0
Brent
Top achievements
Rank 1
answered on 21 Feb 2010, 02:27 AM
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.
0
Joshua Grippo
Top achievements
Rank 1
answered on 07 Mar 2011, 11:07 PM
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
0
Anne Chinn
Top achievements
Rank 1
answered on 01 Sep 2011, 07:10 PM
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
0
Peter
Telerik team
answered on 06 Sep 2011, 04:14 PM
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 >>

0
dotnetrockerzzz
Top achievements
Rank 2
answered on 01 Oct 2011, 11:14 AM
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
0
Nagendra
Top achievements
Rank 1
answered on 08 Dec 2017, 04:52 PM

Hi Paul,

Please let me know how to achieve the same in the below case:

 

<telerik:RadPanelBar ID="RadPanelBarTypes" CausesValidation="false" runat="server" Width="1360px" OnItemClick="RadPanelBarTypes_ItemClick">
                            <Items>
                                <telerik:RadPanelItem Expanded="True" Text="test" Selected="true">
                                    <ContentTemplate>
                                        <uc1:UserControl runat="server" ID="UserControl1" CodeType="VCD" />
                                    </ContentTemplate>
                                </telerik:RadPanelItem>
                                <telerik:RadPanelItem Text="ICD 10 PX">
                                    <ContentTemplate>
                                       <uc1:UserControl runat="server" ID="UserControl2" CodeType="uuuu" /> CodeType="IKD" />
                                    </ContentTemplate>
                                </telerik:RadPanelItem>

.

.

Here I want to use a property like RenderSelectedPageOnly that we have in RadMultiPage. Could you please suggest.

Asked by
Pascal
Top achievements
Rank 1
Answers by
Paul
Telerik team
J-F
Top achievements
Rank 1
Brent
Top achievements
Rank 1
Steve
Top achievements
Rank 2
Joshua Grippo
Top achievements
Rank 1
Anne Chinn
Top achievements
Rank 1
Peter
Telerik team
dotnetrockerzzz
Top achievements
Rank 2
Nagendra
Top achievements
Rank 1
Share this question
or