Exchange Table Data with Drag and Drop, part 2

A few months ago I wrote a blog on exchanging table data with drag and drop. This worked ok, but a few weeks ago +Till Albert pointed out a nasty bug: when you drag all employees from one table to the other, you’ll end up with an empty table. Apex will not display the table or table header, but instead displays a “No data found”-message. As a result you can no longer drag data into the empty table.

As a solution I came up with the following modifications:

• Extend the query of each table with an empty row
• Make all rows except the empty row draggable
• For display enhancement hide the empty row

To start with the new table query we can add an empty row with a union:

This will always give us one empty row as a result and therefore we will always be able to display our table. Because we want to add classes to all rows except for the empty ones, it is helpful to order the table data. This enables us to easily pick out the empty row. So let’s rewrite the previous query to:

Now we always end up with our empty row on top. With this in mind we can slightly change the way we add classes to the non-empty rows:

As you can see we simply skip the first row and add the class “emp” and “ui-widget-content” to all other rows. The last thing we need to do is hide the empty table rows, we can simply do that using the “hide” operator:

With these slight modifications your tables will always be visible so you can always drag rows into it. You can check the modified working example here.