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

panel bar

16 Answers 130 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Webster Velasco
Top achievements
Rank 2
Webster Velasco asked on 26 Apr 2010, 10:05 AM
hi

how cn i close the expanded panel bar when i click a menu w/ childmenu inside?

16 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
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.
0
Webster Velasco
Top achievements
Rank 2
answered on 26 Apr 2010, 12:07 PM
its not really working bc

my panelbar w/ item childs it isnt expanding anymore
0
Nikolay Tsenkov
Telerik team
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">
<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.
0
Webster Velasco
Top achievements
Rank 2
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> 
                                                            <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> 

0
Webster Velasco
Top achievements
Rank 2
answered on 30 Apr 2010, 11:31 AM
any news bout this problem? i need plz
0
Nikolay Tsenkov
Telerik team
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

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.
0
Webster Velasco
Top achievements
Rank 2
answered on 03 May 2010, 09:25 AM
how can i call this function?

i tried to call it this way but it gave me errors
OnClientItemClicked="onClicked();" 

0
Nikolay Tsenkov
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

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.
0
Webster Velasco
Top achievements
Rank 2
answered on 03 May 2010, 12:17 PM
its now working but i want another thing if its possible..

i want to remain the clicked item selected
0
Nikolay Tsenkov
Telerik team
answered on 03 May 2010, 03:34 PM
Hello Webster Velasco,

Here you can find an example of that kind of behavior you need.

It's an implementation for RadMenu, but you can easily implement it for RadPanelBar. My advice is to separate the panelbar in a user control and than to add it to a masterpage.

Hope this will finally help you! (:

Greetings,
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.
0
Webster Velasco
Top achievements
Rank 2
answered on 04 May 2010, 10:59 AM
to be honest i dont understand that demo..

could u provide a simple project for my problem?
0
Nikolay Tsenkov
Telerik team
answered on 04 May 2010, 02:49 PM
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 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.
0
Webster Velasco
Top achievements
Rank 2
answered on 05 May 2010, 04:04 PM
ok the code behind is working it keeps the selected item but
the js doesnt.. bc panel which has items inside isnt collapsing
0
Webster Velasco
Top achievements
Rank 2
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>  

0
Nikolay Tsenkov
Telerik team
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

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.
0
Webster Velasco
Top achievements
Rank 2
answered on 10 May 2010, 01:46 PM
ok thanks for that..

anw my first question is still not answered.. i will appreciate further helps
Tags
PanelBar
Asked by
Webster Velasco
Top achievements
Rank 2
Answers by
Princy
Top achievements
Rank 2
Webster Velasco
Top achievements
Rank 2
Nikolay Tsenkov
Telerik team
Share this question
or