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:

	select null
	, null
	, null
	, null
	from emp
	union
	select empno
	, ename
	, job
	, deptno
	from emp
	where deptno = 10

view raw EmpNullRow hosted with ❤ by GitHub

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:

	select empno
	, ename
	, job
	, deptno
	from(
	select null as empno
	, null as ename
	, null as job
	, null as deptno
	from emp
	union
	select empno
	, ename
	, job
	, deptno
	from emp
	where deptno = 10
	)
	order by empno nulls first

view raw orderEmpNulls hosted with ❤ by GitHub

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:

	$('#report_dept10 .uReportStandard tBody tr:not(:first)').each(
	function(){
	$(this).addClass( "emp ui-widget-content" );
	var idVal = $(this).find('td[headers="EMPNO"]').html();
	$(this).first('td').attr("id",idVal);
	}
	)
	$('#report_dept20 .uReportStandard tBody tr:not(:first)').each(
	function(){
	$(this).addClass( "emp ui-widget-content" );
	var idVal = $(this).find('td[headers="EMPNO"]').html();
	$(this).first('td').attr("id",idVal);
	}
	)

view raw addClasstoRows hosted with ❤ by GitHub

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:

	$('#report_dept10 .uReportStandard tBody tr:first()').hide()
	$('#report_dept20 .uReportStandard tBody tr:first()').hide()

view raw hideEmptyRows hosted with ❤ by GitHub

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.

Apex 4.2.5 patch release

On April 9th Oracle released a minor patch for Apex: release 4.2.5.

The new release includes "numerous bug fixes together with significant improvements and modernizations to the included Packaged Applications". Nothing shocking, but enough to keep us going untill the release of Apex 5.0, which is anticipated end of this summer.

You can download the latest release of Apex here.