This is a migrated thread and some comments may be shown as answers.

panel bar

16 Answers 149 Views

PanelBar

This is a migrated thread and some comments may be shown as answers.

16 Answers, 1 is accepted

answered on 26 Apr 2010, 11:38 AM

Hi,

Attach "OnClientItemClicked" event to RadMenu and in the event handler, iterate through the RadPanelItems and use the set_expanded(false) method to collpase the PanelItem from client side as shown below.

Javascript:

    
            function onClicked(sender, args) { 
        
                    var panelBar = $find("<%=RadPanelBar1.ClientID%>"); 
        
                    for (var i = 0; i < panelBar.get_items().get_count(); i++) 
        
                        panelBar.get_items().getItem(i).set_expanded(false);             
        
                }

Checkout the following documentation which shows important client side methods and properties of RadPenlBar.

I hope this would help.

Regards
Princy.

answered on 28 Apr 2010, 07:31 AM

Hello Webster Velasco,

The code specified from Princy Philip worked for me! Then it probably isn't what's causing the problem with being unable to expand the items after collapse.

Can you send a simple project example (you can paste the code directly) which will reproduce the problem?

But if we understood your problem correctly, here is nice complete example (using the JavaScript provided by Princy) that should guide you to solution:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ 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>

</div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<script type="text/javascript">

function onClicked(sender, args) {

var panelBar = $find("<%=RadPanelBar1.ClientID%>");

for (var i = 0; i < panelBar.get_items().get_count(); i++)

panelBar.get_items().getItem(i).set_expanded(false);

}

</script>

<telerik:RadPanelBar ID="RadPanelBar1" runat="server">

<Items>

<telerik:RadPanelItem runat="server" Text="One">

<Items>

<telerik:RadPanelItem runat="server" Text="i">

<Items>

<telerik:RadPanelItem runat="server" Text="a" />

<telerik:RadPanelItem runat="server" Text="b" />

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="ii" />

<telerik:RadPanelItem runat="server" Text="iii" />

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Two" />

<telerik:RadPanelItem runat="server" Text="Three">

<Items>

<telerik:RadPanelItem runat="server" Text="i" />

</Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

<telerik:RadMenu ID="RadMenu1" runat="server" OnClientItemClicked="onClicked">

<Items>

<telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">

<Items>

<telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</form>

</body>

</html>

Hope this will help you!

Regards,
Nikolay Tsenkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 28 Apr 2010, 08:18 AM

i dnt use radmenu only radpanelbar

anw here is the code

    
            <%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Main.master.vb" Inherits="GRC30.Main" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head id="Head1" runat="server"> 
        
                <title>Xyou</title> 
        
                <link href="styles/Main.css" type="text/css" rel="stylesheet" /> 
        
                <style type="text/css"> 
        
                html, body, form 
        
                { 
        
                    height: 100%; 
        
                    margin: 0px; 
        
                    padding: 0px; 
        
                    overflow: hidden; 
        
                } 
        
                .RadPanelBar_Office2007 .rpText    
        
                {    
        
                    font-family: Calibri !important;    
        
                } 
        
                .RadGrid_Office2007 .rgHoveredRow td { 
        
                    background-color: #ffca5e; 
        
                    border-color: #ff9b35;    
        
                }   
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form2" runat="server"> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
        
                        <telerik:RadFormDecorator ID="RadFormDecorator1" DecoratedControls="All" runat="server" EnableRoundedCorners="false" />         
        
                    <div id="ParentDivElement" style="height: 100%;"> 
        
                    <telerik:RadCodeBlock runat="server" ID="rtdg"> 
        
                        <script type="text/javascript"> 
        
                            function onClicked(sender, args) { 
        
                                var panelBar = $find("<%=panelMenu.ClientID%>"); 
        
                                for (var i = 0; i < panelBar.get_items().get_count(); i++) 
        
                                { 
        
                                    panelBar.get_items().getItem(i).set_expanded(false); 
        
                                }              
        
                            }   
        
                        </script> 
        
                    </telerik:RadCodeBlock> 
        
                        <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%" 
        
                            Orientation="Horizontal"  VisibleDuringInit="false"> 
        
                            <telerik:RadPane ID="paneTitle" runat="server" Width="100%" Height="95px" BackColor="#000000" Locked="true" Scrolling="None"> 
        
                                <div id="mHeader"> 
        
                                    <table width="100%" cellspacing="0" cellpadding="0"> 
        
                                        <tr> 
        
                                            <td> 
        
                                                <img id="Img1" src="img/LogoGextra.png" alt="logo" runat="server" style="border:none; height:95px" /> 
        
                                            </td> 
        
                                            <td align="right"> 
        
                                                <div class="skin-chooser"> 
        
                                                    <label for="ctl00_RadMenu1_i3_SkinChooser_Input" class="skinLabel">Skin:</label> 
        
                                                        <telerik:RadSkinManager ID="RadSkinManager" runat="server" ShowChooser="true" Skin="Office2007" 
        
                                                            PersistenceKey="Skin" PersistenceMode="Session"> 
        
                                                        </telerik:RadSkinManager> 
        
                                                </div> 
        
                                            </td> 
        
                                        </tr> 
        
                                    </table> 
        
                                </div> 
        
                            </telerik:RadPane> 
        
                            <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="None" /> 
        
                            <telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500"> 
        
                                <telerik:RadSplitter ID="NestedSplitter" runat="server" LiveResize="true"> 
        
                                    <telerik:RadPane ID="LeftPane" runat="server" Width="230" MinWidth="150" MaxWidth="400"> 
        
                                        <table align="center" cellpadding="0" width="100%" cellspacing="0"> 
        
                                            <tr> 
        
                                                <td> 
        
                                                    <telerik:RadPanelBar ID="panelMenu" runat="server" PersistStateInCookie="true" ExpandMode="SingleExpandedItem" Height="100%" Width="225px"> 
        
                                                        <Items> 
        
                                                            <telerik:RadPanelItem runat="server" Text="Mio Profilo"> 
        
                                                                <Items> 
        
                                                                    <telerik:RadPanelItem runat="server" Text="Anagrafica" NavigateUrl="grcEditAnagrafica.aspx" />                                                                                  
        
                                                                    <telerik:RadPanelItem runat="server" Text="Documenti" NavigateUrl=""/> 
        
                                                                    <telerik:RadPanelItem runat="server" Text="Cambia password" Navigateurl="grcCambiaPswd.aspx"/> 
        
                                                                </Items> 
        
                                                            </telerik:RadPanelItem>                                                                                
        
                                                            <telerik:RadPanelItem runat="server" Text="I servizi XYOU" NavigateUrl="grcElencoProdotti.aspx"> 
        
                                                            </telerik:RadPanelItem> 
        
                                                            <telerik:RadPanelItem runat="server" Text="Acquisto servizi XYOU" NavigateUrl="grcElencoOrdini.aspx"> 
        
                                                            </telerik:RadPanelItem> 
        
                                                            <telerik:RadPanelItem runat="server" Text="Situazione Acquisti"> 
        
                                                                <Items> 
        
                                                                    <telerik:RadPanelItem runat="server" Text="Elenco Acquisti" NavigateUrl="grcVisualizzaOrdini.aspx" /> 
        
                                                                    <telerik:RadPanelItem runat="server" Text="Estratto Conto" NavigateUrl="grcElencoEstrattoConto.aspx" /> 
        
                                                                    <telerik:RadPanelItem runat="server" Text="Segnalazione Scadenza dei Crediti" NavigateUrl="grcElencoEsaurimentoCrediti.aspx" />                                            
        
                                                                </Items> 
        
                                                            </telerik:RadPanelItem>                                    
        
                                                            <telerik:RadPanelItem runat="server" Text="Caricamento pratica" > 
        
                                                                <Items> 
        
                                                                    <telerik:RadPanelItem runat="server" Text="Azienda" NavigateUrl="grcInsertPratica.aspx" /> 
        
                                                                    <telerik:RadPanelItem runat="server" Text="Privato" NavigateUrl="grcInsertPraticaUnica.aspx" />                                            
        
                                                                </Items> 
        
                                                            </telerik:RadPanelItem>                                
        
                                                            <telerik:RadPanelItem runat="server" Text="Richiesta storno pratica" NavigateUrl="grcRichiestaStorno.aspx"> 
        
                                                            </telerik:RadPanelItem>    
        
                                                            <telerik:RadPanelItem runat="server" Text="Visualizza la Gestione Pratiche"> 
        
                                                                <Items> 
        
                                                                    <telerik:RadPanelItem runat="server" Text="Dettaglio Affidamenti" NavigateUrl="grcDettaglioAffidamento.aspx" /> 
        
                                                                    <telerik:RadPanelItem runat="server" Text="Cerca Pratica" NavigateUrl="grcCercaPratica.aspx" /> 
        
                                                                </Items> 
        
                                                            </telerik:RadPanelItem> 
        
                                                            <telerik:RadPanelItem runat="server" Text="Comunicazioni con Gextra"> 
        
                                                                <Items> 
        
                                                                    <telerik:RadPanelItem runat="server" Text="Richiesta a Gextra"> 
        
                                                                        <Items> 
        
                                                                            <telerik:RadPanelItem runat="server" Text="In Arrivo" NavigateUrl="grcMessaggistica.aspx?T=ROP" /> 
        
                                                                            <telerik:RadPanelItem runat="server" Text="In Uscita" NavigateUrl="grcMessaggistica.aspx?T=DES" /> 
        
                                                                        </Items>                                                        
        
                                                                    </telerik:RadPanelItem> 
        
                                                                    <telerik:RadPanelItem runat="server" Text="Richiesta da Gextra"> 
        
                                                                        <Items> 
        
                                                                            <telerik:RadPanelItem runat="server" Text="In Arrivo" NavigateUrl="grcMessaggistica.aspx?T=DOP" /> 
        
                                                                            <telerik:RadPanelItem runat="server" Text="In Uscita" NavigateUrl="grcMessaggistica.aspx?T=RES" /> 
        
                                                                        </Items>                                                        
        
                                                                    </telerik:RadPanelItem> 
        
                                                                </Items>                                    
        
                                                            </telerik:RadPanelItem>                                                                                                                    
        
                                                            <telerik:RadPanelItem runat="server" Text="Log out" NavigateUrl="~/Login.aspx?action=logout"/>                                                            
        
                                                        </Items>                        
        
                                                    </telerik:RadPanelBar> 
        
                                                </td> 
        
                                            </tr> 
        
                                        </table>                             
        
                                    </telerik:RadPane> 
        
                                    <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" /> 
        
                                    <telerik:RadPane ID="Radpane10" runat="server" Scrolling="none"> 
        
                                        <telerik:RadSplitter ID="Radsplitter6" runat="server" Orientation="Horizontal"> 
        
                                                        <telerik:RadPane ID="ContentPane" runat="server"> 
        
                                                              <asp:ContentPlaceHolder ID="cphMain" runat="server"></asp:ContentPlaceHolder> 
        
                                                        </telerik:RadPane> 
        
                                                        <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="None" CssClass="subTitleCell" /> 
        
                                                        <telerik:RadPane ID="FOoter" runat="server" Height="50px" BackColor="#FFFFFF" Locked="true" Scrolling="None"> 
        
                                                            <table align="center" width="70%"> 
        
                                                                <tr> 
        
                                                                    <td align="center"><img src="img/call.png" alt="call" /></td> 
        
                                                                    <td align="center"> 
        
                                                                        <!-- 
        
                                                                        Skype 'My status' button 
        
                                                                        http://www.skype.com/go/skypebuttons 
        
                                                                        --> 
        
                                                                        <script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script> 
        
                                                                        <a href="skype:whebz?call"><img src="http://mystatus.skype.com/balloon/whebz16" style="border: none;" width="150" height="50" alt="My status" /></a>                             
        
                                                                    </td> 
        
                                                                    <td align="center"><asp:Button runat="server" ID="Button1" Text="Manuale utilizzo servizi" /></td> 
        
                                                                </tr> 
        
                                                            </table> 
        
                                                        </telerik:RadPane> 
        
                                        </telerik:RadSplitter> 
        
                                    </telerik:RadPane>                                                       
        
                                </telerik:RadSplitter> 
        
                            </telerik:RadPane>        
        
                        </telerik:RadSplitter> 
        
                    </div> 
        
                </form> 
        
            </body> 
        
            </html>

