Can PanelBar load different aspx pages?

6 posts, 1 answers
  1. AL
    AL avatar
    40 posts
    Member since:
    May 2008

    Posted 12 Jan 2009 Link to this post

    Hi,

    I am creating survey site, and would love to use Telerik Controls (as they are GREAT). I just don't know how to use PanelBar to load different ASPX pages (NOT UserControls: I am fed up with usercontrols as it is very difficult to call javascript functions).

    For example: I have a PanelBar in an aspx page. CLicking one of the items in PanelBar redirects the user to different aspx page. When the new aspx page loads, I want the panelBar to show up with the selected (highlighted) link, that brought the user here in first place.

    Thanks,
  2. Serrin
    Serrin avatar
    286 posts
    Member since:
    Sep 2008

    Posted 13 Jan 2009 Link to this post

    Hey Al,

    Here's an example of how you can do this with a little code-behind magic...

    Here's RadPanelNavTest-A.aspx:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadPanelNavTest-A.aspx.cs" Inherits="RadPanelNavTest_A" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title></title>  
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <div> 
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
            </telerik:RadScriptManager> 
            <telerik:RadPanelBar ID="RadPanelBar1" runat="server">  
                <CollapseAnimation Type="None" Duration="100"></CollapseAnimation> 
     
                <Items> 
                    <telerik:RadPanelItem runat="server" Text="Home">  
                        <Items> 
                            <telerik:RadPanelItem runat="server" Text="Child1" NavigateUrl="RadPAnelNavTest-B.aspx?tgt=Child1">  
                            </telerik:RadPanelItem> 
                            <telerik:RadPanelItem runat="server" Text="Child2" NavigateUrl="RadPAnelNavTest-A.aspx?tgt=Child2">  
                            </telerik:RadPanelItem> 
                            <telerik:RadPanelItem runat="server" Text="Child3">  
                            </telerik:RadPanelItem> 
                        </Items> 
                    </telerik:RadPanelItem> 
                    <telerik:RadPanelItem runat="server" Text="Not Home">  
                        <Items> 
                            <telerik:RadPanelItem runat="server" Text="Child4">  
                            </telerik:RadPanelItem> 
                            <telerik:RadPanelItem runat="server" Text="Child5">  
                            </telerik:RadPanelItem> 
                            <telerik:RadPanelItem runat="server" Text="Child6">  
                            </telerik:RadPanelItem> 
                        </Items> 
                    </telerik:RadPanelItem> 
                </Items> 
     
            <ExpandAnimation Type="None" Duration="100"></ExpandAnimation> 
            </telerik:RadPanelBar> 
        </div> 
        </form> 
    </body> 
    </html> 
     

    And the .cs backend:
    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
    using System.Web.UI;  
    using System.Web.UI.WebControls;  
    using Telerik.Web.UI;  
    using System.Drawing;  
     
    public partial class RadPanelNavTest_A : System.Web.UI.Page  
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            if (Request["tgt"] != null)  
            {  
                string panelTarget = Request["tgt"].ToString();  
     
                RadPanelItem rpi = RadPanelBar1.FindItemByText(panelTarget);  
     
                rpi.BackColor = Color.CornflowerBlue;  
     
                RadPanelItem parentOfrpi = rpi.Parent as RadPanelItem;  
     
                parentOfrpi.Expanded = true;  
            }  
        }  
    }  
     

    Now also make an additional RadPanelNavTest-B.aspx with the same RadPanel setup and the same Page_Load logic in the code-behind.  The logic here is...

    • RadPanelItem's can be id'd by their .Text property, so...
    • Pass their text item as a tgt argument in the url
    • Grab that argument (if it exists, that is)
    • Find the item in the root RadPanelBar
    • Give it a nice backcolor (or you can do css here, your call)
    • Last but not least, find the parent RadPanelItem and set it to expanded so you can see the fruits of your labor

    Let me know if that works for you. :)

    -Serrin

     

    P.S.- I took a break from what I was working on this morning to figure this out as I share your hatred for usercontrols. ;D

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Serrin
    Serrin avatar
    286 posts
    Member since:
    Sep 2008

    Posted 13 Jan 2009 Link to this post

    Eep, one more thing, since I'm a moron and went for the easiest and first thing that came to mind for example sakes, you can also set the .Value of the RadPanelItems and use .FindPanelByValue.  Probably a prettier option if you're using anything beyond one-word .Text properties. :)

    Cheers!
  5. AL
    AL avatar
    40 posts
    Member since:
    May 2008

    Posted 13 Jan 2009 Link to this post

    Thanks Serrin. I tried your code and suggestion, and it worked. This means I have to replicate the same panelBar code in 40 - 50 aspx survey pages! There must be a better ways to accomplish it, I am now thinking of using RadSplitter, where I have the PanelBar on Left pane and the content will load on the right pane... see below

    __________________________________________________
    I PanelBar I             Child1.aspx pages load in this area             I
    I    Child 1  I                                                                                 I
    I     Child 2 I                                                                                 I
    I                 I                                                                                 I
    I                 I                                                                                 I
    __________________________________________________

    I don't know much about RadSplitter yet, I was thinking if you have any RadSplitter code to get started?

    Thanks again.
     AL
  6. Answer
    Serrin
    Serrin avatar
    286 posts
    Member since:
    Sep 2008

    Posted 14 Jan 2009 Link to this post

    Hey Al,

     

    I knew I saw this in a demo somewhere, just couldn't find it until this morning... ;)

     

    http://demos.telerik.com/aspnet-ajax/Splitter/Examples/ExternalContentLoading/DefaultCS.aspx

    This gives you the basic layout of the splitter, all you have to do is swap a RadPanelBar into the left pane and have it set the ContentUrl of the right pane. Definitely a better option if you're dealing with that many pages!!

  7. AL
    AL avatar
    40 posts
    Member since:
    May 2008

    Posted 14 Jan 2009 Link to this post

    That is a good place to start. Thanks for the link.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017