Calendar

July 2006
M T W T F S S
« Jun   Aug »
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Tag Cloud

Categories

Archives

Highest Rated

Most Viewed

Recent Posts

Recent Comments


« Korax Color Picker | Main | Uploader »

DataGrid Row Colors

By Rich Tretola | July 27, 2006Print This Post Print This Post
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...
206 views

Tim Hoff has posted a new datagrid component that can be used to conditionally change rowColors through CSS.  Here is the link: http://www.iepl.net/DataGridRowColorSample/DataGridRowColorSample.html

UPDATE: AS BOB STATED, THE LINK NO LONGER GOES TO THE FLEX SOURCE CODE, I WAS ABLE TO PULL THE ORIGINAL SOURCE FROM GOOGLE CACHE AND HAVE PROVIDED IT BELOW.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*"
  3.     layout="vertical" verticalAlign="middle" horizontalAlign="center" verticalGap="8"
  4.     creationComplete="initData();"
  5.     viewSourceURL="srcview/index.html">
  6.  
  7.     <mx:Style source="Styles.css"/>
  8.  
  9.     <mx:Script>
  10.         <![CDATA[
  11.  
  12.             import mx.collections.ArrayCollection;
  13.  
  14.             private var dgArray:Array = [
  15.             {account:'Test Account #01', startDate:'02/15/2005', status:'Active', accountBalance:21.55},
  16.             {account:'Test Account #02', startDate:'03/05/2006', status:'Delinquent', accountBalance:-52.29},
  17.             {account:'Test Account #03', startDate:'01/21/2004', status:'Closed', accountBalance:0},
  18.             {account:'Test Account #04', startDate:'12/31/2001', status:'Active', accountBalance:19.95},
  19.             {account:'Test Account #05', startDate:'03/05/2006', status:'Delinquent', accountBalance:-502.34},
  20.             {account:'Test Account #06', startDate:'01/21/2004', status:'Closed', accountBalance:0},
  21.             {account:'Test Account #07', startDate:'12/31/2001', status:'Active', accountBalance:19.95},
  22.             {account:'Test Account #08', startDate:'03/05/2006', status:'Deleted', accountBalance:0},
  23.             {account:'Test Account #09', startDate:'01/21/2004', status:'Closed', accountBalance:0},
  24.             {account:'Test Account #10', startDate:'12/31/2001', status:'Active', accountBalance:319.88},
  25.             {account:'Test Account #11', startDate:'09/01/2002', status:'Delinquent', accountBalance:-87.22}];
  26.  
  27.             [Bindable] private var dgArrayCollection:ArrayCollection;
  28.  
  29.             private function initData():void
  30.             {
  31.                 dgArrayCollection=new ArrayCollection(dgArray);
  32.             }
  33.  
  34.             private function startDateLabel(item:Object, column:DataGridColumn):String
  35.             {
  36.                 return df.format(item.startDate);
  37.             }
  38.  
  39.             private function accountBalanceLabel(item:Object, column:DataGridColumn):String
  40.             {
  41.                 return cf.format(item.accountBalance);
  42.             }
  43.  
  44.         ]]>
  45.     </mx:Script>
  46.  
  47.     <mx:CurrencyFormatter id="cf" precision="2"/>
  48.     <mx:DateFormatter id="df" formatString="MM/DD/YYYY"/>
  49.  
  50.     <mx:Label text="DataGrid rowColors Component Sample" width="100%"
  51.         color="white" fontSize="14" fontWeight="bold" textAlign="center"/>
  52.  
  53.     <local:RowColorDataGrid id="dg" dataProvider="{dgArrayCollection}"
  54.         width="500" height="310" borderThickness="2"
  55.         styleName="rowColorsDataGrid">
  56.         <local:columns>
  57.             <mx:Array>
  58.                 <mx:DataGridColumn width="160" paddingLeft="6"
  59.                     headerText="Account"
  60.                     dataField="account"/>
  61.                 <mx:DataGridColumn width="120" textAlign="center"
  62.                     headerText="Start Date"
  63.                     dataField="startDate"
  64.                     labelFunction="startDateLabel"/>
  65.                 <mx:DataGridColumn width="160" paddingLeft="6"
  66.                     headerText="Status"
  67.                     dataField="status"/>
  68.                 <mx:DataGridColumn width="80" textAlign="right"
  69.                     headerText="Balance"
  70.                     dataField="accountBalance"
  71.                     labelFunction="accountBalanceLabel"/>
  72.             </mx:Array>
  73.         </local:columns>
  74.     </local:RowColorDataGrid>
  75.  
  76.     <mx:Label text="(Right Click to View Source)" width="100%"
  77.         color="white" fontSize="11" fontWeight="bold" textAlign="center"/>
  78.  
  79. </mx:Application>

Share/Save/Bookmark

Topics: Components, Flex 2 |

2 Responses to “DataGrid Row Colors”

  1. Bob Says:
    July 5th, 2008 at 8:35 pm

    Sadly this is now a broken link as it goes no where near anything looking like Flex related coding.

    [Reply to this comment]
  2. everythingflex Says:
    July 6th, 2008 at 7:58 am

    Thanks Bob, please see my update above.

    [Reply to this comment]

Comments