View Full Version : is it possible to prevent moving columns to a certain index?

6 Aug 2009, 6:12 AM
So yesterday I implemented Condor's trick (http://www.extjs.com/forum/showthread.php?t=53666) for disabling drag/drop of specific columns. That worked great, but I'd like to prevent users from dragging other columns to the left of the "locked" columns.

The "locked" columns (there are two of them) are always going to be at indexes 0 and 1. I'd like other columns to be movable but prevent the moving of, say, column 2 to the idx=1 spot.

Is that possible?

6 Aug 2009, 7:26 AM
Since your using Condor's override, you have the option to add an event listener to the 'beforecolumnmove' event and test the values of oldIndex and newIndex to see if they are acceptable, then return true or false depending on weather you want the column moved.

6 Aug 2009, 8:10 AM
I linked to the wrong solution... I was looking at an old test case and forgot that I had problems with that implementation. I've corrected my original post to point to the current (working) trick I'm employing.

6 Aug 2009, 10:41 AM
Ok, well you still need to have a 'beforecolumnmove' event to do what you want, so the previous override you linked to would be needed. The idea is to fire off some code before the 'moveColumn' method is called.

6 Aug 2009, 11:10 AM
Thanks... I'm almost there, I think.

So far I've been able to disable moving any moveable columns before the two "locked" columns, but somehow my override has disabled the action of actually moving columns. The columns look like they're going to move but nothing happens. My code's below.

Ext.override(Ext.grid.HeaderDropZone, {
onNodeDrop : function(n, dd, e, data){
var h = data.header;
if(h != n){
var oldIndex = this.view.getCellIndex(h);
var newIndex = this.view.getCellIndex(n);
//prevent non-locked columns from moving before locked columns
if(oldIndex > 1 && newIndex <= 1) {
this.grid.fireEvent("columnmove", oldIndex, oldIndex);
else {
this.grid.fireEvent("columnmove", oldIndex, newIndex);
return true;
return false;

6 Aug 2009, 11:20 AM
Simply make your first columns fixed:true (which unfortunately also makes them unresizable).

(if you don't what that you'll have to override Ext.grid.HeaderDropZone positionIndicator too)

6 Aug 2009, 12:28 PM
Hi Condor,

I've been using the fixed attribute, which is fine because I don't want the users to resize the columns. However, that doesn't prevent moving the columns before them.

Here's the config of the first column...

width: 16,
align: "center",
dataIndex: <indexName>,
menuDisabled: true,
resizable: false,
sortable: false,
hideable: false,
fixed: true,
draggable: false,
renderer: <my custom renderer>

6 Aug 2009, 12:39 PM
I just checked with fixed: true, dragable: false (one g in dragable) and I can't drag another column before or after it.