New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Column/Row Resize/Reorder

Click PostBack to see the state of the grid is preserved.
 Customer IDCompany NameContact NameContact TitleAddressPostal Code
123
Page size:
 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
  • Demo Configurator
  • Resizing
  • Reorder
  • Choose two columns to be reordered or swapped

  • Columns reorder method:

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 controls, 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").
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
<%@ Page Language="VB" Inherits="Telerik.GridExamplesVBNET.ColumnsAndRows.ColumnRowResizeReorder.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
     <div class="demo-container">
        <telerik:RadButton RenderMode="Lightweight" Text="PostBack" runat="server" ID="RadButton1" style="vertical-align:middle"></telerik:RadButton>
        <span style="vertical-align:middle">Click PostBack to see the state of the grid is preserved.</span>
    </div>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <div class="demo-container no-bg">
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" AllowPaging="True"
            GridLines="None" PageSize="10">
            <ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true">
                <Resizing AllowRowResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="True"
                    AllowColumnResize="True"></Resizing>
            </ClientSettings>
            <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
        </telerik:RadGrid>
    </div>
    <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>
    <telerik:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View Title="Resizing">
                <ul class="checkbox-list">
                    <li>
                        <span class="checkbox">
                            <asp:CheckBox ID="CheckBox1" AutoPostBack="True" OnCheckedChanged="CheckedChanged"
                                runat="server" Text="Allow column resizing"></asp:CheckBox></span>
                    </li>
                    <li><span class="checkbox">
                        <asp:CheckBox ID="CheckBox2" AutoPostBack="True" OnCheckedChanged="CheckedChanged"
                            runat="server" Text="Allow row resizing"></asp:CheckBox></span>
                    </li>

                    <li><span class="checkbox">
                        <asp:CheckBox ID="CheckBox3" AutoPostBack="True" OnCheckedChanged="CheckedChanged"
                            runat="server" Text="Enable real-time resizing"></asp:CheckBox></span>
                    </li>
                    <li><span class="checkbox">
                        <asp:CheckBox ID="CheckBox4" AutoPostBack="True" OnCheckedChanged="CheckedChanged"
                            runat="server" Text="Resize grid on column resizing"></asp:CheckBox></span>
                    </li>
                    <li><span class="checkbox">
                        <asp:CheckBox ID="CheckBox5" AutoPostBack="True" OnCheckedChanged="CheckedChanged"
                            runat="server" Text="Clip cell content on resizing"></asp:CheckBox></span>
                    </li>
                    <li><span class="checkbox">
                        <asp:CheckBox ID="CheckBox7" AutoPostBack="True" OnCheckedChanged="CheckedChanged"
                            runat="server" Text="No wrap for cell content"></asp:CheckBox></span>
                    </li>
                    <li><span class="checkbox">
                        <asp:CheckBox ID="CheckBox8" AutoPostBack="True" OnCheckedChanged="CheckedChanged"
                            runat="server" Text="Allow resize to fit"></asp:CheckBox></span>
                    </li>
                </ul>
            </qsf:View>
            <qsf:View Title="Reorder">
                <ul class="fb-group">
                    <li>
                        <span class="label">Choose two columns to be reordered or swapped</span>
                        <qsf:ComboBox runat="server" Size="Wide" ID="ddlFirstColumnList">
                        </qsf:ComboBox>
                        <qsf:ComboBox runat="server" Size="Wide" ID="ddlLastColumnList">
                        </qsf:ComboBox>
                    </li>
                    <li>
                        <span class="checkbox">
                            <asp:CheckBox ID="CheckBox6" AutoPostBack="True" runat="server" Text="Reorder columns on the client-side"
                                OnCheckedChanged="CheckedChanged"></asp:CheckBox></span>
                    </li>
                    <li>
                        <qsf:RadioButtonList ID="RadioButtonList1" AutoPostBack="True" runat="server" Label="Columns reorder method:"
                            OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged"
                            Orientation="Horizontal">
                            <asp:ListItem Selected="True" Value="Swap">Swap</asp:ListItem>
                            <asp:ListItem Value="Reorder">Reorder (Insert)</asp:ListItem>
                        </qsf:RadioButtonList>
                    </li>
                    <li>
                        <qsf:Button ID="Button2" Text="Reorder or swap columns" AutoPostBack="false" OnClientClicked="demo.ReorderOrSwapFirstAndLastColumn"
                            runat="server">
                        </qsf:Button>
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </telerik:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance