RadPanelBar with "Load on demand" items

[Pascal]

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?

[Paul]

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.

[J-F]

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

[Paul]

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.

[J-F]

Its working.

Thanks for the vary fast reponse.

I'm impress.

J-F

[J-F]

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

[Paul]

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.

[Brent]

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

[sitefinitysteve]

Brent, can you give any more detail?  Can we see your page code?

[Brent]

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.

[Joshua Grippo]

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

[Anne Chinn]

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

[Peter]

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

[dotnetrockerzzz]

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

[Nagendra]

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.