answered on 03 May 2010, 08:47 AM

Hello Webster Velasco,

I think I finally got your problem. You want to navigate to different url's from the panelbar and becouse it's constantly on the screen, you want it to collapse after navigation.
The JavaScript wasn't working for you, because it was collapsing all elements, no matter if they were "leaves" (terminal elements with no children - the ones that should redirect) or "branches" (non-terminal elements that should be only expanded) of the tree.

I changed the function in order to check if the elements are terminal or not and to collapse the panelbar only if they redirect. Here is the code of the function:

function onClicked(sender, args) {

var clickedPanelItem = args.get_item();

var numberOfChildItems = (clickedPanelItem.get_items()).get_count();

if (numberOfChildItems === 0) {

var panelBar = $find("<%=panelMenu.ClientID%>");

for (var i = 0; i < panelBar.get_items().get_count(); i++)

panelBar.get_items().getItem(i).set_expanded(false);

}

I hope this will finally help you! (:

Cheers,
Nikolay Tsenkov
the Telerik team

answered on 03 May 2010, 11:23 AM

Hello Webster Velasco,

Well, you should probably read a bit more about JavaScript and event handlers:
http://www.javascriptkit.com/javatutors/event1.shtml

Also you can check-out our demos(http://demos.telerik.com/aspnet-ajax/panelbar/examples/clientside/clientsideevents/defaultcs.aspx) and help(http://www.telerik.com/help/aspnet-ajax/panel_clientsideevents.html) about RadPanelBar's Client-side programming techniques (in this case client-side events and event handlers).

You should assign the function as an event handler for the OnClientItemClicked event of the RadPanelBar ("panelMenu"). Use the following snippet:

<telerik:RadPanelBar ID="panelMenu" runat="server" PersistStateInCookie="true"

ExpandMode="SingleExpandedItem" Height="100%" Width="225px"

OnClientItemClicked="onClicked">

//...

//here goes the markup that's inside the panelbar

</telerik:RadPanelBar>

Greetings,
Nikolay Tsenkov
the Telerik team

answered on 04 May 2010, 02:49 PM

example.zip

Hello Webster Velasco,

In order to achieve that kind of behavior, you have to find the element which NavigateUrl property's value is equal to the currently navigated page and to set the element's property Selected to true.

About the expand/collapse behavior of the PanelBar, if you are not collapsing all of the elements after navigation, than it should be "almost" fine. "almost", because on the next page the PanelBar would be exactly as it was on last one - with all previously expanded panels (if MultipleExpandedItems is set to true). But probably that's not what you would like to achieve. I guess you want, the irrelevant for the navigation panels to be collapsed and only the one that contains the item, which fired the navigation, to be expanded. If that is the case you need to create a JavaScript function which collapses all irrelevant panels.

I have created a simple example which covers all of your requirements.

The code-behind that takes care of the selection is as follows:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If IsPostBack Then

Dim currentItem = panelMenu.FindItemByUrl(Request.Url.PathAndQuery)

If currentItem IsNot Nothing Then

currentItem.Selected = True

End If

End Sub

The JavaScript which is responsible for the custom-selective collapse is:

function onClicked(sender, args) {

var clickedPanelItem = args.get_item();

var numberOfChildItems = (clickedPanelItem.get_items()).get_count();

if (numberOfChildItems === 0) {

var panelBar = $find("<%=panelMenu.ClientID%>");

var rootItems = panelBar.get_items();

var countRootItems = rootItems.get_count();

var rootElementText = getRootElementText(clickedPanelItem);

for (var i = 0; i < countRootItems; i++) {

var currentRootItem = rootItems.getItem(i);

var currentRootElementText = currentRootItem.get_text();

if (currentRootElementText != rootElementText) {

panelBar.get_items().getItem(i).set_expanded(false);

}

function getRootElementText(currentElement) {

var elementLevel = currentElement.get_level();

var parent = currentElement;

for (var i = elementLevel; i > 0; i--) {

parent = parent.get_parent();

}

return parent.get_text();

}

I am attaching an example project with the mark-up provided by you! I guess this is what you are looking for.

And I hope it will help you!

Greetings,
Nikolay Tsenkov
the Telerik team

P.S. I have changed some of the NavigationUrl's (since I don't have your entire project) for test purposes. So you have to change them back to the values they had before.

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 07 May 2010, 09:33 AM

another question?

how cn i add something(e.g. image etc) to see that a panel item is a child item of the item above it?

    
                                                            <telerik:RadPanelItem runat="server" Text="Comunicazioni con Gextra"> 
        
                                                                <Items> 
        
                                                                    <telerik:RadPanelItem runat="server" Text="Richiesta a Gextra"> 
        
                                                                        <Items> 
        
                                                                            <telerik:RadPanelItem runat="server" Text="In Arrivo" NavigateUrl="grcMessaggistica.aspx?T=ROP" /> 
        
                                                                            <telerik:RadPanelItem runat="server" Text="In Uscita" NavigateUrl="grcMessaggistica.aspx?T=DES" /> 
        
                                                                        </Items>                                                         
        
                                                                    </telerik:RadPanelItem> 
        
                                                                    <telerik:RadPanelItem runat="server" Text="Richiesta da Gextra"> 
        
                                                                        <Items> 
        
                                                                            <telerik:RadPanelItem runat="server" Text="In Arrivo" NavigateUrl="grcMessaggistica.aspx?T=DOP" /> 
        
                                                                            <telerik:RadPanelItem runat="server" Text="In Uscita" NavigateUrl="grcMessaggistica.aspx?T=RES" /> 
        
                                                                        </Items>                                                         
        
                                                                    </telerik:RadPanelItem> 
        
                                                                </Items>                                     
        
                                                            </telerik:RadPanelItem>

answered on 10 May 2010, 12:43 PM

Hello Webster Velasco,

Well, luckily for you, there is a great help article about that, which I would recommend to you:
http://www.telerik.com/help/aspnet-ajax/panel_appearanceitemimages.html

Briefly, the ImageUrl and ExpandedImageUrl properties probably will be of your interest.
Also if you want you can customize the look of your pannel even better through the SelectedImageUrl, HoveredImageUrl and DisabledImageUrl, so I would say it's definitely worth reading it. And these are only the Image-properties, but you can do a lot more with choosing different skin, animations (expand / collapse), add css custom styling or even create your own skins (http://www.telerik.com/help/aspnet-ajax/panel_appearancecreatingacustomskin.html).

Hope this will help you!

Best wishes,
Nikolay Tsenkov
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

panel bar

16 Answers, 1 is accepted