dcsimg
A Flash Developer Resource Site

Results 1 to 4 of 4

Thread: How can I dynamically order columns in dataGrid?

  1. #1
    Junior Member
    Join Date
    Jul 2006
    Posts
    21

    How can I dynamically order columns in dataGrid?

    Hello,
    I'm trying to figure out if there's a way that I can dynamically order the columns in my dataGrid. Is there a way that I can retrieve the columnIndex and then assign new ones?

    Example: User clicks a button and header/column name and contents (Column 4) get moved to the first column position so the new order of columns is "Column 4, Column 1, Column 2, Column3".

    I figure there must a relatively simple way of doing this since you can easily drag-and-drop columns into your desired order.

    Any help greatly appreciated! Thanks in advance!

  2. #2
    Junior Member
    Join Date
    Jul 2006
    Posts
    21
    I thought I had it! ...but... Unfortunately I wasn't as successful as I thought at dynamically changing the order of my dataGrid columns and now I'm in desperate need of help. Below I've included a very simplified bit of code and if anyone out there could make it so that the button included in the code simply swaped the positions of the two columns I would be greatful! When the "Toggle Columns" button is pressed I need the column (and its rows) "Name" to swap places with the column "Account":
    Code:
    <?xml version="1.0"?>
    <!-- dpcontrols/DataGridValidateNowSelindex.mxml -->
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
       initialize="initData();">
    
       <mx:Script>
           <![CDATA[
        
                import mx.collections.ArrayCollection;
    
                [Bindable]
                private var DGArray:ArrayCollection = new ArrayCollection([
                    {Account:'Lorem', Name:'Albert'},
                    {Account:'Lorem Ipsum', Name:'Ben'}]);
             
                // Initialize initDG ArrayCollection variable from the ArrayCollection.
                public function initData():void {
                    myGrid.dataProvider = DGArray;
                    myGrid.validateNow();
                    //myGrid.selectedIndex=1;
                }
            ]]>
       </mx:Script>
    
       <mx:DataGrid id="myGrid" sortableColumns="true" lockedColumnCount="0"
                horizontalScrollPolicy="on" height="200" width="400">
          <mx:columns>
             <mx:DataGridColumn dataField="Account" id="account"/>
             <mx:DataGridColumn dataField="Name" id="tname"/>
          </mx:columns> 
       </mx:DataGrid>
    
       <mx:Button label="Toggle Columns" click="account.visible = !account.visible;" />
    </mx:Application>
    I will be extremely greatful is someone could help with this!

    Thanks in advance!
    Last edited by skinnyfingers; 04-10-2008 at 04:34 PM.

  3. #3
    Junior Member
    Join Date
    Jul 2006
    Posts
    21
    I finally got something to work (not the best way I'm sure)...now I have to assign an ID number to each dataGrid column name within the array some how. You'll see in the application that when you click on the List entries the dataGrid swaps its colmuns depending on which list name you click on. My goal at this point is to make it so that the user can rearrange (drag and drop) the names that are displayed in the List component and the dataGrid's column names will re-arrange accordingly. Any ideas?
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            verticalAlign="middle"
            backgroundColor="white">
    
        <mx:Script>
            <![CDATA[
            	import mx.collections.ArrayCollection;
            	
                [Bindable]private var arrayOfString:Array;
                [Bindable]private var nIDOne:Number = 0;
                [Bindable]private var nIDTwo:Number = 1;
                private var arrayOfObject:Array;
                
                [Bindable]
                public var DGArray:ArrayCollection = new ArrayCollection([
                    {Artist:'Jack', Price:'Lots'},
                    {Artist:'Jill', Price:'None'}
                ]);
    
                private function init():void {
                    arrayOfString = ["Artist", "Price"];
                    
                    myGrid.dataProvider = DGArray;
                    myGrid.validateNow();
                }
                
                private function swapColumns():void {
    				if(tReturn.selectedItem == "Artist"){
    					nIDOne = 0;
    					nIDTwo = 1;
    				}else if(tReturn.selectedItem == "Price"){
    					nIDOne = 1;
    					nIDTwo = 0;
    				}
                	init();
    			}
    
            ]]>
        </mx:Script>
                
        <mx:DataGrid id="myGrid" initialize="init();"> 
            <mx:columns>
                <mx:DataGridColumn dataField="{arrayOfString[nIDOne]}" />
                <mx:DataGridColumn dataField="{arrayOfString[nIDTwo]}" />
            </mx:columns>
        </mx:DataGrid>
        <!--<mx:Button label="Swap Columns" click="swapColumns()" />-->
        
          <mx:List  
    	    id="tReturn"
    	 	dataProvider ="{arrayOfString}"
    	    allowMultipleSelection="true" 
    	    labelField="dataField"               
    	    dragEnabled="true"
    	    dropEnabled="true"
    	    dragMoveEnabled="true"
    	    click="swapColumns()"
    	  />
    	
    	<mx:Label text="Selected (index values): {tReturn.selectedIndex}  "/>
    	<!--<mx:Button label="Swap Columns" click="swapColumns()"/>-->
    
    </mx:Application>
    Any input or help is extremely welcome and will be much appreciated!

    Thanks!

  4. #4
    Junior Member
    Join Date
    Jul 2006
    Posts
    21
    Finally got it! Anyone who's curious...code's below. Dynamically sorting columns controlled by list drag and drop.
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            verticalAlign="middle"
            backgroundColor="white">
    
        <mx:Script>
            <![CDATA[
            	import mx.collections.ArrayCollection;
                
                [Bindable]private var arrayToMatch:Array = new Array
    			("SC", "Account",  "Actions");
    			//
    			[Bindable]private var tmpArray:Array = new Array();
    			// 
    			[Bindable]private var datagridColumns:Array = new Array();
                
                [Bindable]
                public var DGArray:ArrayCollection = new ArrayCollection([
                    {Account:'Jack', SC:'Lots', Actions:'yahoo'},
                    {Account:'Jill', SC:'None', Actions:'amazon'}
                ]);
    
                private function init():void {
                    myGrid.dataProvider = DGArray;
                    myGrid.validateNow();
                }
                
                private function formatView():void {
                	tmpArray = [];
                    datagridColumns = myGrid.columns;
    				//
    				for(var i:Number=0; i<arrayToMatch.length; i++){
    				   	for(var j:Number=0; j<datagridColumns.length; j++){
    					    if(arrayToMatch[i]==datagridColumns[j].headerText){
    					   		trace(arrayToMatch[i], "MATCHES", datagridColumns[j].headerText);
    					   		tmpArray.push(datagridColumns[j]);
    					   	}
    					}
    				}
    				myGrid.columns = tmpArray;
                }
            ]]>
        </mx:Script>
                
        <mx:DataGrid id="myGrid" initialize="init();"> 
            <mx:columns>
                <mx:DataGridColumn dataField="Actions" id="actions" width="80">
    			<mx:itemRenderer>
    				<mx:Component>
    					<mx:PopUpMenuButton label="Actions" width="80"/>
    				</mx:Component>
    			</mx:itemRenderer>
    			</mx:DataGridColumn>
    			<mx:DataGridColumn dataField="SC" width="38"/>
    			<mx:DataGridColumn dataField="Account"/>
            </mx:columns>
        </mx:DataGrid>
        <!--<mx:Button label="Swap Columns" click="swapColumns()" />-->
        
          <mx:List  
    	    id="tReturn"
    	 	dataProvider ="{arrayToMatch}"
    	    allowMultipleSelection="true" 
    	    labelField="dataField"               
    	    dragEnabled="true"
    	    dropEnabled="true"
    	    dragMoveEnabled="true"
    	  />
    	
    	<mx:Label text="Drag and drop items in list to desired order and click Resort"/>
    	<mx:Button label="Resort" click="formatView()"/>
    
    </mx:Application>
    I am thankful to forums

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center