DataGrid Tip: Row Background Color

How to change the background color of a row is an often-asked question. In Flex 2.0 it is easy. Follow these steps:

  1. Create a new class that extends mx.controls.DataGrid. This class can be an MXML file or an ActionScript file, whichever you are most comfortable with.
  2. Overide the protected function, drawRowBackground:

        override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number,
                                                       color:uint, dataIndex:int):void
            // make any tests here, then change color accordingly. For example: color = 0xFF0000;
            // call the super function to make it happen.
  3. Now use your new grid in place of the <mx:DataGrid> in your application.

Within drawRowBackground you can test your data. The dataIndex argument can be used to look up the item in the dataProvider that corresponds to this row. For example, suppose you want to color any row green whose quantity is greater than 1000:

var item:Object = (dataProvider as ArrayCollection).getItemAt(dataIndex);
if( item.quantity > 1000 ) color = 0x00FF00;

It's just that easy.

출처 :

Posted by 나비 나비:D

출처 :


2. 소스


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=""
 layout="absolute" xmlns:ns1="*" creationComplete="initApp()" viewSourceURL="srcview/index.html" fontSize="12">
   import mx.controls.dataGridClasses.DataGridColumn;
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   private var ArrCol:ArrayCollection = new ArrayCollection();
   public function initApp():void{    
    myGrid.dataProvider = ArrCol;    
   public function onChangeColumn():void{
    // Grid init
    myGrid.columns = [];
    var arrCol:Array = new Array();
    for(var i:uint = 0; i<chgColumn.value;i++){
     var col:DataGridColumn = new DataGridColumn("col"+i);
     var colRender:ClassFactory = new ClassFactory(LabelRenderer); = {headerText:"컬럼"+i};
     col.headerRenderer = colRender;  
    myGrid.columns = arrCol;  
     var colval:Object = new Object;
     for(var j:uint = 0; j<chgColumn.value;j++){
      colval["col"+j] = (i+1)*(j+1);
 <mx:Component id="HeaderLabelRenderer">  
     <mx:HBox horizontalAlign="left" verticalAlign="middle">
     <mx:Label text="" textIndent="3" width="100%" textAlign="left"/>
 <mx:DataGrid left="10" right="10" top="70" bottom="10" id="myGrid" fontSize="12"/>
 <mx:HBox left="10" right="10" top="10" bottom="518">
  <mx:Form width="100%">
   <mx:FormItem label="컬럼수">
    <mx:HSlider id="chgColumn" width="236" minimum="5" maximum="10" snapInterval="1" enabled="true" change="onChangeColumn()"/>


Grid HeaderText 값을 동적으로 사용하기 위해 headerText 사용하였습니다.

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx=""
  horizontalAlign="left" verticalAlign="middle" horizontalScrollPolicy="off" creationComplete="initComp()">

   private var _headerText:String;
   public function set headerText(value:String):void {
    _headerText = value;
   public function get headerText():String {
    return _headerText;

       public function initComp():void {
        lvlLabel.text = _headerText;  
     <mx:Label text="" textIndent="3" width="100%" textAlign="left" id="lvlLabel"/>

3. 참고

Posted by 나비 나비:D

출처 :
May 12, 2006
- Filter a dataGrid with a comboBox
Dynamically load result values into a comboBox to be used to filter a dataGrid.

A common practice in Flex is to use a comboBox to filter the data that is displayed in a dataGrid.  In this tip, the goal is to display a dataGrid with data from an authors database table that has the following structure:


authorId : String;
authorName : String;
status : String;

In addition, the user will be allowed to select from a comboBox that contains the different author status values and cause the author data in the dataGrid to be filtered.  It is recommended that you cast the result from a server call to an arrayCollection and use the arrayCollection as the dataProvider for the dataGrid.  By doing this, you will see that it is easy to manipulate and filter the data that is displayed.  Getting the data is beyond the scope of this tip, but there are plenty of examples available on that topic. 


First, cast the result to an arrayCollection:



       import mx.utils.ArrayUtil;

       import mx.collections.ArrayCollection;


       // event.result contains the data from the authors search.      


       public var authorsArray : Array = mx.utils.ArrayUtil.toArray(event.result);


       // Use authorsDataProvider as the dataProvider for the dataGrid.



       public var authorsDataProvider : ArrayCollection = new ArrayCollection(authorsArray);



The mxml would look like this:


<mx:DataGrid id="dgAuthors"
                dataProvider="{ authorsDataProvider }"/>
Next, dynamically load the comboBox with the unique author status values that exist in the search result.  
In this case, the possible author status values in the database are "Active", "Inactive" and "Deleted". 
Before proceeding though, let’s review the use-case.  The user is presented with a data grid view of the result 
from an authors search.  After viewing the grid, the user may wish to filter the result to only show the "Active"
authors.  Sure, the "Active", "Inactive" and "Deleted" status values in the comboBox could be hard coded. 
But, in doing so, the program would have to be maintained when a new status value is added to the database. 
Also, the comboBox should only contain author status values that exist in the returned search result.  If the
search result includes only "Active" and "Inactive" authors, the comboBox should only contain those same
values (not “Deleted”).  If all of the possible author status values in the database were hard coded into the
comboBox, the user would be able to select the "Deleted" value, which in this case would display a blank
dataGrid. We don't want to confuse the user.
The following code dynamically loads the author status values into an array that is used as the dataProvider 
for the comboBox.
     // Use the authorsStatusArray as the dataProvider for the comboBox.

     public var authorsStatusArray : Array = populateAuthorsStatusArray(authorsArray);
     public function populateAuthorsStatusArray(authorsArray:Array):Array 
             var statusArrayHashMap : Object = new Object();
var statusArray : Array = new Array;
var n:int = authorsArray.length;
             for (var i:int = 0; i < n; i++)
                    if (statusArrayHashMap[authorsArray [i].status] == undefined)
                               statusArrayHashMap[authorsArray [i].status] = new Object();
                               statusArray.push(authorsArray [i].status);

 // The "All" value is used programmatically to un-filter (reset) the result in the dataGrid. 

return statusArray;
 Finally, filter the results in the dataGrid based upon the author status value that is selected in the comboBox. 
       public function filterAuthorsGrid():void
       public function authorsStatusFilter(item:Object):Boolean
               if (cboAuthorsStatusFilter.selectedItem != "All")
                       return item.status == cboAuthorsStatusFilter.selectedItem; 
               } else {
                        return true;
The mxml would look like this:


<mx:ComboBox id="cboAuthorsStatusFilter"
               dataProvider="{ authorsStatusArray }"
               change=" filterAuthorsGrid();"/>


That’s all there is to it!  Because the dataProvider for the dataGrid utilizes binding, the grid will display the filtered result automatically, when the user selects an author status value in the comboBox.  Please keep in mind, that this is just a tip and may contain some typos.  However, you should be able to grasp the concepts from the code.


Good Coding,


Tim Hoff

Posted by 나비 나비:D

BLOG main image
by 나비:D



분류 전체보기 (278)
Programming? (0)
----------------------------- (0)
나비의삽질 (5)
Application (177)
SQL (51)
Web (27)
etc. (14)
Omnia (0)
---------------------------.. (0)

글 보관함


«   2017/08   »
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    
Total : 870,708
Today : 10 Yesterday : 157