This sample demonstrates the Grid component with the row drag and drop feature within same grid. You can rearrange the grid rows by using drag icon in left side of grid column.Here you can drag and drop the grid rows between the decided rows.
Order ID | Customer Name | Order Date | Freight | Ship City | Ship Country | |
|---|---|---|---|---|---|---|
| 10248 | Maria | 7/4/1996 | $32.38 | Reims | France | |
| 10249 | Ana Trujillo | 7/5/1996 | $11.61 | Münster | Germany | |
| 10250 | Antonio Moreno | 7/8/1996 | $65.83 | Rio de Janeiro | Brazil | |
| 10251 | Thomas Hardy | 7/8/1996 | $41.34 | Lyon | France | |
| 10252 | Christina Berglund | 7/9/1996 | $51.30 | Charleroi | Belgium | |
| 10253 | Hanna Moos | 7/10/1996 | $58.17 | Rio de Janeiro | Brazil | |
| 10254 | Frédérique Citeaux | 7/11/1996 | $22.98 | Bern | Switzerland | |
| 10255 | Martín Sommer | 7/12/1996 | $148.33 | Genève | Switzerland | |
| 10256 | Laurence Lebihan | 7/15/1996 | $13.97 | Resende | Brazil | |
| 10257 | Elizabeth Lincoln | 7/16/1996 | $81.91 | San Cristóbal | Venezuela | |
| 10258 | Victoria Ashworth | 7/17/1996 | $140.51 | Graz | Austria | |
| 10259 | Patricio Simpson | 7/18/1996 | $3.25 | México D.F. | Mexico | |
| 10260 | Francisco Chang | 7/19/1996 | $55.09 | Köln | Germany | |
| 10261 | Yang Wang | 7/19/1996 | $3.05 | Rio de Janeiro | Brazil | |
| 10262 | Pedro Afonso | 7/22/1996 | $48.29 | Albuquerque | USA | |
| 10263 | Elizabeth Brown | 7/23/1996 | $146.06 | Graz | Austria | |
| 10264 | Sven Ottlieb | 7/24/1996 | $3.67 | Bräcke | Sweden | |
| 10265 | Ann Devon | 7/25/1996 | $55.28 | Strasbourg | France | |
| 10266 | Roland Mendel | 7/26/1996 | $25.73 | Oulu | Finland | |
| 10267 | Aria Cruz | 7/29/1996 | $208.58 | München | Germany | |
| 10268 | Diego Roel | 7/30/1996 | $66.29 | Caracas | Venezuela | |
| 10269 | Martine Rancé | 7/31/1996 | $4.56 | Seattle | USA | |
| 10270 | Maria Larsson | 8/1/1996 | $136.54 | Oulu | Finland | |
| 10271 | Peter Franken | 8/1/1996 | $4.54 | Lander | USA | |
| 10272 | Carine Schmitt | 8/2/1996 | $98.03 | Albuquerque | USA | |
| 10273 | Paolo Accorti | 8/5/1996 | $76.07 | Cunewalde | Germany | |
| 10274 | Lino Rodriguez | 8/6/1996 | $6.01 | Reims | France | |
| 10275 | Eduardo Saavedra | 8/7/1996 | $26.93 | Bergamo | Italy | |
| 10276 | José Pedro Freyre | 8/8/1996 | $13.84 | México D.F. | Mexico | |
| 10277 | André Fonseca | 8/9/1996 | $125.77 | Leipzig | Germany | |
| 10278 | Howard Snyder | 8/12/1996 | $92.69 | Luleå | Sweden | |
| 10279 | Manuel Pereira | 8/13/1996 | $25.83 | Frankfurt a.M. | Germany | |
| 10280 | Mario Pontes | 8/14/1996 | $8.98 | Luleå | Sweden | |
| 10281 | Carlos Hernández | 8/14/1996 | $2.94 | Madrid | Spain | |
| 10282 | Yoshi Latimer | 8/15/1996 | $12.69 | Madrid | Spain | |
| 10283 | Patricia McKenna | 8/16/1996 | $84.81 | Barquisimeto | Venezuela | |
| 10284 | Helen Bennett | 8/19/1996 | $76.56 | Frankfurt a.M. | Germany | |
| 10285 | Philip Cramer | 8/20/1996 | $76.83 | Cunewalde | Germany | |
| 10286 | Daniel Tonini | 8/21/1996 | $229.24 | Cunewalde | Germany | |
| 10287 | Annette Roulet | 8/22/1996 | $12.76 | Rio de Janeiro | Brazil | |
| 10288 | Yoshi Tannamuri | 8/23/1996 | $7.45 | Reggio Emilia | Italy | |
| 10289 | John Steel | 8/26/1996 | $22.77 | London | UK | |
| 10290 | Renate Messner | 8/27/1996 | $79.70 | Sao Paulo | Brazil | |
| 10291 | Jaime Yorres | 8/27/1996 | $6.40 | Rio de Janeiro | Brazil | |
| 10292 | Carlos González | 8/28/1996 | $1.35 | Sao Paulo | Brazil | |
| 10293 | Felipe Izquierdo | 8/29/1996 | $21.18 | México D.F. | Mexico | |
| 10294 | Fran Wilson | 8/30/1996 | $147.26 | Albuquerque | USA | |
| 10295 | Giovanni Rovelli | 9/2/1996 | $1.15 | Reims | France | |
| 10296 | Catherine Dewey | 9/3/1996 | $0.12 | Barquisimeto | Venezuela | |
| 10297 | Jean Fresnière | 9/4/1996 | $5.74 | Strasbourg | France | |
| 10298 | Alexander Feuer | 9/5/1996 | $168.22 | Cork | Ireland | |
| 10299 | Simon Crowther | 9/6/1996 | $29.76 | Rio de Janeiro | Brazil | |
| 10300 | Yvonne Moncada | 9/9/1996 | $17.68 | Bergamo | Italy | |
| 10301 | Rene Phillips | 9/9/1996 | $45.08 | Stuttgart | Germany | |
| 10302 | Pirkko Koskitalo | 9/10/1996 | $6.27 | Charleroi | Belgium | |
| 10303 | Paula Parente | 9/11/1996 | $107.83 | Sevilla | Spain | |
| 10304 | Karl Jablonski | 9/12/1996 | $63.79 | México D.F. | Mexico | |
| 10305 | Matti Karttunen | 9/13/1996 | $257.62 | Anchorage | USA | |
| 10306 | Zbyszek Piestrzeniewicz | 9/16/1996 | $7.56 | Madrid | Spain | |
| 10307 | Zbyszek Piestrzeniewicz | 9/17/1996 | $0.56 | Portland | USA |
Row drag and drop enabled by setting allowRowDragAndDrop property as true.
Grouping can be enabled by setting allowGrouping property as true.
Injecting Module:
Grid features are segregated into individual feature-wise modules. To use row, drag and drop and grouping features we need to inject RowDDService and GroupService into the @NgModule.providers section.