Allow Reorder of Grid Columns for Specific Columns

[abhijit]

Hi,

I have a grid with multiple columns. I would like to allow reordering of some columns only e.g. if the grid consists of columns 'A', 'B', to 'G' (headers), I would like the user to reorder only 'B', 'C', 'D' and 'E' columns and that too only across those columns, i.e. they should not be able to drop any of the columns before 'A' or after 'F'. I've tried disabling 'A', 'F' and 'G' columns but that doesn't seem to stop the reordering.

Even for Grouped Columns, is it possible to restrict the reordering only within the specific group?

Any ideas and/or pointers would be of great help.

Thanks.

[mitchellsimoens]

So you set draggable to false on the columns you don't want to be reorderable? Or is it that you don't want a column to be dropped before another column?

[mitchellsimoens]

If you don't want certain columns to be moved before/after others, in the Ext.grid.header.Container there is a method that is called to do the moving called moveHeader. There you can add a beforecolumnmove event that you could return false to cancel:

Ext.define('Override.grid.header.Container', {
    override : 'Ext.grid.header.Container',

    moveHeader: function(fromIdx, toIdx) {
        if (this.fireEvent('beforecolumnmove', this, fromIdx, toIdx) !== false) {
            this.callOverridden(arguments);
        }
    }
});

Now on the header container you have a beforecolumnmove event that you can return false to cancel. Now, you can figure out how to bubble that up to the grid panel

[abhijit]

Mitchell, that seems the right way to do it. However, 'moveHeader' never seems to get called!

From what I understand there is a plugin called HeaderReorderer which uses DropZone and DragZone which are responsible for this.

I'm using Ext 4.0.7

Any other suggestions? Do you think it's possible to get hold of 'notifyDrop' inside the DropZone in HeaderReorderer?

[abhijit]

Mitchell, with the pointers you gave we came up with this -

Ext.define('Override.grid.header.DropZone', {
	 override : 'Ext.grid.header.DropZone'
	,onNodeOver: function(target, dd, e, data){
		this.callOverridden(arguments);
		
		var targetcol = Ext.getCmp(Ext.get(target).id);
		
		if (targetcol.groupattribute == data.header.groupattribute)
			return  Ext.dd.DropZone.prototype.dropAllowed;
		else
			return  Ext.dd.DropZone.prototype.dropNotAllowed;
	}
	,onNodeDrop: function(target, dd, e, data){
		var targetcol = Ext.getCmp(Ext.get(target).id);
		if (targetcol.groupattribute == data.header.groupattribute) {
			this.callOverridden(arguments);
			return true;
		}
		else
			return false;
	}
});

The <groupattribute> is an attribute we have for the columns which we have extended from Ext.grid.column.Column

Although this works perfectly, I find the solution unsatisfactory! Can you help me come up with a better solution?

Thanks!

[abhijit]

Cleaned up the code. Also including the HTML

The override required is (override.js) -

Ext.define('Override.grid.header.DropZone', {
  override : 'Ext.grid.header.DropZone'
 
 ,onNodeOver: function(target, dd, e, data){
  this.callOverridden(arguments);
  
  var  mouseoverHeader = Ext.getCmp(target.id)
   ,draggedHeader = data.header;
  
  if (mouseoverHeader.groupAttribute == draggedHeader.groupAttribute)
   return  Ext.dd.DropZone.prototype.dropAllowed;
  else
   return  Ext.dd.DropZone.prototype.dropNotAllowed;
 }
 
 ,onNodeDrop: function(target, dd, e, data){

  var  mouseupHeader = Ext.getCmp(target.id)
   ,draggedHeader = data.header;
  
  if (mouseupHeader.groupAttribute == draggedHeader.groupAttribute) {
   this.callOverridden(arguments);
   return true;
  }
  else
   return false;
 }
}); 

And the Grid is defined as (example.js) -

Ext.onReady(function(){
    Ext.tip.QuickTipManager.init();

    Ext.define('Example', {
        extend: 'Ext.data.Model',
  fields: [ 'companyname', 'companycity', 'contactname', 'contactphone' ]
    });

    var store = Ext.create('Ext.data.Store', {
         model : 'Example'
  ,data : []
    });
 
 var grid = Ext.create('Ext.grid.Panel', {
   renderTo : 'maindiv'
  ,title : 'Example'
  ,store : store
  ,width : 500
  ,height : 300
  
  ,columns: [
   {
     header : 'Company Details'
    ,groupAttribute : 'company'
    ,draggable : false
    ,columns : [
     {
       header : 'Name'
      ,dataIndex : 'companyname'
      ,groupAttribute : 'company'
     }
     ,{
       header : 'City'
      ,dataIndex : 'companycity'
      ,groupAttribute : 'company'
     }
    ]
   }
   ,{
     header : 'Contact Details'
    ,groupAttribute : 'contact'
    ,draggable : false
    ,columns : [
     {
       header : 'Name'
      ,dataIndex : 'contactname'
      ,groupAttribute : 'contact'
     }
     ,{
       header : 'Phone'
      ,dataIndex : 'contactphone'
      ,groupAttribute : 'contact'
     }
    ]
   }
  ]
 });
 
}); 

And the HTML is

<html>
  <head>
    <title>Grid Columns Drag Drop</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    
    <script type="text/javascript" src="../../ext-all.js"></script>

    <script type="text/javascript" src="override.js"></script>
    <script type="text/javascript" src="example.js"></script>
    
  </head>
  <body>
    <div id="maindiv">
    </div>
  </body>
</html>