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

Columns Resize/Reorder and Show/Hide

EmployeeIDFirstNameLastNameBirthDateAddressPostalCodeReportsTo
 
2AndrewFuller2/19/1952 12:00:00 AM908 W. Capital Way98401 
  1NancyDavolio12/8/1948 12:00:00 AM507 - 20th Ave. E. Apt. 2A981222
  3JanetLeverling8/30/1963 12:00:00 AM722 Moss Bay Blvd.980332
  4MargaretPeacock9/19/1937 12:00:00 AM4110 Old Redmond Rd.980522
 5StevenBuchanan3/4/1955 12:00:00 AM14 Garrett HillSW1 8JR2
  8LauraCallahan1/9/1958 12:00:00 AM4726 - 11th Ave. N.E.981052


  • Demo Configurator
  • Resizing
  • Columns
Column Resizing
Resize Mode
Set Min / Max column width
Swap / Reorder
  • Choose two columns to be reordered or swappedFirstName
    .ReportsTo
Hide / Show

This demo shows the resizing capabilities of Telerik RadTreeList. The product supports 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 treelist or in the code-behind:

ClientSettings -> Resizing -> AllowColumnResize = true
ClientSettings -> Resizing -> EnableRealTimeResize = true

User can set an initial values for the resized column using MinWidth/MaxWidth properties of RadTreeList column.

RadTreeList supports three modes of column resizing:
- NoScroll (this is the default value) - No changes in the width of the TreeList. The resized column changes width - while the other columns are squeezed at the two ends.
- AllowScroll-Works only when scrolling is turned on. Does not change the width of the treelist, only the width of its inner table and adds scroll. The resized column changes width while the other columns stay the same.
- ResizeTreeList-The whole control changes width together with the resized column. Other columns stay the same width.

The demo also demonstrates show/hide columns with a specified index using show() and hide() client-side methods of RadTreeList.

