Resizing AJAX DataGrid for ASP.NET

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").

C# VB

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.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 AJAX DataGrid for ASP.NET | RadGrid demo</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>

Allow column resizing Allow row resizing	Allow column reordering Reorder columns on the client-side
Enable real-time resizing Resize grid on column resizing Clip cell content on resizing No wrap for cell content Allow resize to fit	Columns reorder method: Swap Reorder (Insert)

Controls

SharePoint Web Parts

Support Resources

Integration Examples

Grid

Rate this demo

Grid - Column/Row Resize/Reorder

try now Download a free 30-day trial with unlimited technical support.

Get Started Easily Explore our help resources to get up to speed with the RadControls faster.

See Pricing Check out the offers. Purchase an individual suite or treat yourself to one of our bundles.