PDA

View Full Version : Drag and drop using xtemplates in a grid



delp
14 May 2014, 8:10 AM
I've created a grid and it has drag and drop functionality which worked fine.
that was until I changed the column to use xtype: 'templatecolumn'

Now if I try to drag and drop it will only work if I drag the row by the area that doesn't have text.

https://fiddle.sencha.com/#fiddle/5r5

See the above fiddle which is a slightly modified code example taken from the docs on the ptype - gridviewdragdrop.

So is this expected behaviour and is there a way to get around it? (using Ext JS 4.2.1)

Thanks

delp
14 May 2014, 8:22 AM
While testing - if the XTemplate isn't a link the it works as expected.
So - '<tpl>{name}</tpl>' would be OK
But - '<tpl><a>{name}</a></tpl>' is NOT OK.

skirtle
14 May 2014, 2:04 PM
I believe this is the underlying cause of your problem:

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.dd.DragDrop-property-invalidHandleTypes

It's not entirely clear why you would want a link to be draggable in this way.

delp
15 May 2014, 12:29 AM
Thanks - well at least that (sort of) explains why you can't drag an XTemplate with an <a> in it although it doesn't really give a reason as to why you can't.

While dragging a link may not be common, in the example its a very much cut down version of what's happening. In reality there is a grid/column and in that grid the rows are XTemplates which contain information and a link. Each row can be dragged elsewhere on the page to initiate another action. (not my choice but a requirement).

It would be good if the docs actually explained why you can't drag an <a>. Why can't it be treated like other tags and be draggable?

skirtle
15 May 2014, 12:47 AM
Just set:


grid.getView().getPlugin('dd').dragZone.invalidHandleTypes = {};

where 'dd' is the pluginId.

By the way, those attributeless <tpl> tags are meaningless.

delp
15 May 2014, 6:26 AM
Thanks, thats brilliant.
Yes, I had copied/pasted from a much more complicated tpl where there was conditions and if's and I didn't think of cutting them out.
Good to know.