select

Grid / Column/Row Resize/Reorder

Rate this demo:
Feedback
Run example in: C# VB.NET Change Skin:
Vista
  • BlackBlack
  • DefaultDefault
  • ForestForest
  • HayHay
  • Office2007Office2007
  • OutlookOutlook
  • SimpleSimple
  • SitefinitySitefinity
  • SunsetSunset
  • TelerikTelerik
  • VistaVista
  • Web20Web20
  • WebBlueWebBlue
  • Windows7Windows7
Working with RadGrid Resizing/Swapping/Reordering features

Choose RadGrid options:



Columns reorder method:

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


Choose two columns to be reordered or swap.


 CustomerIDCompanyNameContactNameContactTitleAddressPostalCode
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

Example Source Code & Description

Open in a new window

  • 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.

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

    Finally, you can see how to configure the grid to occupy the entire height/width of its container and change its dimensions on container resize from these resources:
    Settings 100% height and resize grid on container resize
    Changing scroll height at runtime
    Resize grid with scrolling when data is less than the scroll height
Compatible with ASP.NET 2.0, 3.5 AJAX enabled Accessibility Verified!Valid XHTML 1.1! Optimized for Visual Studio 2005, 2008
Copyright 2002-2010 © Telerik. All right reserved  | 
Telerik Inc., 460 Totten Pond Rd, Suite 640, Waltham, MA 02451

www.telerik.com  |  Terms of Use  |  Contact Us