Grid

Controls

All Controls

Grid

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

Grid - Column/Row Resize/Reorder

Working with RadGrid Resizing/Swapping/Reordering










 Customer IDCompany NameContact NameContact TitleAddressPostal Code
Data pager
Data pager
123
Page size:
PageSizeComboBox
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 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").
C# VB
Show code in new window Demo isolation steps
<%@ Page Language="c#" Inherits="Telerik.GridExamplesCSharp.ColumnsAndRows.ColumnRowResizeReorder.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!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>
    <title>Resizing, Reordering Colums and Rows in ASP.NET AJAX Grid</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <telerik:RadCodeBlock runat="server">
        <script type="text/javascript">
        //<![CDATA[
            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.ClientID %>" + "_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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel" runat="server" Expanded="true" Title="Working with RadGrid Resizing/Swapping/Reordering">
        <div>
            <table style="height: 170px" title="Options" class="optionsTable">
                <tr>
                    <td>
                        <asp:CheckBox ID="CheckBox1" AutoPostBack="True" OnCheckedChanged="CheckedChanged"
                            runat="server" Text="Allow column resizing"></asp:CheckBox>
                        <br />
                        <asp:CheckBox ID="CheckBox2" AutoPostBack="True" OnCheckedChanged="CheckedChanged"
                            runat="server" Text="Allow row resizing"></asp:CheckBox>
                    </td>
                    <td>
                        <asp:CheckBox ID="CheckBox6" AutoPostBack="True" runat="server" Text="Allow column reordering"
                            OnCheckedChanged="CheckedChanged"></asp:CheckBox>
                        <br />
                        <asp:CheckBox ID="CheckBox7" AutoPostBack="True" runat="server" Text="Reorder columns on the client-side"
                            OnCheckedChanged="CheckedChanged"></asp:CheckBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="CheckBox3" AutoPostBack="True" OnCheckedChanged="CheckedChanged"
                            runat="server" Text="Enable real-time resizing"></asp:CheckBox>
                        <br />
                        <asp:CheckBox ID="CheckBox4" AutoPostBack="True" OnCheckedChanged="CheckedChanged"
                            runat="server" Text="Resize grid on column resizing"></asp:CheckBox>
                        <br />
                        <asp:CheckBox ID="CheckBox5" AutoPostBack="True" OnCheckedChanged="CheckedChanged"
                            runat="server" Text="Clip cell content on resizing"></asp:CheckBox>
                        <br />
                        <asp:CheckBox ID="CheckBox8" AutoPostBack="True" OnCheckedChanged="CheckedChanged"
                            runat="server" Text="No wrap for cell content"></asp:CheckBox>
                        <br />
                        <asp:CheckBox ID="CheckBox9" AutoPostBack="True" OnCheckedChanged="CheckedChanged"
                            runat="server" Text="Allow resize to fit"></asp:CheckBox>
                    </td>
                    <td>
                        <label for="RadioButtonList1">
                            <strong>Columns reorder method:</strong></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>
            </table>
        </div>
        <br />
        <select id="ddlFirstColumnList" style="width: 120px">
            <option value="" />
        </select>
        <select id="ddlLastColumnList" style="width: 120px">
            <option value="" />
        </select>
        <asp:Button ID="Button2" Text="Reorder or swap columns" OnClientClick="ReorderOrSwapFirstAndLastColumn(); return false;"
            runat="server"></asp:Button>
        <br />
        <label for="Button2">
            Choose two columns to be reordered or swap.</label>
    </qsf:ConfiguratorPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox3">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox4">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox5">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox6">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox7">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox8">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox9">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadioButtonList1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadioButtonList1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <table style="width: 750px">
        <tr>
            <td>
                <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" AllowPaging="True"
                    GridLines="None" PageSize="10">
                    <MasterTableView TableLayout="Fixed">
                    </MasterTableView>
                    <ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true">
                        <Resizing AllowRowResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="True"
                            AllowColumnResize="True"></Resizing>
                        <ClientEvents OnGridCreated="onGridCreated"></ClientEvents>
                    </ClientSettings>
                    <HeaderStyle Width="100px"></HeaderStyle>
                    <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
                </telerik:RadGrid>
            </td>
        </tr>
    </table>
    <asp:Button Text="PostBack" runat="server" ID="Button1"></asp:Button>
    <label for="PostBack">
        Click PostBack to see the state of the grid is preserved.</label>
    <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>
    </form>
</body>
</html>