View Full Version : Drag and grop to reorder grid

6 Aug 2009, 3:04 AM
anyone knows how to make a grid to reorder on drag and drop?
I also need myData array to be sent to the server on this action.

Thanks in advance,

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am']

// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'}

// manually load local data

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: 'Company', width: 70, sortable: false, dataIndex: 'company'},
{header: 'Price', width: 75, sortable: false, renderer: 'usMoney', dataIndex: 'price'},
stripeRows: true,
height: 200,
width: 400,
enableDragDrop: true,
enableColumnMove: true,
title: 'Guestions',
// config options for stateful behavior
stateful: true,
stateId: 'grid'

6 Aug 2009, 3:28 AM
Itackled this in Chapter 11 of Ext JS in Action.

Below is the source to the solution to this problem.
These links are not static and will probably change.

Here is a single dnd implementation: http://extjsinaction.com/examples/chapter11/11.XX_dnd_grid_self.html
and double dnd : http://extjsinaction.com/examples/chapter11/11.2_dnd_with_grids.html

Inject the ajax request before you remove nodes.

I'm actually working on the code to do this now.

6 Aug 2009, 3:36 AM
I've just updated them to include ajax

6 Aug 2009, 3:39 AM
those links have been snipped. they actually contain those dots...

6 Aug 2009, 3:45 AM
Ugh! thanks nige. I've updated that post. I'm an *****.

6 Aug 2009, 3:47 AM
Thanks a lot man

6 Aug 2009, 3:50 AM
FYI, http://extjsinaction.com/examples/chapter11/11.XX_dnd_grid_self.html inserts the new node at the wrong place.

Seems like its using the nunber as a zero-based index when inserting at the new position. Try it.

6 Aug 2009, 3:59 AM
nice catch. I must have just introduced that bug with some of the index changes i've made today. I'm on to fix that now. will post asap.

6 Aug 2009, 4:24 AM
OK, fixed and split into two examples - with and without ajax:

Ajax: http://extjsinaction.com/examples/chapter11/11.XX_dnd_grid_self_with_ajax.html

without ajax

Nige, as always, thanks so much for your valued input.

6 Aug 2009, 4:25 AM
Those links don't work.

6 Aug 2009, 4:29 AM
OMFG!! !FPOIJ#P)U#()&*!! i have way too many mental threads running at this moment. ugh!

I've fixed the thread.

6 Aug 2009, 4:30 AM
OK, the problem still persists. OK - stepping back for a bit. I need to clear my mind. Will brb :\

6 Aug 2009, 4:45 AM
Those two links work now, but the drop prob is still there.

If you drag "Jay Garcia" and drop him on top of "Nyri Selgado" with the mouse above the center line so that Jay should go in above, he in fact gets added as the last item.

6 Aug 2009, 4:48 AM
Probably something to do with removing a Record

I hit this when I was doing Grid and View DD. You calculate the drop point, and if it is after the point from which the Record is due to be removed, you have to decrement the drop point by 1.

If you are dragging upwards, everything works fine.