Question

I am writing an application, using a datagrid. Various rows are differing colors based on the data. When the user selects a row the color becomes a few shades lighter.

Unfortunately one of the users doesn't think it is enough of a contrast and would like a more noticeable visual indicator. My two thoughts are to either;

A) Draw a rectangle around the entire row selected. B) Add a column with an image that I hide or make visible based on whether the row is selected.

I went down path A. for a while and got to the point where in the function;

override protected function drawHighlightIndicator

I was able to identify when I was looking at the specific row, but I couldn't determine how to draw the rectangle.

So I backtracked and looked into B. I am able to create an Item renderer with an arrow, but I can't figure out how to turn it on & off when selected. I have a click event in the main module, but no way to reference back to the Item renderer component.

I could set a value in the array collection, and do a refresh, which will probably work, but that tends to move the selected row to the top of the datagrid display area.

So if anyone can help I on A or B would appreciate it. This is a DataGrid, not an AdvancedDataGrid.

Answer 1

由于您使用的是mx.controls.DataGrid，覆盖drawHighlightIndicator可能如下图所示，它会在选择标记周围绘制1px红色边框：

protected function drawHighlightIndicator(
    indicator:Sprite, x:Number, y:Number,
    width:Number, height:Number, color:uint,
    itemRenderer:IListItemRenderer):void
{
    var width:int = unscaledWidth - viewMetrics.left - viewMetrics.right;
    var borderColor:uint = 0xff0000;
    var g:Graphics = Sprite(indicator).graphics;
    g.clear();
    g.beginFill(borderColor);
    g.drawRect(0, 0, width, height);
    g.beginFill(color);
    g.drawRect(1, 1, width - 2, height - 2);
    g.endFill();
    indicator.x = x;
    indicator.y = y;
}

in Flex/AS3 how can I highlight a datagrid row?

1 个答案: