This sample demonstrates the Grid column rendering with a specified width. This sample also shows how to enable the resizing feature. Click and drag the right corner of each column header to resize it.
Order ID | Customer Name | Freight | Shipped Date | Ship Country |
|---|---|---|---|---|
| 10248 | Maria | $32.38 | 7/16/1996 | France |
| 10249 | Ana Trujillo | $11.61 | 7/10/1996 | Germany |
| 10250 | Antonio Moreno | $65.83 | 7/12/1996 | Brazil |
| 10251 | Thomas Hardy | $41.34 | 7/15/1996 | France |
| 10252 | Christina Berglund | $51.30 | 7/11/1996 | Belgium |
| 10253 | Hanna Moos | $58.17 | 7/16/1996 | Brazil |
| 10254 | Frédérique Citeaux | $22.98 | 7/23/1996 | Switzerland |
| 10255 | Martín Sommer | $148.33 | 7/15/1996 | Switzerland |
| 10256 | Laurence Lebihan | $13.97 | 7/17/1996 | Brazil |
| 10257 | Elizabeth Lincoln | $81.91 | 7/22/1996 | Venezuela |
| 10258 | Victoria Ashworth | $140.51 | 7/23/1996 | Austria |
| 10259 | Patricio Simpson | $3.25 | 7/25/1996 | Mexico |
| 10260 | Francisco Chang | $55.09 | 7/29/1996 | Germany |
| 10261 | Yang Wang | $3.05 | 7/30/1996 | Brazil |
| 10262 | Pedro Afonso | $48.29 | 7/25/1996 | USA |
| 10263 | Elizabeth Brown | $146.06 | 7/31/1996 | Austria |
| 10264 | Sven Ottlieb | $3.67 | 8/23/1996 | Sweden |
| 10265 | Ann Devon | $55.28 | 8/12/1996 | France |
| 10266 | Roland Mendel | $25.73 | 7/31/1996 | Finland |
| 10267 | Aria Cruz | $208.58 | 8/6/1996 | Germany |
| 10268 | Diego Roel | $66.29 | 8/2/1996 | Venezuela |
| 10269 | Martine Rancé | $4.56 | 8/9/1996 | USA |
| 10270 | Maria Larsson | $136.54 | 8/2/1996 | Finland |
| 10271 | Peter Franken | $4.54 | 8/30/1996 | USA |
| 10272 | Carine Schmitt | $98.03 | 8/6/1996 | USA |
| 10273 | Paolo Accorti | $76.07 | 8/12/1996 | Germany |
| 10274 | Lino Rodriguez | $6.01 | 8/16/1996 | France |
| 10275 | Eduardo Saavedra | $26.93 | 8/9/1996 | Italy |
| 10276 | José Pedro Freyre | $13.84 | 8/14/1996 | Mexico |
| 10277 | André Fonseca | $125.77 | 8/13/1996 | Germany |
| 10278 | Howard Snyder | $92.69 | 8/16/1996 | Sweden |
| 10279 | Manuel Pereira | $25.83 | 8/16/1996 | Germany |
| 10280 | Mario Pontes | $8.98 | 9/12/1996 | Sweden |
| 10281 | Carlos Hernández | $2.94 | 8/21/1996 | Spain |
| 10282 | Yoshi Latimer | $12.69 | 8/21/1996 | Spain |
| 10283 | Patricia McKenna | $84.81 | 8/23/1996 | Venezuela |
| 10284 | Helen Bennett | $76.56 | 8/27/1996 | Germany |
| 10285 | Philip Cramer | $76.83 | 8/26/1996 | Germany |
| 10286 | Daniel Tonini | $229.24 | 8/30/1996 | Germany |
| 10287 | Annette Roulet | $12.76 | 8/28/1996 | Brazil |
| 10288 | Yoshi Tannamuri | $7.45 | 9/3/1996 | Italy |
| 10289 | John Steel | $22.77 | 8/28/1996 | UK |
| 10290 | Renate Messner | $79.70 | 9/3/1996 | Brazil |
| 10291 | Jaime Yorres | $6.40 | 9/4/1996 | Brazil |
| 10292 | Carlos González | $1.35 | 9/2/1996 | Brazil |
| 10293 | Felipe Izquierdo | $21.18 | 9/11/1996 | Mexico |
| 10294 | Fran Wilson | $147.26 | 9/5/1996 | USA |
| 10295 | Giovanni Rovelli | $1.15 | 9/10/1996 | France |
| 10296 | Catherine Dewey | $0.12 | 9/11/1996 | Venezuela |
| 10297 | Jean Fresnière | $5.74 | 9/10/1996 | France |
| 10298 | Alexander Feuer | $168.22 | 9/11/1996 | Ireland |
| 10299 | Simon Crowther | $29.76 | 9/13/1996 | Brazil |
| 10300 | Yvonne Moncada | $17.68 | 9/18/1996 | Italy |
| 10301 | Rene Phillips | $45.08 | 9/17/1996 | Germany |
| 10302 | Pirkko Koskitalo | $6.27 | 10/9/1996 | Belgium |
| 10303 | Paula Parente | $107.83 | 9/18/1996 | Spain |
| 10304 | Karl Jablonski | $63.79 | 9/17/1996 | Mexico |
| 10305 | Matti Karttunen | $257.62 | 10/9/1996 | USA |
| 10306 | Zbyszek Piestrzeniewicz | $7.56 | 9/23/1996 | Spain |
| 10307 | Zbyszek Piestrzeniewicz | $0.56 | 9/25/1996 | USA |
By default, if the total width of the columns is less than the width of the Grid, columns will automatically fill to the grid's width. The Grid's AutoFit feature prevents Grid columns from filling more than their specified width by enabling the autoFit as true. The Grid columns can be resized by clicking and dragging at the right edge of column's header. To enable column, resize behavior, set the allowResizing property to true. You can also prevent the resize of a particular column by setting columns->allowResizing to false in columns definition. And, by double clicking at the right edge of column header, the respective column width will get auto adjusted to its fit using the autoFitColumns method. In this demo, the allowResizing feature is enabled by setting the allowResizing property to true and Order ID column can be resized between the range of minWidth (100px) and maxWidth (200px). Also, column resizing is disabled for the Shipped Date column. Injecting Module: Grid features are segregated into individual feature-wise modules. To use resize feature, inject the Resize module using the Grid.Inject(Resize) section.