What is the method to set different colors for alternate rows in a flex datagrid? So that two adjacent rows are identified easily?
Use alternatingItemColors
style. You can specify as many colors as you want in the array.
<mx:DataGrid id="dg" alternatingItemColors="[#449933, #994433]"
dataProvider="{[{d:'ASD', c:'$#'},{d:'WER', c:'^@'},{d:'VCB', c:'*!'}]}">
<mx:columns>
<mx:DataGridColumn dataField="d"/>
<mx:DataGridColumn dataField="c"/>
</mx:columns>
</mx:DataGrid>
This style takes effect only if no backgroundColor
is specified.
I used itemRenderer into DataGridColumn
<mx:DataGrid>
<mx:columns>
<mx:DataGridColumn dataField="A" itemRenderer="com.shels.table.MarkObject"/>
<mx:DataGridColumn dataField="B" />
</mx:columns>
</mx:DataGrid>
package com.shels.table {
import flash.display.Graphics;
import flash.geom.Matrix;
import mx.controls.Label;
import mx.controls.dataGridClasses.*;
public class MarkObject extends Label {
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
var g:Graphics = graphics;
g.clear();
var dField:String = DataGridListData(listData).dataField;
var f:int = DataGridListData(listData).columnIndex;
var c:int = 0xFFFFFF;
// c = parseInt( data[ "color"]);
// You can to use field values from record.
g.beginFill( c);
g.drawRect(0, 0, unscaledWidth, unscaledHeight);
g.endFill();
}
}
An alternative method is to use the DataItemBound(Object, DataGridItemEventArgs)
event handler.
The Object in this event signature is the DataGrid control, so recast it and use .DataGrid.Items.Count
modulo 2 to obtain a reference for when .DataGridItemEventArgs.Item
is an alternate row. I then created a css style for the alternate and changed .DataGridItemEventArgs.Item.CssClass
to that newly created style.
The advantage with this method is that other row color manipulation can be done after this for highlighting; the alternateItemColor
solution from above will always be the last css change before rendering, potentially overwriting any other highlighting.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.