RadPanelBar with Full Height and Multiple Expanded Items at Levels above 0

10 posts, 0 answers
  1. Michel
    Michel avatar
    9 posts
    Member since:
    Jun 2012

    Posted 25 Nov 2013 Link to this post

    Hello,


    I would like to have a multi-level RadPanelBar with the following behavior:

    a) Use 100% of the height (and thereforre display empty space between the last child item and the next sibling item).

    b) Always have exactly one item expanded in level 0.

    c) Always have all the direct and indirect child nodes expanded below the level-0 item that is expanded.



    It seems that there are contradicting settings that would be required. If I use ExpandMode="FullExpandedItem", then I can achieve requirements a) and b), but not c). If I use ExpandMode="MultipleExpandedItems", then I can achieve requirements b) (with some client--side coding) and c), but nott a).



    Your assistance would be appreciated.



    Thanks,



    Michel

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 26 Nov 2013 Link to this post

    Hi Michel,

    Please have a look into the following code snippet to achieve your scenario.

    ASPX:
    <telerik:RadPanelBar ID="RadPanelBar1" runat="server"  CssClass="Demo" ExpandMode="FullExpandedItem"
        OnClientItemClicking="ExpandAllChildren">
        <Items>
            <telerik:RadPanelItem Text="Item 1" runat="server">
                <Items>
                    <telerik:RadPanelItem Text="Item 1.1" runat="server">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Item 1.2" runat="server">
                        <Items>
                            <telerik:RadPanelItem Text="Item 1.2.1" runat="server">
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem Text="Item 2" runat="server">
                <Items>
                    <telerik:RadPanelItem Text="Item 2.1" runat="server">
                        <Items>
                            <telerik:RadPanelItem Text="Item 2.1.1" runat="server">
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Item 2.2" runat="server">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem Text="Item 3" runat="server">
                <Items>
                    <telerik:RadPanelItem Text="Item 3.1" runat="server">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Item 3.2" runat="server">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelBar>

    CSS:
    <style type="text/css">
        .Demo
        {
            height: 100% !important;
        }
    </style>

    JavaScript:
    <script type="text/javascript">
        function ExpandAllChildren(sender, args) {
            enumerateChildItems(args.get_item());
        }
     
        function enumerateChildItems(item) {
            for (var i = 0; i < item.get_items().get_count(); i++) {
                item.get_items().getItem(i).expand()
                enumerateChildItems(item.get_items().getItem(i));
            }
        }
    </script>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michel
    Michel avatar
    9 posts
    Member since:
    Jun 2012

    Posted 26 Nov 2013 Link to this post

    Hi Shinu,



    Thanks for your reply. At first I was surprised because it seemed to work and I though that I had tried something quite similar where javascript is used  to iterate through all children and expand them.



    However if you add more than one child that itself has children, it seems that you code no longer works.



    In the code below, I added node 1.1.1 .



    ASPX:

    <telerik:RadPanelBar ID="RadPanelBar1" runat="server" CssClass="Demo"
            ExpandMode="FullExpandedItem" OnClientItemClicking="ExpandAllChildren">
            <Items>
                <telerik:RadPanelItem Text="Item 1" runat="server">
                    <Items>
                        <telerik:RadPanelItem Text="Item 1.1" runat="server">
                            <Items>
                                <telerik:RadPanelItem Text="Item 1.1.1" runat="server">
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem Text="Item 1.2" runat="server">
                            <Items>
                                <telerik:RadPanelItem Text="Item 1.2.1" runat="server">
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Item 2" runat="server">
                    <Items>
                        <telerik:RadPanelItem Text="Item 2.1" runat="server">
                            <Items>
                                <telerik:RadPanelItem Text="Item 2.1.1" runat="server">
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem Text="Item 2.2" runat="server">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Item 3" runat="server">
                    <Items>
                        <telerik:RadPanelItem Text="Item 3.1" runat="server">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem Text="Item 3.2" runat="server">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>

    CSS:

    <style type="text/css">  
            html, body, form 
            
                height: 100%;
            }
     
            .Demo
            {
                height: 100%!important;
            }
        </style>

    JavaScript:

    <script type="text/javascript">
                function ExpandAllChildren(sender, args) {
                    EnumerateChildItems(args.get_item());
                }
                 
                function EnumerateChildItems(item) {
                    for(var i = 0; i < item.get_items().get_count(); i++) {
                        item.get_items().getItem(i).expand()
                        EnumerateChildItems(item.get_items().getItem(i));
                    }
                }
            </script>

    Can you le me know if there is an alternative solution?



    Michel









  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 29 Nov 2013 Link to this post

    Hello Michel,

    As far as I understood you want to iterate through all child items recursively and expand them. In the code snippet you may find the LoopItems function in order to achieve this functionality:
    //JavaScript
    function ExpandAllChildren(sender, args) {
             
            LoopItems(args.get_item());
             
        }
     
         
        function LoopItems(item)
        {  
            var childItems = item.get_items();
            if (childItems.get_count() > 0 ) {
                for (var i = 0; i < childItems.get_count() ; i++) {
                    if (childItems.getItem(i).get_items().get_count() > 0) {
                        childItems.getItem(i).expand();
                        LoopItems(childItems.getItem(i));
                    }
                }
            }    
        }


    Regards,
    Boyan Dimitrov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Michel
    Michel avatar
    9 posts
    Member since:
    Jun 2012

    Posted 29 Nov 2013 Link to this post

    Basically, I want the root level to behave as FullExpandedItem, where a single root item is expanded at the time and the full height is used (by adding space as necessary after the last level 1 child item), and I want all direct and indirect child items (levels 1+) to always be expanded.


    It seems that your provided code does not work property when ExpandMode="FullExpandedItem" is set. If you try your script with the sample code, you will see that it does not work.



    I imagine that we either need to set ExpandMode="FullExpandedItem", but override its behavior for non-root levels; or we need to set

    ExpandMode="MultipleExpandedItems" and recode the FullExpandedItem feature for the root level only.



    Your assistance is appreciated.



    (BTW, I will be out next week so I will not be able to comment quickly if anyone replies over the next few days.)



    Michel


  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Dec 2013 Link to this post

    Hi Michel,

    The Height property will not work with the ExpandMode 'MultipleExpandedItems'. As a work around please try the following code snippet which works fine at my end.

    JavaScript:
    <script src="../JS/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function ExpandAllChildren(sender, args) {
            var panelbar = $find("<%=RadPanelBar1.ClientID %>");
            var item = panelbar.findItemByText(args.get_item().get_text());
            var s = $('.rpSlide').height() + 70;
            item._element.style.height = s + "px";
            enumerateChildItems(args.get_item());
     
        }
        function enumerateChildItems(item) {
            for (var i = 0; i < item.get_items().get_count(); i++) {
                item.get_items().getItem(i).expand();
                enumerateChildItems(item.get_items().getItem(i));
            }
        }
    </script>

    Thanks,
    Shinu.
  8. Michel
    Michel avatar
    9 posts
    Member since:
    Jun 2012

    Posted 12 Dec 2013 Link to this post

    Hi Shinu,


    Can you supply your complete code, as it does not seem to work for me?



    Michel

  9. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 15 Dec 2013 Link to this post

    Hi Michel,

    Please have a look into the complete code snippet which works fine at my end.

    ASPX:
    <telerik:RadPanelBar ID="RadPanelBar1" runat="server" ExpandMode="MultipleExpandedItems"
        OnClientItemClicking="ExpandAllChildren">
        <Items>
            <telerik:RadPanelItem Text="Item 1" runat="server">
                <Items>
                    <telerik:RadPanelItem Text="Item 1.1" runat="server">
                        <Items>
                            <telerik:RadPanelItem Text="Item 1.1.1" runat="server">
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Item 1.2" runat="server">
                        <Items>
                            <telerik:RadPanelItem Text="Item 1.2.1" runat="server">
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem Text="Item 2" runat="server">
                <Items>
                    <telerik:RadPanelItem Text="Item 2.1" runat="server">
                        <Items>
                            <telerik:RadPanelItem Text="Item 2.1.1" runat="server">
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Item 2.2" runat="server">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelBar>

    JavaScript:
    <script src="../JS/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function ExpandAllChildren(sender, args) {
            var panelbar = $find("<%=RadPanelBar1.ClientID %>");
            var item = panelbar.findItemByText(args.get_item().get_text());
            var s = $('.rpSlide').height() + 70;
            item._element.style.height = s + "px";
            enumerateChildItems(args.get_item());
     
        }
        function enumerateChildItems(item) {
            for (var i = 0; i < item.get_items().get_count(); i++) {
                item.get_items().getItem(i).expand();
                enumerateChildItems(item.get_items().getItem(i));
            }
        }
    </script>

    Thanks,
    Shinu.
  10. Michel
    Michel avatar
    9 posts
    Member since:
    Jun 2012

    Posted 16 Dec 2013 Link to this post

    The proposed code does not seem to work correctly.

    For example, after starting the page, if you click three times on the "Item 1", "Item 1.2" and its child disapears. See panelbar1.png.

    Also, the request was to have only one item of the root level opened at the same time ("Always have exactly one item expanded in level 0."). However, if you click on "Item 1" and then click on "Item 2", both items in the root level remain open. See panelbar2.png.

    Michel

  11. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 17 Dec 2013 Link to this post

    Hello Michel,

    Please find below a solution that allows only one expanded root item.
    <script type="text/javascript">
        function ExpandAllChildren(sender, args) {
            var panelbar = $find("<%=RadPanelBar1.ClientID %>");
           //var item = panelbar.findItemByText(args.get_item().get_text());
           //var s = $('.rpSlide').height() + 70;
           //item._element.style.height = s + "px";
           var expandedItem = sender.get_expandedItem();
           if (expandedItem != null) {
               if (expandedItem.get_level() == args.get_item().get_level() && expandedItem != args.get_item()) {
                   expandedItem.collapse();
               }
           }
     
           enumerateChildItems(args.get_item());
     
       }
       function enumerateChildItems(item) {
           for (var i = 0; i < item.get_items().get_count() ; i++) {
               item.get_items().getItem(i).expand();
               enumerateChildItems(item.get_items().getItem(i));
           }
       }
    </script>
    //markup code
    <telerik:RadPanelBar ID="RadPanelBar1" runat="server" ExpandMode="MultipleExpandedItems"
        OnClientItemClicking="ExpandAllChildren">


    Regards,
    Boyan Dimitrov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017