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/Row Resize/Reorder

Example Configuration
Working with RadGrid Resizing/Swapping/Reordering features

Choose RadGrid options:




new 		Columns reorder method:

Click PostBack to see the state of the grid is preserved.


Choose two columns to be reordered or swap.


 Customer IDCompany NameContact NameContact TitleAddressPostal Code
123
Page size:
select
 25 items in 3 pages
 ALFKIAlfreds FutterkisteMaria AndersSales RepresentativeObere Str. 5712209
 ANATRAna Trujillo Emparedados y heladosAna TrujilloOwnerAvda. de la Constitución 222205021
 ANTONAntonio Moreno TaqueríaAntonio MorenoOwnerMataderos 231205023
 AROUTAround the HornThomas HardySales Representative120 Hanover Sq.WA1 1DP
 BERGSBerglunds snabbköpChristina BerglundOrder AdministratorBerguvsvägen 8S-958 22
 BLAUSBlauer See DelikatessenHanna MoosSales RepresentativeForsterstr. 5768306
 BLONPBlondesddsl père et filsFrédérique CiteauxMarketing Manager24, place Kléber67000
 BOLIDBólido Comidas preparadasMartín SommerOwnerC/ Araquil, 6728023
 BONAPBon app'Laurence LebihanOwner12, rue des Bouchers13008
 BOTTMBottom-Dollar MarketsElizabeth LincolnAccounting Manager23 Tsawassen Blvd.T2F 8M4

  • This demo shows the resizing capabilities of Telerik RadGrid. The product fully supports Row- and Column-resizing with an option for real-time resizing on the client. You merely need to set the respective properties from the control's property grid or in the code-behind:
    ClientSettings -> Resizing -> AllowRowResize = true
    ClientSettings -> Resizing -> AllowColumnResize = true
    ClientSettings -> Resizing -> EnableRealTimeResize = true

    Developers can further control whether the whole grid will be resized on column resizing, or whether the rest of the columns will be adjusted to preserve the overall width of the grid:
    ClientSettings -> Resizing -> ResizeGridOnColumnResize = true/false

    You can also set whether the cell content will be clipped on column resizing:
    ClientSettings -> Resizing -> ClipCellContentOnResize = true/false

    Note that since v4.6 of RadGrid, its table layout default mode is "Auto", but ClipCellContentOnResize feature works on IE only in case of "Fixed" layout.

    Since the Q3 2010 release of Telerik RadControls, grid columns now support the "resize to fit" functionality. Double-clicking the resize handle or choosing 'Best Fit' from the header context menu will have the column automatically resized to fit the widest cell content without wrapping. To enable best fit resizing:
    ClientSettings -> Resizing -> AllowResizeToFit = true/false

    Moreover, the demo presents the reordering functionality of Telerik RadGrid. Two kinds of reordering are available since v4.5.2 of RadGrid: "Swap" and "Reorder". This is controlled by ClientSettings.ColumnsReorderMethod enumeration property. To swap the position of two columns simply drag and drop the column header of the first column over the header of second column. In case of reorder, just drag and drop a respective column header between other two column headers.

    Column reordering can be performed server-side (AllowColumnsReorder="true") or client-side (AllowColumnsReorder="true" and ReorderColumnsOnClient="true").

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" Inherits="Telerik.GridExamplesCSharp.Client.Resizing.DefaultCS"
        CodeFile="DefaultCS.aspx.cs" %>

    <%@ 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">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <telerik:HeadTag runat="server" ID="Headtag2"></telerik:HeadTag>
        <style type="text/css">
            .RadGrid
            {
                position: relative;
            }
            .qsfWrap > .qsfGrid
            {
                width: auto;
                min-width: 100%;
            }
            .qsfWrap * > .qsfInnerArea
            {
                width: auto;
                min-width: 748px;
            }
        </style>
        <telerik:RadCodeBlock runat="server">
            <script type="text/javascript">
            <!--
                function ReorderOrSwapFirstAndLastColumn() {
                    var ddlFirstColumnList = $get("ddlFirstColumnList");
                    var ddlLastColumnList = $get("ddlLastColumnList");

                    var tableView = $find("<%=RadGrid1.MasterTableView.ClientID %>");
                    var firstColumnName = tableView.getColumnByUniqueName(ddlFirstColumnList.options[ddlFirstColumnList.selectedIndex].value).get_uniqueName();
                    var lastColumnName = tableView.getColumnByUniqueName(ddlLastColumnList.options[ddlLastColumnList.selectedIndex].value).get_uniqueName();

                    if (document.getElementById("RadioButtonList1_1").checked) {
                        tableView.reorderColumns(lastColumnName, firstColumnName);
                    }
                    else {
                        tableView.swapColumns(lastColumnName, firstColumnName);
                    }
                }

                function onGridCreated() {
                    LoadColumnsLists();
                }

                function LoadColumnsLists() {
                    var ddlFirstColumnList = $get("ddlFirstColumnList");
                    var ddlLastColumnList = $get("ddlLastColumnList");
                    ddlFirstColumnList.options.length = 0;
                    ddlLastColumnList.options.length = 0;

                    var tableView = $find("<%=RadGrid1.MasterTableView.ClientID %>");
                    if (ddlFirstColumnList && tableView && ddlLastColumnList) {
                        for (var i = 1; i < tableView.get_columns().length; i++) {
                            if (tableView.get_columns()[i].get_uniqueName() != "") {
                                ddlFirstColumnList.options[ddlFirstColumnList.options.length] = new Option(tableView.get_columns()[i].get_uniqueName(), tableView.get_columns()[i].get_uniqueName());
                                ddlLastColumnList.options[ddlLastColumnList.options.length] = new Option(tableView.get_columns()[i].get_uniqueName(), tableView.get_columns()[i].get_uniqueName());
                            }
                        }
                        ddlLastColumnList.selectedIndex = ddlLastColumnList.options.length - 1;
                        ddlFirstColumnList.selectedIndex = 0;
                    }
                }
             -->
            </script>
        </telerik:RadCodeBlock>
        <style type="text/css">
            .GridHeader_Vista, .GridRow_Vista td, .GridAltRow_Vista td
            {
                overflow: hidden;
            }
        </style>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <telerik:Header runat="server" ID="Header1" NavigationLanguage="CS"></telerik:Header>
        <telerik:RadScriptManager ID="RadScriptManager" runat="server">
        </telerik:RadScriptManager>
        <!-- content start -->
        <telerik:ConfiguratorPanel ID="ConfiguratorPanel" runat="server" Expanded="true">
            <div class="title">
                Working with RadGrid Resizing/Swapping/Reordering features</div>
            <div>
                <h4 style="font-size: 12px">
                    Choose RadGrid options:</h4>
                <table style="height: 170px" title="Options">
                    <tr>
                        <td>
    <asp:CheckBox ID="CheckBox1" AutoPostBack="True" OnCheckedChanged="CheckedChanged"
    runat="server" Text="Allow column resizing" />
                            <br />
    <asp:CheckBox ID="CheckBox2" AutoPostBack="True" OnCheckedChanged="CheckedChanged"
    runat="server" Text="Allow row resizing" />
                        </td>
                        <td>
    <asp:CheckBox ID="CheckBox6" AutoPostBack="True" runat="server" Text="Allow column reordering"
    OnCheckedChanged="CheckedChanged" />
                            <br />
    <asp:CheckBox ID="CheckBox7" AutoPostBack="True" runat="server" Text="Reorder columns on the client-side"
    OnCheckedChanged="CheckedChanged" />
                        </td>
                    </tr>
                    <tr>
                        <td>
    <asp:CheckBox ID="CheckBox3" AutoPostBack="True" OnCheckedChanged="CheckedChanged"
    runat="server" Text="Enable real-time resizing" />
                            <br />
    <asp:CheckBox ID="CheckBox4" AutoPostBack="True" OnCheckedChanged="CheckedChanged"
    runat="server" Text="Resize grid on column resizing" />
                            <br />
    <asp:CheckBox ID="CheckBox5" AutoPostBack="True" OnCheckedChanged="CheckedChanged"
    runat="server" Text="Clip cell content on resizing" />
                            <br />
    <asp:CheckBox ID="CheckBox8" AutoPostBack="True" OnCheckedChanged="CheckedChanged"
    runat="server" Text="No wrap for cell content" />
                            <br />
    <asp:CheckBox ID="CheckBox9" AutoPostBack="True" OnCheckedChanged="CheckedChanged"
    runat="server" Text="Allow resize to fit" />
                            <img alt="new" src="~/Common/Img/new.gif" runat="server" style="background-color: #002E3D;
                                padding: 2px 3px" />
                        </td>
                        <td>
                            <asp:Label ID="Label1" runat="server" Text="Columns reorder method:"></asp:Label><br />
    <asp:RadioButtonList ID="RadioButtonList1" AutoPostBack="True" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged"
    RepeatLayout="Flow">
                                <asp:ListItem Selected="True" Value="Swap">Swap</asp:ListItem>
                                <asp:ListItem Value="Reorder">Reorder (Insert)</asp:ListItem>
                            </asp:RadioButtonList>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <br />
                            Click PostBack to see the state of the grid is preserved.<br />
                            <asp:Button Text="PostBack" runat="server" ID="Button1" CssClass="button" Style="margin: 7px 0 0">
                            </asp:Button>
                        </td>
                        <td valign="top">
                        </td>
                    </tr>
                </table>
            </div>
            <br />
            <select id="ddlFirstColumnList">
                <option value=""></option>
            </select>
            <select id="ddlLastColumnList">
                <option value=""></option>
            </select>
    <asp:Button ID="Button2" CssClass="qsfButtonBigger" Text="Reorder or swap columns"
    OnClientClick="ReorderOrSwapFirstAndLastColumn(); return false;" runat="server" /><br />
            Choose two columns to be reordered or swap.
        </telerik:ConfiguratorPanel>
        <br />
        <br />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="CheckBox1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="CheckBox2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="CheckBox3">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="CheckBox4">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="CheckBox5">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="CheckBox6">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="CheckBox7">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="CheckBox8">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="CheckBox9">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadioButtonList1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadioButtonList1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
        <table style="width: 750px">
            <tr>
                <td>
                    <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" AllowPaging="True"
                        GridLines="None" PageSize="10">
                        <MasterTableView TableLayout="Fixed" />
                        <ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true">
                            <Resizing AllowRowResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="True"
                                AllowColumnResize="True"></Resizing>
                            <ClientEvents OnGridCreated="onGridCreated" />
                        </ClientSettings>
                        <HeaderStyle Width="100px" />
                        <PagerStyle Mode="NextPrevAndNumeric" />
                    </telerik:RadGrid>
                </td>
            </tr>
        </table>
        <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP 25 CustomerID, CompanyName, ContactName, ContactTitle, Address, PostalCode FROM Customers"
            runat="server"></asp:SqlDataSource>
        <!-- content end -->
        <telerik:Footer runat="server" ID="Footer1"></telerik:Footer>
        </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