PanelBar Animations

[ewart]

Hi, I really like the style of this type of panelbar and wondered if it is possible to reproduce with telerik controls:

http://www.runningmap.com

(enter a location at the top left to enable panelbar options)

It's very similar to 
ExpandMode="FullExpandedItem"
ExpandAnimation-Duration="100"
ExpandAnimation-Type="None"

However, when in FullExpandedItem mode, their panelbar doesn't resize the whole panel, just animates the movement of the bars, whereas ours redraws the whole panelbar which causes random flicker and doesn't look nearly as nice.

regards
ewart

[Paul]

Hi ewart,

In order to achieve your goal you will have to choose some animation type. You can check our Expand Animation online example and choose the best to fit your needs. In addition, here's a sample code snippet that shows the needed approach.

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" ExpandMode="FullExpandedItem" Height="400px" Skin="WebBlue">
    <CollapseAnimation Duration="200" Type="Linear" />
    <Items>
        <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1">
            <Items>
                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem runat="server" Text="Root RadPanelItem2">
            <Items>
                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 3">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 4">
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem runat="server" Text="Root RadPanelItem3">
            <Items>
                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 3">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 4">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 5">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 6">
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem runat="server" Text="Root RadPanelItem4">
            <Items>
                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
    </Items>
    <ExpandAnimation Duration="200" Type="Linear" />
</telerik:RadPanelBar>

Kind regards,
Paul
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[ewart]

Ah, in that case I think I have found another bug.  When you embed the animation tags inside the RadPanelBar, they do not function properly.  

e.g. like this:
CollapseAnimation-Duration="200" type="Linear" ExpandAnimation-Duration="200" ExpandAnimation-Type="Linear" 

but when you seperate them out, they work!
    <CollapseAnimation Duration="200" Type="Linear" /> 

you can see this on your own sample in IE6 or FF2 (haven't test IE7).

telerik points, anyone? :)

cheers
ewart

[Paul]

Hello ewart,

There are two ways in which you can set the animation:

1)

<telerik:RadPanelBar
    runat="server"
    ID="RadPanelBar1"
    Height="350px"
    ExpandMode="FullExpandedItem"
    Skin="WebBlue"
    CollapseAnimation-Duration="1000"
    CollapseAnimation-Type="Linear"
    ExpandAnimation-Duration="1000"
    ExpandAnimation-Type="Linear">
            <Items>

2)

<telerik:RadPanelBar
    runat="server"
    ID="RadPanelBar1"
    Height="350px"
    ExpandMode="FullExpandedItem"
    Skin="WebBlue">
        <CollapseAnimation Duration="1000" Type="Linear" />
        <ExpandAnimation Duration="1000" Type="Linear" />
            <Items>
...
...

Kind regards,
Paul
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center