Dojo Data Grid – Part 17: EnhancedGrid Drag and Drop
The DnD (Drag and Drop) plugin for the Dojo EnhancedGrid gives you the ability to rearrange grid columns and rows. It also gives you the ability to drag cell contents to other cells. In this post, I’ll show how to add the plugin and use it.
Dojo Data Grid Series
- Part 1: Concepts and Default Features
- Part 2: Creating a REST Service
- Part 3: Creating Your First Grid
- Part 4: Additional Grid Features
- Part 5: Grid Column Features
- Part 6: Reordering Columns
- Part 7: Sorting
- Part 8: Opening Documents
- Part 9: Multi-Row Entries
- Part 10: Full-Text Searching and Field-Specific Filtering
- Part 11: Editable Columns
- Part 12: Highlighting Edited Rows
- Part 13: Create a Dojo EnhancedGrid
- Part 14: Enhanced Filtering with No Coding
- Part 15: Enhanced Printing
- Part 16: Exporting Grid Data
This post assumes you already have a Dojo Data Grid control set up to use the Dojo EnhancedGrid, based on the instructions in this post.
1. Load the DnD Plugin
2. Add the Plugin to the Grid
The first step made the plugin module available, but you also need to add it to the grid.
Note: The row selection property is necessary in order to rearrange rows in the grid.
To move a column, click on the column header to select the column, release the mouse button, then click in any column cell and drag it to the left or right. When you let it go, it will drop into the new location.
Along with rearranging the columns, it will refresh the grid and move you back to the top.
To move a row, click on the row selector and then click in any cell in the row and drag it to a new location.
You can even select multiple rows and move them at the same time. If you select non-adjacent rows, they will all move to the new location together and will become adjacent.
To move data from one cell to another. Click on the cell to select it, release the mouse button, then click on the selected cell and drag it to another cell. Once you drop it, the originating cell will be blank and the target cell will be overwritten with the data that you selected.
You can move data from multiple cells, but you cannot move data from multiple non-adjacent cells.
Note: If you are using a restJsonService, you cannot move cells unless your website document is set up to allow Post actions. It works fine with a restViewItemFileService either way.
IMPORTANT: It saves the changes automatically when you move cells! (When you move a row or column, it does not alter the original data.)
You can create a configuration object for the plugin to limit the options available (eg prevent row, column, or cell movement.)
You can even configure the plugin to allow you to drag data out of the grid and into another grid.
See the plugin documentation for more information.