<?xml version="1.0"?>
<!-- DataGrid control example. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:gridOld="mx.controls.*"
	xmlns:gridNew="*" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="500" height="220">
 
    <mx:XMLList id="employees">
        <employee>
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
            <email>ccoenraets@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
            <email>jwall@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Maurice Smith</name>
            <phone>555-219-2012</phone>
            <email>maurice@fictitious.com</email>
            <active>false</active>
        </employee>
        <employee>
            <name>Mary Jones</name>
            <phone>555-219-2000</phone>
            <email>mjones@fictitious.com</email>
            <active>true</active>
        </employee>
    </mx:XMLList>
 
	<mx:Script>
		<![CDATA[
			[Bindable]
			private var startSize:Number=300;//change this startSize, and recompile to see the changes
		]]>
	</mx:Script>
 
	<mx:Style>
		DataGrid {
			   alternatingItemColors: #006699, #006655;
			}
	</mx:Style>
  		<mx:Label text="datagrid startSize: {startSize}"/>
        <gridNew:EditedDatagrid headerHeight="0" showHeaders="false"  id="dg" width="{startSize}" height="104" rowCount="5" dataProvider="{employees}">
            <gridNew:columns>
                <mx:DataGridColumn dataField="name" headerText="Name" width="30"/> 
                <mx:DataGridColumn dataField="phone" headerText="Phone" width="60"/>
                <mx:DataGridColumn dataField="email" headerText="Email" width="10"/>
            </gridNew:columns>
        </gridNew:EditedDatagrid >
        <mx:Text text="Change the size with this slider 10-20 times to see what I am talking about." height="33" width="231"/>
        <mx:HSlider value="{startSize}" width="400" minimum="{this.width/2}" maximum="{this.width}" snapInterval="1" enabled="true" change="dg.width=slider.value;" id="slider" liveDragging="true"/>
 
</mx:Application>

package
{
	import mx.controls.DataGrid;
	import mx.controls.dataGridClasses.DataGridColumn;
	import mx.core.mx_internal;
 
	use namespace mx_internal;
 
	public class EditedDatagrid extends DataGrid{ 
		public function EditedDatagrid()
		{
			super();
		}
 
	    private var firstRun:Boolean=true;
	    private var ratioSizes:Array;
 
	    protected override function calculateColumnSizes():void{
	    	var  n:int = visibleColumns.length;
	    	var i:int=0;
 
	       if(firstRun){
		       ratioSizes=new Array(n);
		       for (i = 0; i < n; i++){
		         	ratioSizes[i]=(visibleColumns[i] as DataGridColumn).width;//remenber the widths before calling calculateColumnSizes
		       }
		       firstRun=false;
	       }
	       /*it was needed to call this even if the result is overriden, 
	         it inicializes some things that would be missed*/       
	       super.calculateColumnSizes();
 
	       //return; /*uncomment this "return" to see the default behaviour*/
 
	    	//setting the previous ratios for the columns
 
	    	var newWidths:Array=new Array(n);
	    	var dataGridWidth:Number=this.width;
	    	var ratioNum:Number=sum(ratioSizes);
	    	var ratioDivider:Number=0;
 
	    	if(ratioNum==0){  
				throw new Error("cannot divide with 0");
	    	}else{
	    		ratioDivider=100/ratioNum;	    		
	    	}
 
			for(i = 0; i < n-1; i++){//we dont care about the last column now (so n-1)
	            (visibleColumns[i] as DataGridColumn).setWidth((ratioSizes[i]*ratioDivider/100)*dataGridWidth);//the previouse width will be set to it
	            }
 
			/* The calculation is this strange because the ratios could be 40+70+90=200 % (youdont have to make the sum 100%)
			 * ratioDivider=0.5;  (100/200  100% is the max) 
			 * so for the first column ((0.5*40)/100)*width  (/100 to make it percent)			  
			 */			
			return;   	
	    }
 
		private function sum(arr:Array):Number{
			var sum:Number=0;
			for(var i:int=0;i<arr.length;i++){
				if(arr[i] is Number){
					sum+=arr[i];
				}else{
					throw new Error("something is really wrong!");
				}
			}
 
			return sum;
		}	
	}
}