panel bar

17 posts, 0 answers
  1. Webster Velasco
    Webster Velasco avatar
    114 posts
    Member since:
    Jun 2012

    Posted 26 Apr 2010 Link to this post

    hi

    how cn i close the expanded panel bar when i click a menu w/ childmenu inside?
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 26 Apr 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Webster Velasco
    Webster Velasco avatar
    114 posts
    Member since:
    Jun 2012

    Posted 26 Apr 2010 Link to this post

    its not really working bc

    my panelbar w/ item childs it isnt expanding anymore
  5. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 28 Apr 2010 Link to this post

    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.
  6. Webster Velasco
    Webster Velasco avatar
    114 posts
    Member since:
    Jun 2012

    Posted 28 Apr 2010 Link to this post

    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> 

  7. Webster Velasco
    Webster Velasco avatar
    114 posts
    Member since:
    Jun 2012

    Posted 30 Apr 2010 Link to this post

    any news bout this problem? i need plz
  8. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 03 May 2010 Link to this post

    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.
  9. Webster Velasco
    Webster Velasco avatar
    114 posts
    Member since:
    Jun 2012

    Posted 03 May 2010 Link to this post

    how can i call this function?

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

  10. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 03 May 2010 Link to this post

    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.
  11. Webster Velasco
    Webster Velasco avatar
    114 posts
    Member since:
    Jun 2012

    Posted 03 May 2010 Link to this post

    its now working but i want another thing if its possible..

    i want to remain the clicked item selected
  12. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 03 May 2010 Link to this post

    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.
  13. Webster Velasco
    Webster Velasco avatar
    114 posts
    Member since:
    Jun 2012

    Posted 04 May 2010 Link to this post

    to be honest i dont understand that demo..

    could u provide a simple project for my problem?
  14. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 04 May 2010 Link to this post

    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.
  15. Webster Velasco
    Webster Velasco avatar
    114 posts
    Member since:
    Jun 2012

    Posted 05 May 2010 Link to this post

    ok the code behind is working it keeps the selected item but
    the js doesnt.. bc panel which has items inside isnt collapsing
  16. Webster Velasco
    Webster Velasco avatar
    114 posts
    Member since:
    Jun 2012

    Posted 07 May 2010 Link to this post

    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>  

  17. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 10 May 2010 Link to this post

    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.
  18. Webster Velasco
    Webster Velasco avatar
    114 posts
    Member since:
    Jun 2012

    Posted 10 May 2010 Link to this post

    ok thanks for that..

    anw my first question is still not answered.. i will appreciate further helps
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017