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

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

The dojox.grid.enhanced.plugins.DnD module must be included on the page, so add it to the page resources. Properties > Resources > Add > Dojo Module…
Data Grid 17 - 1 - Add Module

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.

Go to the properties of the Dojo Data Grid > Dojo and click the Add button. Add two properties as shown here:
Data Grid 17 - 2 - Add Plugin

Note: The row selection property is necessary in order to rearrange rows in the grid.

Moving Columns

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.

Before
Data Grid 17 - 3a - Before Column Move

After
Data Grid 17 - 3b - After Column Move

Moving Rows

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.

Before
Data Grid 17 - 4a - Before Row Move

After
Data Grid 17 - 4b - After Row Move

Moving Cells

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.

Before
Data Grid 17 - 5a - Before Cell Move

After
Data Grid 17 - 5b - After Cell Move

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

More Options

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.

Advertisements

4 responses to “Dojo Data Grid – Part 17: EnhancedGrid Drag and Drop”

  1. Stephan H. Wissel says :

    ABSOLUTELY AWSOME series of posts! Love them! Seaking for my fellow XPagers in AP: Thank you! Tiger/Singha/Tsingdao beer on us when you come to this part of the world

  2. Stephan H. Wissel says :

    speaking not seaking (curse you broken keyboard)

  3. Carin says :

    Bitte klicken Sie den Bestätigungsbutton in dieser E-Mail an. Erst danach ist
    Ihre aktiv und Ihnen den 3,-Gutschein per E-Mail zusenden.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: