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

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.

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
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

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

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.

Hi Shinu,
Can you supply your complete code, as it does not seem to work for me?
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.

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
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>
<
telerik:RadPanelBar
ID
=
"RadPanelBar1"
runat
=
"server"
ExpandMode
=
"MultipleExpandedItems"
OnClientItemClicking
=
"ExpandAllChildren"
>
Regards,
Boyan Dimitrov
Telerik