This is a migrated thread and some comments may be shown as answers.
PanelBar Animations
3 Answers 49 Views
This is a migrated thread and some comments may be shown as answers.
ewart
Top achievements
Rank 1
ewart asked on 12 May 2008, 08:38 PM
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



3 Answers, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 13 May 2008, 02:23 PM
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
0
ewart
Top achievements
Rank 1
answered on 13 May 2008, 09:20 PM
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
0
Paul
Telerik team
answered on 14 May 2008, 06:24 AM
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
Asked by
ewart
Top achievements
Rank 1
Answers by
Paul
Telerik team
ewart
Top achievements
Rank 1
Share this question
or