draggable datagrid columns

[alex.capurro]

Hi,

is it possible to drag datagrid columns to change their order? I have not found any examples on the site and the documentation does not mention anything but it surprises me that this is not possible.

[stworthy]

The column moving feature is not added into datagrid plugin, but we can extend some method to do so. Below is the simple implementation of column moving method:

Code:

$.extend($.fn.datagrid.methods,{
	columnMoving: function(jq){
		return jq.each(function(){
			var target = this;
			var cells = $(this).datagrid('getPanel').find('div.datagrid-header td[field]');
			cells.draggable({
				revert:true,
				cursor:'pointer',
				edge:5,
				proxy:function(source){
					var p = $('<div class="tree-node-proxy tree-dnd-no" style="position:absolute;border:1px solid #ff0000"/>').appendTo('body');
					p.html($(source).text());
					p.hide();
					return p;
				},
				onBeforeDrag:function(e){
					e.data.startLeft = $(this).offset().left;
					e.data.startTop = $(this).offset().top;
				},
				onStartDrag: function(){
					$(this).draggable('proxy').css({
						left:-10000,
						top:-10000
					});
				},
				onDrag:function(e){
					$(this).draggable('proxy').show().css({
						left:e.pageX+15,
						top:e.pageY+15
					});
					return false;
				}
			}).droppable({
				accept:'td[field]',
				onDragOver:function(e,source){
					$(source).draggable('proxy').removeClass('tree-dnd-no').addClass('tree-dnd-yes');
					$(this).css('border-left','1px solid #ff0000');
				},
				onDragLeave:function(e,source){
					$(source).draggable('proxy').removeClass('tree-dnd-yes').addClass('tree-dnd-no');
					$(this).css('border-left',0);
				},
				onDrop:function(e,source){
					$(this).css('border-left',0);
					var fromField = $(source).attr('field');
					var toField = $(this).attr('field');
					setTimeout(function(){
						moveField(fromField,toField);
						$(target).datagrid();
						$(target).datagrid('columnMoving');
					},0);
				}
			});
			
			// move field to another location
			function moveField(from,to){
				var columns = $(target).datagrid('options').columns;
				var cc = columns[0];
				var c = _remove(from);
				if (c){
					_insert(to,c);
				}
				
				function _remove(field){
					for(var i=0; i<cc.length; i++){
						if (cc[i].field == field){
							var c = cc[i];
							cc.splice(i,1);
							return c;
						}
					}
					return null;
				}
				function _insert(field,c){
					var newcc = [];
					for(var i=0; i<cc.length; i++){
						if (cc[i].field == field){
							newcc.push(c);
						}
						newcc.push(cc[i]);
					}
					columns[0] = newcc;
				}
			}
		});
	}
});

Now call 'columnMoving' method after the datagrid is created will allow users to move a column to another location.

Code:

$('#tt').datagrid({
//...
});
$('#tt').datagrid('columnMoving');

[alex.capurro]

Hi,

thanks for this. I have pasted your code into my page that has a table (with columns that can be removed/shown by right click menu), however it seems like your code does not actually do anything.
When i try to drag a column, nothing happens, my mouse pointer does not even change to suggest that i can drag the columns.

Where exactly should I be placing the main part of your code?
Would it be possible to see a working demo of your code?

Thanks, I really appreciate this.

[stworthy]

The 'movingColumn' method should be extended first. When datagrid is created, call the 'movingColumn' method to make the columns movable. Please download and have a look at the attached file.

[alex.capurro]

thanks stworthy, it worked brilliantly. I missed out the bottom two lines when i tried to use it so thats why it did not work.

Thank you very much!

[rabesh]

how to disable dnd

[arma]

If the column sortable is activated and clicking colum header to sort (single click) it will display small popup as it's like start on dragging. How to make the popup shows only when pressing button after 1 or 2 secs, just to make sure it's sorting not to move column.

Any plan to merge your code above for the next release?

[hande89]

How to do this for treegrid? Same code but just replace word "datagrid" with "treegrid"?