This sample demonstrates the Grid component with the horizontal and vertical scrollbars to view the exceeded grid content.
Order ID | Customer Name | Order Date | Freight | Shipped Date | Ship Name | Ship Address | Ship City | Ship Country |
|---|---|---|---|---|---|---|---|---|
| 10248 | Maria | 7/4/1996 | $32.38 | 7/16/1996 | Vins et alcools Chevalier | 59 rue de l Abbaye | Reims | France |
| 10249 | Ana Trujillo | 7/5/1996 | $11.61 | 7/10/1996 | Toms Spezialitäten | Luisenstr. 48 | Münster | Germany |
| 10250 | Antonio Moreno | 7/8/1996 | $65.83 | 7/12/1996 | Hanari Carnes | Rua do Paço, 67 | Rio de Janeiro | Brazil |
| 10251 | Thomas Hardy | 7/8/1996 | $41.34 | 7/15/1996 | Victuailles en stock | 2, rue du Commerce | Lyon | France |
| 10252 | Christina Berglund | 7/9/1996 | $51.30 | 7/11/1996 | Suprêmes délices | Boulevard Tirou, 255 | Charleroi | Belgium |
| 10253 | Hanna Moos | 7/10/1996 | $58.17 | 7/16/1996 | Hanari Carnes | Rua do Paço, 67 | Rio de Janeiro | Brazil |
| 10254 | Frédérique Citeaux | 7/11/1996 | $22.98 | 7/23/1996 | Chop-suey Chinese | Hauptstr. 31 | Bern | Switzerland |
| 10255 | Martín Sommer | 7/12/1996 | $148.33 | 7/15/1996 | Richter Supermarkt | Starenweg 5 | Genève | Switzerland |
| 10256 | Laurence Lebihan | 7/15/1996 | $13.97 | 7/17/1996 | Wellington Importadora | Rua do Mercado, 12 | Resende | Brazil |
| 10257 | Elizabeth Lincoln | 7/16/1996 | $81.91 | 7/22/1996 | HILARION-Abastos | Carrera 22 con Ave. Carlos Soublette #8-35 | San Cristóbal | Venezuela |
| 10258 | Victoria Ashworth | 7/17/1996 | $140.51 | 7/23/1996 | Ernst Handel | Kirchgasse 6 | Graz | Austria |
| 10259 | Patricio Simpson | 7/18/1996 | $3.25 | 7/25/1996 | Centro comercial Moctezuma | Sierras de Granada 9993 | México D.F. | Mexico |
| 10260 | Francisco Chang | 7/19/1996 | $55.09 | 7/29/1996 | Ottilies Käseladen | Mehrheimerstr. 369 | Köln | Germany |
| 10261 | Yang Wang | 7/19/1996 | $3.05 | 7/30/1996 | Que Delícia | Rua da Panificadora, 12 | Rio de Janeiro | Brazil |
| 10262 | Pedro Afonso | 7/22/1996 | $48.29 | 7/25/1996 | Rattlesnake Canyon Grocery | 2817 Milton Dr. | Albuquerque | USA |
| 10263 | Elizabeth Brown | 7/23/1996 | $146.06 | 7/31/1996 | Ernst Handel | Kirchgasse 6 | Graz | Austria |
| 10264 | Sven Ottlieb | 7/24/1996 | $3.67 | 8/23/1996 | Folk och fä HB | Åkergatan 24 | Bräcke | Sweden |
| 10265 | Ann Devon | 7/25/1996 | $55.28 | 8/12/1996 | Blondel père et fils | 24, place Kléber | Strasbourg | France |
| 10266 | Roland Mendel | 7/26/1996 | $25.73 | 7/31/1996 | Wartian Herkku | Torikatu 38 | Oulu | Finland |
| 10267 | Aria Cruz | 7/29/1996 | $208.58 | 8/6/1996 | Frankenversand | Berliner Platz 43 | München | Germany |
| 10268 | Diego Roel | 7/30/1996 | $66.29 | 8/2/1996 | GROSELLA-Restaurante | 5ª Ave. Los Palos Grandes | Caracas | Venezuela |
| 10269 | Martine Rancé | 7/31/1996 | $4.56 | 8/9/1996 | White Clover Markets | 1029 - 12th Ave. S. | Seattle | USA |
| 10270 | Maria Larsson | 8/1/1996 | $136.54 | 8/2/1996 | Wartian Herkku | Torikatu 38 | Oulu | Finland |
| 10271 | Peter Franken | 8/1/1996 | $4.54 | 8/30/1996 | Split Rail Beer & Ale | P.O. Box 555 | Lander | USA |
| 10272 | Carine Schmitt | 8/2/1996 | $98.03 | 8/6/1996 | Rattlesnake Canyon Grocery | 2817 Milton Dr. | Albuquerque | USA |
| 10273 | Paolo Accorti | 8/5/1996 | $76.07 | 8/12/1996 | QUICK-Stop | Taucherstraße 10 | Cunewalde | Germany |
| 10274 | Lino Rodriguez | 8/6/1996 | $6.01 | 8/16/1996 | Vins et alcools Chevalier | 59 rue de l'Abbaye | Reims | France |
| 10275 | Eduardo Saavedra | 8/7/1996 | $26.93 | 8/9/1996 | Magazzini Alimentari Riuniti | Via Ludovico il Moro 22 | Bergamo | Italy |
| 10276 | José Pedro Freyre | 8/8/1996 | $13.84 | 8/14/1996 | Tortuga Restaurante | Avda. Azteca 123 | México D.F. | Mexico |
| 10277 | André Fonseca | 8/9/1996 | $125.77 | 8/13/1996 | Morgenstern Gesundkost | Heerstr. 22 | Leipzig | Germany |
| 10278 | Howard Snyder | 8/12/1996 | $92.69 | 8/16/1996 | Berglunds snabbköp | Berguvsvägen 8 | Luleå | Sweden |
| 10279 | Manuel Pereira | 8/13/1996 | $25.83 | 8/16/1996 | Lehmanns Marktstand | Magazinweg 7 | Frankfurt a.M. | Germany |
| 10280 | Mario Pontes | 8/14/1996 | $8.98 | 9/12/1996 | Berglunds snabbköp | Berguvsvägen 8 | Luleå | Sweden |
| 10281 | Carlos Hernández | 8/14/1996 | $2.94 | 8/21/1996 | Romero y tomillo | Gran Vía, 1 | Madrid | Spain |
| 10282 | Yoshi Latimer | 8/15/1996 | $12.69 | 8/21/1996 | Romero y tomillo | Gran Vía, 1 | Madrid | Spain |
| 10283 | Patricia McKenna | 8/16/1996 | $84.81 | 8/23/1996 | LILA-Supermercado | Carrera 52 con Ave. Bolívar #65-98 Llano Largo | Barquisimeto | Venezuela |
| 10284 | Helen Bennett | 8/19/1996 | $76.56 | 8/27/1996 | Lehmanns Marktstand | Magazinweg 7 | Frankfurt a.M. | Germany |
| 10285 | Philip Cramer | 8/20/1996 | $76.83 | 8/26/1996 | QUICK-Stop | Taucherstraße 10 | Cunewalde | Germany |
| 10286 | Daniel Tonini | 8/21/1996 | $229.24 | 8/30/1996 | QUICK-Stop | Taucherstraße 10 | Cunewalde | Germany |
| 10287 | Annette Roulet | 8/22/1996 | $12.76 | 8/28/1996 | Ricardo Adocicados | Av. Copacabana, 267 | Rio de Janeiro | Brazil |
| 10288 | Yoshi Tannamuri | 8/23/1996 | $7.45 | 9/3/1996 | Reggiani Caseifici | Strada Provinciale 124 | Reggio Emilia | Italy |
| 10289 | John Steel | 8/26/1996 | $22.77 | 8/28/1996 | B s Beverages | Fauntleroy Circus | London | UK |
| 10290 | Renate Messner | 8/27/1996 | $79.70 | 9/3/1996 | Comércio Mineiro | Av. dos Lusíadas, 23 | Sao Paulo | Brazil |
| 10291 | Jaime Yorres | 8/27/1996 | $6.40 | 9/4/1996 | Que Delícia | Rua da Panificadora, 12 | Rio de Janeiro | Brazil |
| 10292 | Carlos González | 8/28/1996 | $1.35 | 9/2/1996 | Tradiçao Hipermercados | Av. Inês de Castro, 414 | Sao Paulo | Brazil |
| 10293 | Felipe Izquierdo | 8/29/1996 | $21.18 | 9/11/1996 | Tortuga Restaurante | Avda. Azteca 123 | México D.F. | Mexico |
| 10294 | Fran Wilson | 8/30/1996 | $147.26 | 9/5/1996 | Rattlesnake Canyon Grocery | 2817 Milton Dr. | Albuquerque | USA |
| 10295 | Giovanni Rovelli | 9/2/1996 | $1.15 | 9/10/1996 | Vins et alcools Chevalier | 59 rue de l Abbaye | Reims | France |
| 10296 | Catherine Dewey | 9/3/1996 | $0.12 | 9/11/1996 | LILA-Supermercado | Carrera 52 con Ave. Bolívar #65-98 Llano Largo | Barquisimeto | Venezuela |
| 10297 | Jean Fresnière | 9/4/1996 | $5.74 | 9/10/1996 | Blondel père et fils | 24, place Kléber | Strasbourg | France |
| 10298 | Alexander Feuer | 9/5/1996 | $168.22 | 9/11/1996 | Hungry Owl All-Night Grocers | 8 Johnstown Road | Cork | Ireland |
| 10299 | Simon Crowther | 9/6/1996 | $29.76 | 9/13/1996 | Ricardo Adocicados | Av. Copacabana, 267 | Rio de Janeiro | Brazil |
| 10300 | Yvonne Moncada | 9/9/1996 | $17.68 | 9/18/1996 | Magazzini Alimentari Riuniti | Via Ludovico il Moro 22 | Bergamo | Italy |
| 10301 | Rene Phillips | 9/9/1996 | $45.08 | 9/17/1996 | Die Wandernde Kuh | Adenauerallee 900 | Stuttgart | Germany |
| 10302 | Pirkko Koskitalo | 9/10/1996 | $6.27 | 10/9/1996 | Suprêmes délices | Boulevard Tirou, 255 | Charleroi | Belgium |
| 10303 | Paula Parente | 9/11/1996 | $107.83 | 9/18/1996 | Godos Cocina Típica | C/ Romero, 33 | Sevilla | Spain |
| 10304 | Karl Jablonski | 9/12/1996 | $63.79 | 9/17/1996 | Tortuga Restaurante | Avda. Azteca 123 | México D.F. | Mexico |
| 10305 | Matti Karttunen | 9/13/1996 | $257.62 | 10/9/1996 | Old World Delicatessen | 2743 Bering St. | Anchorage | USA |
| 10306 | Zbyszek Piestrzeniewicz | 9/16/1996 | $7.56 | 9/23/1996 | Romero y tomillo | Gran Vía, 1 | Madrid | Spain |
| 10307 | Zbyszek Piestrzeniewicz | 9/17/1996 | $0.56 | 9/25/1996 | Lonesome Pine Restaurant | 89 Chiaroscuro Rd. | Portland | USA |
The Grid will show scrollbar when the content exceeds the element width or height. The vertical and horizontal scrollbar will be displayed based on the following criteria. The vertical scrollbar appears when the total height of rows present in Grid exceeds its element height. The horizontal scrollbar appears when the sum of column`s width exceeds Grid element width. The height and width property is used to set the Grid height and width respectively. The value of these properties can be a numeric value, pixel(px) or percentage(%). In this demo, the height and width property of the Grid is set to 400 and auto respectively. Now the Grid will render with vertical scrollbar when the total height of rows exceeds its element height and horizontal scrollbar will appear when the total column width exceeds the element width.