RadDock for ASP.NET

Animation Effects Send comments on this topic.
Customizing Appearance > Animation Effects

Glossary Item Box

Animated effects enrich the UI with smooth objects movement, resize, docking and undocking.

Telerik RadDock allows users to turn on and off the effects and also to tune the their duration and update rate.

 

Consider the following example:

The update rate indicates the frequence of object state update (i.e position when moving, width/height when resizing, etc.). Setting the greater value allow more smooth movement but increase the CPU load and the smaller values make the move more discrete but lowers the load. Values in range 1-100 only have sensible effect.

The duration specifies the time to complete the animated action (move, resize, etc.).

 

<form runat="server" method="post" ID="Form1">
            <rad:RadDockingManager id="RadDockingManager1" runat="server"></rad:RadDockingManager>
            <Telerik:Header XhtmlCompliant="False" runat="server" ID="Header1" NavigationLanguage="CS"></Telerik:Header>
            <table class="LayoutTable" cellSpacing="1" cellPadding="1" border="0">
                <tr>
                    <tr height="8">
                        <td colspan=3>
                            <rad:RadDockingZone id="RadDockingZone3" runat="server" Width="100%" Height="100%" Type="Top">
                            </rad:RadDockingZone>
                        </td>
                    </tr>
                    <td width="8">
                        <rad:RadDockingZone id=RadDockingZone1 runat="server" Width="100%" Height="100%">

                            <rad:RadDockableObject id=RadDockableObject1 runat="server" Text="Object 1" Height="125px" Behavior="Resizable" BorderWidth="3px">
                                <ContentTemplate>
                                    <strong>Object 1.</strong>
                                </ContentTemplate>
                            </rad:RadDockableObject>

                            <rad:RadDockableObject id=RadDockableObject2 runat="server" Text="Object 2" Height="125px" Behavior="Resizable" BorderWidth="3px">
                                <ContentTemplate>
                                    <strong>Object 2.</strong>
                                </ContentTemplate>
                            </rad:RadDockableObject>
                        </rad:RadDockingZone>
                    </td>
                    <td> </td>
                    <td width="8">
                        <rad:RadDockingZone id=RadDockingZone2 runat="server" Width="100%" Height="100%">
                            <rad:RadDockableObject id="RadDockableObject3" runat="server" Text="Object 3" Height="125px" Behavior="Resizable" BorderWidth="3px">
                                <ContentTemplate>
                                    <strong>Object 3.</strong>
                                </ContentTemplate>
                            </rad:RadDockableObject>
                            <rad:RadDockableObject id="RadDockableObject4" runat="server" Text="Object 4" Height="125px" Behavior="Resizable" BorderWidth="3px">
                                <ContentTemplate>
                                    <strong>Object 4.</strong>
                                </ContentTemplate>
                            </rad:RadDockableObject>
                        </rad:RadDockingZone>
                    </td>
                </tr>
                <tr height="8">
                    <td colspan=3>
                        <rad:RadDockingZone id="Raddockingzone4" runat="server" Width="100%" Height="100%" Type="Top">
                        </rad:RadDockingZone>
                    </td>
                </tr>
            </table>

            <table class="panel">
                <tr>
                    <td><asp:CheckBox ID="chkEffects" Runat="server" AutoPostBack=True Text="Use Effects"></asp:CheckBox></td>
                    <td>Update rate:</td>
                    <td><asp:TextBox ID="txtUpdateRate" Runat="server"></asp:TextBox> [updates/sec] (values: 1-100)</td>
                </tr>
                <tr>
                    <td> </td>
                    <td>Duration:</td>
                    <td><asp:TextBox ID="txtDuration" Runat="server"></asp:TextBox> [sec]</td>
                </tr>
                <tr>
                    <td> </td>
                    <td> </td>
                    <td><asp:Button ID="btnApply" Runat=server Text="Apply"></asp:Button> <asp:Button ID="btnReset" Runat=server Text="Reset"></asp:Button></td>
                </tr>
            </table>

            <Telerik:Footer runat="server" ID="Footer1"></Telerik:Footer>
        


 

 

[C# code]

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace Telerik.DockExamplesCSharp.Dock.Examples.Effects
{
    /// <summary>
    /// Summary description for DefaultCS.
    /// </summary>
    public class DefaultCS : System.Web.UI.Page
    {
        protected Telerik.WebControls.RadDockingManager RadDockingManager1;
        protected Telerik.WebControls.RadDockingZone RadDockingZone3;
        protected Telerik.WebControls.RadDockableObject RadDockableObject1;
        protected Telerik.WebControls.RadDockableObject RadDockableObject2;
        protected Telerik.WebControls.RadDockableObject RadDockableObject3;
        protected Telerik.WebControls.RadDockableObject RadDockableObject4;
        protected Telerik.WebControls.RadDockingZone RadDockingZone1;
        protected Telerik.WebControls.RadDockingZone RadDockingZone2;
        protected Telerik.WebControls.RadDockingZone Raddockingzone4;
        protected System.Web.UI.WebControls.CheckBox chkEffects;
        protected System.Web.UI.WebControls.TextBox txtUpdateRate;
        protected System.Web.UI.WebControls.TextBox txtDuration;
        protected System.Web.UI.WebControls.Button btnApply;
        protected System.Web.UI.WebControls.Button btnReset;
    
        private void Page_Load(object sender, System.EventArgs e)
        {
            if (!IsPostBack)
            {
                chkEffects.Checked = RadDockingManager1.EffectsEnabled;

                txtUpdateRate.Text = RadDockingManager1.EffectsUpdateRate.ToString();
                txtDuration.Text = RadDockingManager1.EffectsDuration.ToString();
            }
        }

        #region Web Form Designer generated code
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: This call is required by the ASP.NET Web Form Designer.
            //
            InitializeComponent();
            base.OnInit(e);
        }
        
        /// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {    
            this.Load += new System.EventHandler(this.Page_Load);
            chkEffects.CheckedChanged += new EventHandler(chkEffects_CheckedChanged);
            btnApply.Click += new EventHandler(btnApply_Click);
            btnReset.Click += new EventHandler(btnReset_Click);

        }
        #endregion

        private void chkEffects_CheckedChanged(object sender, EventArgs e)
        {
            RadDockingManager1.EffectsEnabled = chkEffects.Checked;
            
            ApplyEffectsSettings();
        }

        private void btnApply_Click(object sender, EventArgs e)
        {
            ApplyEffectsSettings();
        }

        private void btnReset_Click(object sender, EventArgs e)
        {
            RadDockingManager1.EffectsUpdateRate = 50;
            RadDockingManager1.EffectsDuration = 0.3f;

            txtUpdateRate.Text = RadDockingManager1.EffectsUpdateRate.ToString();
            txtDuration.Text = RadDockingManager1.EffectsDuration.ToString();
        }
        
        void ApplyEffectsSettings()
        {
            RadDockingManager1.EffectsUpdateRate = int.Parse(txtUpdateRate.Text);
            RadDockingManager1.EffectsDuration = float.Parse(txtDuration.Text);
        }
    }
}
[VB code]
Public Class DefaultVB11
    Inherits System.Web.UI.Page

    Protected RadDockingManager1 As Telerik.WebControls.RadDockingManager

    Protected WithEvents chkEffects As System.Web.UI.WebControls.CheckBox
    Protected WithEvents txtUpdateRate As System.Web.UI.WebControls.TextBox
    Protected WithEvents txtDuration As System.Web.UI.WebControls.TextBox
    Protected WithEvents btnApply As System.Web.UI.WebControls.Button
    Protected WithEvents btnReset As System.Web.UI.WebControls.Button

#Region " Web Form Designer Generated Code "

    'This call is required by the Web Form Designer.
    <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()

    End Sub

    'NOTE: The following placeholder declaration is required by the Web Form Designer.
    'Do not delete or move it.
    Private designerPlaceholderDeclaration As System.Object

    Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
        'CODEGEN: This method call is required by the Web Form Designer
        'Do not modify it using the code editor.
        InitializeComponent()
    End Sub

#End Region

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        If Not IsPostBack Then
            chkEffects.Checked = RadDockingManager1.EffectsEnabled
            txtUpdateRate.Text = RadDockingManager1.EffectsUpdateRate.ToString()
            txtDuration.Text = RadDockingManager1.EffectsDuration.ToString()
        End If
    End Sub

    Private Sub chkEffects_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles chkEffects.CheckedChanged
        RadDockingManager1.EffectsEnabled = chkEffects.Checked
        ApplyEffectsSettings()
    End Sub

    Private Sub btnApply_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnApply.Click
        ApplyEffectsSettings()
    End Sub

    Private Sub btnReset_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnReset.Click
        RadDockingManager1.EffectsUpdateRate = 50
        RadDockingManager1.EffectsDuration = 0.3F

        txtUpdateRate.Text = RadDockingManager1.EffectsUpdateRate.ToString()
        txtDuration.Text = RadDockingManager1.EffectsDuration.ToString()
    End Sub

    Sub ApplyEffectsSettings()
        RadDockingManager1.EffectsUpdateRate = Integer.Parse(txtUpdateRate.Text)
        RadDockingManager1.EffectsDuration = Single.Parse(txtDuration.Text)
    End Sub
End Class