Search code examples
actionscript-3apache-flexdatagridflex4.5advanceddatagrid

Show border color in AdvancedDataGrid selected row in Flex


How can I show the borderColor of selected row in AdvancedDataGrid in Flex 4.6. You can see the following image for your reference.

enter image description here


Solution

  • Selected row is in the AdvancedDataGrid realized through dedicated Sprite, which is used as a canvas for drawing. To create border in the selection marker you need to create a custom class based on the AdvancedDataGrid and override protected method drawSelectionIndicator.

    The following example should produce a selection marker with 1px wide red border:

    public class GridWithBorderedSelectionMarker extends AdvancedDataGrid {
        override protected function drawSelectionIndicator(
                indicator:Sprite, x:Number, y:Number, width:Number,
                height:Number, color:uint,
                itemRenderer:IListItemRenderer):void {
            if (isRowSelectionMode()) {
                width = 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;
        }
    }