Drag and drop rows in a Table on IE8 not working

I have a Table that is populated “manually” by adding items with 3 columns, two of which are also text edit fields so data can be entered directly into the table. The first column is an “order” field that I have marked as read-only.

On IE8, it all seems to work fine except for drag and drop of rows. It doesn’t seem to let me grab a row and drag it. I can select a row, and I can update the data in the rows, but not drag it. In fact, the read-only “order” field seems to render a bit like a TextField in that I while I cannot change the value, I can get the insertion bar when I place my cursor at the end of the number.

However, I tested on FF 3.6 and Chrome 8 and both of them work correctly, including drag and drop. I am using the Chameleon theme if that matters.

Any ideas why IE8 would refuse to let me drag the rows easily?

Thanks for any tips since having it work on IE8 is a must.

(Update: Just noted that I can drag and drop on IE8, but when I try to click on a row, it does the insertion bar, like the TextField is coming into place. But if I move the mouse around a bit, towards the top/bottom of the row, the cursor turns from an arrow to a hand, and then I can drag. It seems that IE8 is somehow confused by the TextField containing the read-only order field.).

My guess is that IE traps all mouse events inside the disabled/read-only text field, hence the dragstart event failing as well. At least most browsers prevent mouse events on disabled button elements, and I wouldn’t be surprised if the same thing happened with all other form elements.

EDIT: And worth a ticket, of course, so we can investigate the issue. A workaround would be to use a Label instead of a read-only textfield.

Thanks. I’d use a Label, but I’m not sure how to do it since Label is not a Field, and thus how do I create it for an editable Table column? That is, I have such a construct to build my TextFields now:

		optionList.setTableFieldFactory(new DefaultFieldFactory() {
			public Field createField(Container container, Object itemId, Object propertyId, Component uiContext) {
		        Field f = super.createField(container, itemId, propertyId, uiContext);
		        if ( propertyId.equals("order") ) {
		        	f.setReadOnly(true);
		        } else {
		        	f.setWidth(100,UNITS_PERCENTAGE);
		        }
		        return f;
		    }
		});

Not sure how do I tell it that a given column should use a Label and not something that is a Field? I only want/need 2 of the 3 columns to be editable.

UPDATE: Just noted that if I return ‘null’ for my “order” column, it works fine, so while not a Label, Table does the right thing and shows the Property value as expected without having the read-only textfield. Thanks for spurring “one last test” on that! :slight_smile:

Great! That would’ve actually been my next guess as well, returning null.