TableDnD

Thanks to Denis Howlett, we can now drag and drop table rows using his TableDnD plugin with only a very few lines of code.

How to use:

Call the plugin before using jqGrid and in gridComplete event, add tableDnDUpdate

<table id='mygridtable' class='scroll'></table> jQuery("#grid_id").tableDnD() jQuery("#grid_id").jqGrid({ ... gridComplete : function(){ jQuery("#grid_id").tableDnDUpdate(); } ... });

This will enusre that the grid rows remain draggable no matter how many changes are made, since the gridComplete event is raised every time we add, update or delete records.

This will also work with local data, i.e an array.

An example of posting the change to the server on every "drop", using the appropriate event in TableDnD:

$("#grid_id").tableDnD({ onDrop: function(table, row) { var posturl = 'yourURL' ; var orderstring = $.tableDnD.serialize() ; $.post( posturl, orderstring, function(message,status) { if(status !== 'success') { alert(message); } }) } }); ;

For more information on how to use the different options available with this plugin, please refer to Denis Howlett's blog on the topic.


  Last Updated: 2/7/2009 | © Tony's jqGrid - a jQuery Plugin, 2010