Is it possible to get this?

[Carsten Molewijk]

My client want a panel bar like this (see attachments).
The 3rd level has a scrolling area inside that level. The scrolling area has 2 arrows (bottom and top).
All other panel items have to align at the bottom when collapsed.

Is this possible with the radpanelbar?
If it isn't i have to search another solution.

Thanx

[Yana]

Hi Carsten,

RadPanelBar doesn't support such scrolling but you can place RadMenu in a content template of RadPanelBar items and use its scrolling mechanism.

Greetings,
Yana
the Telerik team

[Carsten Molewijk]

Hi
Thanx, i was busy building the panelbar.
Instead of implementing the scrollbar in the middle, i implemented it on the right side.

I have one issue with the scrolling area.

I want the second level items always visible.
In the telerik panelbar scrolling demo you can read in the description how to do this:

• There are two ways to create a scrollable panelbar child group.
  1. Set the ChildGroupHeight property of the parent item. If the child items' height exceeds the available space, a scrollbar appears.
  2. Set the RadPanelBar's ExpandMode to FullExpandedItem, so that the child groups stretch to the full panelbar height. If the child items' height exceeds the available space, a scrollbar appears.

Both of these solutions didn't work out, see my screenshots what happens (menu.jpg & menu_collapsed.jpg).
I can't set the ChildGroupHeight because my items are dynamicaly generated, so every level has a different height.
Is there a solution for this issue?

Thanx

This is the code for my panel:

 

<

 

 

telerik:RadPanelBar ID="pnlMain" Runat="server" DataFieldID="pbID"
    DataFieldParentID="parentID" DataSourceID="dsPanel"
    DataTextField="pbName" EnableEmbeddedSkins="False"
    ExpandMode="FullExpandedItem" Width="236px" Height="404px"
    EnableTheming="False"
    DataValueField="pbLink" onitemclick="pnlMain_ItemClick">

 

 

 

    <DataBindings>
        <telerik:RadPanelItemBinding Depth="0" CssClass="CustomLevel2" 
            ExpandedImageUrlField="pbExpandedImage" ImageUrlField="pbImage" />

 

 

 

        <telerik:RadPanelItemBinding Depth="1" CssClass="CustomLevel3"
            ExpandedImageUrlField="pbExpandedImage" ImageUrlField="pbImage" />

        <telerik:RadPanelItemBinding Depth="2" CssClass="CustomLevel3"
            ExpandedImageUrlField="pbExpandedImage" ImageUrlField="pbImage" /> 
        
        <telerik:RadPanelItemBinding Depth="3" CssClass="CustomLevel3" 
            ExpandedImageUrlField="pbExpandedImage" ImageUrlField="pbImage" />
    </DataBindings>
</telerik:RadPanelBar>

 

[Yana]

Hi Carsten,

I'm not sure I understand the needed approach, could you please send us complete code demonstrating the issue? Thanks

Greetings,
Yana
the Telerik team