PanelBar Animations

4 posts, 0 answers
  1. ewart
    ewart avatar
    221 posts
    Member since:
    Jan 2007

    Posted 12 May 2008 Link to this post

    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



  2.
  3. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 13 May 2008 Link to this post

    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
  5. ewart
    ewart avatar
    221 posts
    Member since:
    Jan 2007

    Posted 13 May 2008 Link to this post

    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
  7. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 14 May 2008 Link to this post

    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
  8.
Back to Top