Moreover, the demo presents the reordering functionality of Telerik RadTreeList. Two kinds of reordering are available of RadTreeList: "Swap" and "Reorder". This is controlled by ClientSettings.Reordering.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").

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" Inherits="Telerik.TreeListExamplesCSharp.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>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
    <script type="text/javascript" src="scripts.js"></script>
    <script type="text/javascript">
        var RadTreeList1, radioButtonListItem, txbColumnIndex, ddlFirstColumnList, ddlLastColumnList;
        function pageLoad() {
            RadTreeList1 = $find("<%= RadTreeList1.ClientID %>");
            txbColumnIndex = $find("<%= txbColumnIndex.ClientID %>");
            ddlFirstColumnList = $find("<%= ddlFirstColumnList.ClientID %>");
            ddlLastColumnList = $find("<%= ddlLastColumnList.ClientID %>");
            radioButtonListItem = $get("<%=RadioButtonList2.ClientID%>" + "_1");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadTreeList1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-containers">
        <div class="demo-container no-bg">
            <table style="width: 750px; table-layout: fixed">
                <tr>
                    <td>
                        <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList1" runat="server" DataSourceID="SqlDataSource1" Width="750px" AutoGenerateColumns="false" DataKeyNames="EmployeeID" ParentDataKeyNames="ReportsTo">
                            <Columns>
                                <telerik:TreeListBoundColumn UniqueName="EmployeeID" DataField="EmployeeID" HeaderText="EmployeeID">
                                </telerik:TreeListBoundColumn>
                                <telerik:TreeListBoundColumn UniqueName="FirstName" DataField="FirstName" HeaderText="FirstName">
                                </telerik:TreeListBoundColumn>
                                <telerik:TreeListBoundColumn UniqueName="LastName" DataField="LastName" HeaderText="LastName">
                                </telerik:TreeListBoundColumn>
                                <telerik:TreeListBoundColumn UniqueName="BirthDate" DataField="BirthDate" HeaderText="BirthDate">
                                </telerik:TreeListBoundColumn>
                                <telerik:TreeListBoundColumn UniqueName="Address" DataField="Address" HeaderText="Address">
                                </telerik:TreeListBoundColumn>
                                <telerik:TreeListBoundColumn UniqueName="PostalCode" DataField="PostalCode" HeaderText="PostalCode">
                                </telerik:TreeListBoundColumn>
                                <telerik:TreeListBoundColumn UniqueName="ReportsTo" DataField="ReportsTo" HeaderText="ReportsTo">
                                </telerik:TreeListBoundColumn>
                            </Columns>
                            <ClientSettings>
                                <Resizing AllowColumnResize="true" EnableRealTimeResize="true"></Resizing>
                                <Reordering AllowColumnsReorder="true" ReorderColumnsOnClient="true"></Reordering>
                                <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="200px"></Scrolling>
                            </ClientSettings>
                        </telerik:RadTreeList>
                    </td>
                </tr>
            </table>
            <br />
            <qsf:Button runat="server" ID="Button1" Text="Postback"></qsf:Button>
        </div>
    </div>
    <br />
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" ProviderName="System.Data.SqlClient" SelectCommand="SELECT EmployeeID, FirstName, LastName, BirthDate, Address, PostalCode, ReportsTo FROM Employees" runat="server"></asp:SqlDataSource>

    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Demo Configurator">
        <Views>
            <qsf:View Title="Resizing">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" Size="Medium" runat="server" Title="Column Resizing">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBox1" AutoPostBack="True" Checked="true" OnCheckedChanged="CheckedChanged" runat="server" Text="Enable real-time resizing"></asp:CheckBox>
                            </span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBox2" AutoPostBack="true" runat="server" Checked="true" OnCheckedChanged="CheckedChanged" Text="Allow scroll"></asp:CheckBox>
                            </span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBox3" AutoPostBack="true" runat="server" Checked="true" OnCheckedChanged="CheckedChanged" Text="Allow scroll with static headers"></asp:CheckBox>
                            </span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" Size="Medium" runat="server" Title="Resize Mode">
                    <ul class="fb-group">
                        <li>
                            <qsf:RadioButtonList ID="RadioButtonList1" AutoPostBack="True" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" runat="server">
                                <asp:ListItem Text="NoScroll" Value="0" Selected="True"></asp:ListItem>
                                <asp:ListItem Text="AllowScroll" Value="1"></asp:ListItem>
                                <asp:ListItem Text="ResizeTreeList" Value="2"></asp:ListItem>
                            </qsf:RadioButtonList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
            <qsf:View Title="Columns">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" Size="Medium" runat="server" Title="Set Min / Max column width">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList Label="Column" runat="server" ID="RadComboBox2" AutoPostBack="true" Width="200px" EmptyMessage="Select column">
                                <Items>
                                    <telerik:DropDownListItem Text="EmployeeID" Value="EmployeeID" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="FirstName" Value="FirstName"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="LastName" Value="LastName"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="BirthDate" Value="BirthDate"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="Address" Value="Address"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="PostalCode" Value="PostalCode"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="ReportsTo" Value="ReportsTo"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <div style="float: left;">
                                <qsf:NumericTextBox Label="Min Width" AutoPostBack="true" OnTextChanged="txbWidth_TextChanged" Width="90px" Value="35" NumberFormat-DecimalDigits="0" MinValue="35" MaxValue="300"
                                    runat="server" ID="txbMinWidth">
                                </qsf:NumericTextBox>

                            </div>
                            <div style="float: right; margin-right: 100px">
                                <qsf:NumericTextBox Label="Max Width" AutoPostBack="true" OnTextChanged="txbWidth_TextChanged" Width="90px" Value="300" runat="server" NumberFormat-DecimalDigits="0"
                                    MinValue="35" MaxValue="300" ID="txbMaxWidth">
                                </qsf:NumericTextBox>

                            </div>
                            <div style="clear: both"></div>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>

                <qsf:ConfiguratorColumn ID="ConfiguratorColumn5" Size="Medium" runat="server" Title="Swap / Reorder">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList Label="Choose two columns to be reordered or swapped" Size="Medium" runat="server" DataTextField="Name" DataValueField="Value" ID="ddlFirstColumnList"></qsf:DropDownList>
                            <qsf:DropDownList Label="." Size="Medium" runat="server" DataTextField="Name" DataValueField="Value" ID="ddlLastColumnList"></qsf:DropDownList>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBox4" AutoPostBack="True" Checked="true" OnCheckedChanged="CheckedChanged" runat="server" Text="On client-side"></asp:CheckBox>
                            </span>
                        </li>
                        <li>
                            <qsf:RadioButtonList CssClass="rblClass" ID="RadioButtonList2" Orientation="Horizontal" RepeatDirection="Horizontal" runat="server" RepeatLayout="Table">
                                <asp:ListItem Value="Swap" Selected="True">Swap</asp:ListItem>
                                <asp:ListItem Value="Reorder">Reorder</asp:ListItem>
                            </qsf:RadioButtonList>
                        </li>
                        <li>
                            <qsf:Button runat="server" AutoPostBack="false" Text="Swap or Reorder Columns" ID="btnSwapReorder" OnClientClicked="btnSwapReorderClicked" ></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" Size="Medium" runat="server" Title="Hide / Show">
                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox Label="Column" NumberFormat-DecimalDigits="0" Value="0" MinValue="0" MaxValue="6" runat="server" ID="txbColumnIndex"></qsf:NumericTextBox>
                        </li>
                        <li>
                            <qsf:Button runat="server" AutoPostBack="false" Text="Hide" ID="btnHide" OnClientClicked="btnShowHideClicked"></qsf:Button>
                            <qsf:Button runat="server" AutoPostBack="false" Text="Show" ID="btnShow" OnClientClicked="btnShowHideClicked"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <div style="clear: both"></div>

            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance