Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select

Grid / Column Animations

Example Configuration
RadGrid Column Animations
Reorder

Revert drag

Drag a column header and drop it here to group by that column
Product IDProduct NameCategory IDQuantity Per UnitUnit PriceUnits In StockDiscontinued
12345678
Page size:
select
 77 items in 8 pages
1Chai110 boxes x 20 bags18.0039
2Chang124 - 12 oz bottles19.0017
3Aniseed Syrup212 - 550 ml bottles10.0013
4Chef Anton's Cajun Seasoning248 - 6 oz jars22.0053
5Chef Anton's Gumbo Mix236 boxes21.350
6Grandma's Boysenberry Spread212 - 8 oz jars25.00120
7Uncle Bob's Organic Dried Pears712 - 1 lb pkgs.30.0015
8Northwoods Cranberry Sauce212 - 12 oz jars40.006
9Mishi Kobe Niku618 - 500 g pkgs.97.0029
10Ikura812 - 200 ml jars31.0031

  • RadGrid now supports column reorder / revert drag animations when dragging column headers, providing a rich, interactive, user experience. Properties in the RadGrid.ClientSettings.Animation object control RadGrid's animation type and duration.

    Column reorder animation

    When column reorder is enabled in RadGrid, header cells move dynamically aside as the user drags the reordered column.

    RadGrid column reorder animation

    To enable column reorder animation, set:

    1. RadGrid.ClientSettings.AllowColumnsReorder = true;
    2. RadGrid.ClientSettings.ColumnsReorderMethod = GridClientSettings.GridColumnsReorderMethod.Reorder;
      (NOTE: Column reorder animation works with this reorder method only.)
    3. RadGrid.ClientSettings.Animation.AllowColumnReorderAnimation = true;

    Currently, column reorder animation is not supported with Scrolling and Static Headers.

    Column revert drag animation

    When column drag-to-group is enabled in RadGrid, headers cells move back to their original position when dropped on a target that does not invoke an action.

    RadGrid column revert animation

    To enable column revert animation, set:

    1. RadGrid.GroupingEnabled = true;
    2. RadGrid.ShowGroupPanel = true;
    3. RadGrid.ClientSettings.AllowDragToGroup = true;
    4. RadGrid.ClientSettings.Animation.AllowColumnRevertAnimation = true;

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="VB" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    <script type="text/C#" runat="server">
        Protected Sub ApplySettingsButton_Click(ByVal sender As Object, ByVal e As EventArgs)
            RadGrid1.ClientSettings.AllowColumnsReorder = EnableColumnReorderCheckBox.Checked
            RadGrid1.ClientSettings.Animation.AllowColumnReorderAnimation = EnableReorderAnimCheckBox.Checked
            If ReorderAnimDuration.Value.HasValue AndAlso ReorderAnimDuration.Value.Value > 0 AndAlso ReorderAnimDuration.Value.Value <= 2000D Then
                RadGrid1.ClientSettings.Animation.ColumnReorderAnimationDuration = Convert.ToInt32(ReorderAnimDuration.Value)
            End If

            RadGrid1.ClientSettings.AllowDragToGroup = EnableDragToGroupCheckBox.Checked
            RadGrid1.ShowGroupPanel = EnableDragToGroupCheckBox.Checked
            RadGrid1.ClientSettings.Animation.AllowColumnRevertAnimation = EnableRevertDragAnimCheckBox.Checked
            If RevertAnimDuration.Value.HasValue AndAlso RevertAnimDuration.Value.Value > 0 AndAlso RevertAnimDuration.Value.Value <= 2000D Then
                RadGrid1.ClientSettings.Animation.ColumnRevertAnimationDuration = Convert.ToInt32(RevertAnimDuration.Value)
            End If
        End Sub
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <telerik:HeadTag runat="server" ID="Headtag1"></telerik:HeadTag>
        <style type="text/css">
            .configset
            {
                float:left;
                margin-right:20px;
                line-height:20px;
                width:220px;
            }
            .configset:last-child
            {
                margin-right:0;
            }
        </style>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <div>
            <telerik:Header runat="server" ID="Header1" NavigationLanguage="VB"></telerik:Header>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <!-- content start -->

            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
                DefaultLoadingPanelID="RadAjaxLoadingPanel1">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="ApplySettingsButton">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>

            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

            
                <telerik:ConfiguratorPanel ID="ConfiguratorPanel" runat="server" Expanded="true">

                    <div class="title">
                        RadGrid Column Animations
                    </div>
                    <div class="RadGrid">
                        <fieldset class="configset">
                            <legend>Reorder</legend>
                            <asp:CheckBox ID="EnableColumnReorderCheckBox" Checked="true" Text="Enable column reorder" runat="server" />
                            <br />
                            <asp:CheckBox ID="EnableReorderAnimCheckBox" Checked="true" Text="Enable column reorder animation" runat="server" />
                            <br />
                            <telerik:RadNumericTextBox ID="ReorderAnimDuration" runat="server" Label="Duration (max 2000ms)" Value="600" Width="100%">
                                <NumberFormat AllowRounding="false" DecimalDigits="0" />
                            </telerik:RadNumericTextBox>
                        </fieldset>

                        <fieldset class="configset">
                            <legend>Revert drag</legend>
                            <asp:CheckBox ID="EnableDragToGroupCheckBox" Checked="true" runat="server" Text="Enable drag-to-group" />
                            <br />
                            <asp:CheckBox ID="EnableRevertDragAnimCheckBox" Checked="true" Text="Enable revert column drag animation" runat="server" />
                            <br />
                            <telerik:RadNumericTextBox ID="RevertAnimDuration" runat="server" Label="Duration (max 2000ms)" Value="600" Width="100%">
                                <NumberFormat AllowRounding="false" DecimalDigits="0" />
                            </telerik:RadNumericTextBox>
                        </fieldset>

                        <div style="clear:both;">
    <asp:Button ID="ApplySettingsButton" CssClass="button" runat="server" Text="Apply changes"
    OnClick="ApplySettingsButton_Click" style="margin-top:10px;" />
                        </div>
                    </div>
                </telerik:ConfiguratorPanel>

            <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1"
                GroupingEnabled="true" ShowGroupPanel="true" AllowPaging="true">
                <ClientSettings AllowDragToGroup="true" AllowColumnsReorder="true" ReorderColumnsOnClient="true"
                    ColumnsReorderMethod="Reorder">
                    <Animation AllowColumnReorderAnimation="true" AllowColumnRevertAnimation="true"
                        ColumnReorderAnimationDuration="600" ColumnRevertAnimationDuration="600"/>
                </ClientSettings>
            </telerik:RadGrid>

            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                SelectCommand="SELECT ProductID, ProductName, CategoryID, QuantityPerUnit, UnitPrice, UnitsInStock, Discontinued FROM Products">
            </asp:SqlDataSource>

            <!-- content end -->
            <telerik:Footer runat="server" ID="Footer1"></telerik:Footer>
        </div>
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451