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

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

9 Answers 221 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Michel
Top achievements
Rank 1
Michel asked on 25 Nov 2013, 11:58 PM

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

9 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 26 Nov 2013, 06:13 AM
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.
0
Michel
Top achievements
Rank 1
answered on 26 Nov 2013, 06:22 PM

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









0
Boyan Dimitrov
Telerik team
answered on 29 Nov 2013, 04:42 PM
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.
0
Michel
Top achievements
Rank 1
answered on 29 Nov 2013, 09:00 PM

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


0
Shinu
Top achievements
Rank 2
answered on 04 Dec 2013, 10:03 AM
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.
0
Michel
Top achievements
Rank 1
answered on 12 Dec 2013, 07:27 PM

Hi Shinu,


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



Michel

0
Shinu
Top achievements
Rank 2
answered on 16 Dec 2013, 05:23 AM
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.
0
Michel
Top achievements
Rank 1
answered on 16 Dec 2013, 05:48 PM

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

0
Boyan Dimitrov
Telerik team
answered on 17 Dec 2013, 04:16 PM
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.
Tags
PanelBar
Asked by
Michel
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Michel
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or