1. #1
    Sencha User
    Join Date
    Apr 2007
    Posts
    37
    Vote Rating
    3
    abhijit is on a distinguished road

      0  

    Default Allow Reorder of Grid Columns for Specific Columns

    Allow Reorder of Grid Columns for Specific Columns


    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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Vote Rating
    858
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Vote Rating
    858
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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:

    Code:
    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
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #4
    Sencha User
    Join Date
    Apr 2007
    Posts
    37
    Vote Rating
    3
    abhijit is on a distinguished road

      0  

    Default


    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?

  5. #5
    Sencha User
    Join Date
    Apr 2007
    Posts
    37
    Vote Rating
    3
    abhijit is on a distinguished road

      0  

    Default


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

    Code:
    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!

  6. #6
    Sencha User
    Join Date
    Apr 2007
    Posts
    37
    Vote Rating
    3
    abhijit is on a distinguished road

      0  

    Default Grid Columns Drag Drop based on Grouped Column

    Grid Columns Drag Drop based on Grouped Column


    Cleaned up the code. Also including the HTML

    The override required is (override.js) -
    PHP Code:
    Ext.define('Override.grid.header.DropZone', {
      
    override 'Ext.grid.header.DropZone'
     
     
    ,onNodeOver: function(targetddedata){
      
    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(targetddedata){

      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) -
    PHP Code:
    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 Code:
    <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>

Thread Participants: 1

Tags for this Thread