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

[Michel]

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

[Shinu]

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.

[Michel]

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

[Boyan Dimitrov]

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

[Michel]

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

[Shinu]

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.

[Michel]

Hi Shinu,

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



Michel

[Shinu]

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.

[Michel]

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

[Boyan Dimitrov]

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