How to draw border for selected row in datagrid?

[Pratap]

Hi,

Any idea how to draw border to selected row in datagrid??
only to selected row.

Thanks & Regards
Pratap

[Pratap]

no result till now :-(((((((

[JeTSpice]

You need to extend the item renderer to draw each cell. (I have such an extension if you need it)

However, it will draw to each cell in the row, so every cell will have a border. I didn't pursue it any further than that, but just drew a solid line at the top and bottom of each cell. It "looks" like there is a border around the row, but there are no sides to the border, only a top and bottom.

[tpang]

Hi, I'm dealing with the same problem....Instead of trying to highlight the selected row a different color, I want to just highlight it - so basically draw a border all around it. Can you please post your solution??

[flexexplorer]

tpang, you can highlight a particular cell by doing this:
1. Turn off all highlighting, like mouse over and mouse click. You can find how to
do this with google.
2. Listen for a mouse click event on a DataGrid.
3. Find the row and column value selected.
4. Look at DataGrid's listItems protected Array, which holds current item renderers.
Retrieve the item renderer using the row and column values from previous step,
and set the item renderer's opaqueBackground value to whatever you want the
highlight color to be.

This is not the most reusable solution, because it only works for DataGridItemRenderer item renderer.

Pratap, I would probably create my own itemRenderer,and listen for mouse click events, using which you'd draw a border around the item renderer. The only problem is getting the item renderer's width and height values. You can try using the item renderer's width and height values, but I don't that will work either. Try experimenting with different measurement values that are available.

[JeTSpice]

oy, i spoke too soon. the "styleFunction" property is only for advancedDataGrid. apologies.

[Peter Cowling]

A completely untested sketch, to be used as an itemrenderer to highlight individual cells:

package {

    import mx.controls.Label;
    import mx.controls.dataGridClasses.*;
    import mx.controls.DataGrid;
    import flash.display.Graphics;
    import mx.styles.StyleManager;

    [Style(name="backgroundColor", type="uint", format="Color", inherit="no")]
    
    public class BackgroundComp extends Label {

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
         super.updateDisplayList(unscaledWidth, unscaledHeight);
           
         var g:Graphics = graphics;
         g.clear();
         var grid1:DataGrid = DataGrid(DataGridListData(listData).owner);
         
             if (grid1.isItemSelected(data) || grid1.isItemHighlighted(data){

             g.beginFill(0xFF0000);
             g.drawRect(-2, -2, 1, 1);
             g.endFill();
         }
    }
    }
}