How to set alternate row color in flex datagrid?

What is the method of setting different colors for alternate rows in a flexible datagrid? So are two adjacent lines easily identifiable?

+3
source share
3 answers

Use style alternatingItemColors. 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 not specified backgroundColor.

+10
source

I used itemRenderer in a 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();
    }
}
+2
source

- DataItemBound(Object, DataGridItemEventArgs).

DataGrid, .DataGrid.Items.Count modulo 2, , .DataGridItemEventArgs.Item . css .DataGridItemEventArgs.Item.CssClass .

The advantage of this method is that after this, another color manipulation of the series is highlighted; the solution alternateItemColorabove will always be the last css change before rendering, which could potentially overwrite any other selection.

+1
source

Source: https://habr.com/ru/post/1722651/


All Articles