How to increase horizontalgridline thickness in Flex 3 - actionscript-3

Question

i have set horizontal gridlines between rows of a datagrid to true. But i'm unable to increase its thickness. how to do it?

Answer 1

There are two ways you can go about solving this. If you check the docs, DataGrid has a horizontalSeparatorSkin style. The docs state that this is undefined by default, and in which case the grid uses it's drawHorizontalLine() method to draw the lines.
So you can either set the horizontalSeparatorSkin style to your own class that extends ProgramaticSkin or extend the DataGrid class and override the drawHorizontalLine() method. Both are fairly easy to do, here's app with an example of each one:
App
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*"
layout="vertical"
creationComplete="onCreationComplete()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
protected function onCreationComplete():void
{
var dp:ArrayCollection= new ArrayCollection([ { label: "one", value: 1 }, { label: "two", value: 2 }, { label: "three", value: 3 } ]);
grid.dataProvider=dp;
customGrid.dataProvider=dp;
}
]]>
</mx:Script>
<mx:DataGrid id="grid" horizontalGridLines="true" horizontalSeparatorSkin="{HorizontalSeparatorSkin}">
<mx:columns>
<mx:DataGridColumn dataField="label" />
<mx:DataGridColumn dataField="value"/>
</mx:columns>
</mx:DataGrid>
<local:CustomGrid id="customGrid" horizontalGridLines="true" horizontalGridLineColor="#FF0000">
<local:columns>
<mx:DataGridColumn dataField="label" />
<mx:DataGridColumn dataField="value"/>
</local:columns>
</local:CustomGrid>
</mx:Application>
Programatic skin (HorizontalSeparatorSkin.as):
package
{
import flash.display.Graphics;
import mx.skins.ProgrammaticSkin;
public class HorizontalSeparatorSkin extends ProgrammaticSkin
{
public function HorizontalSeparatorSkin()
{
super();
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
// draw a line at the bottom of the rectangle defined by
// unscaledWidth and unscaledHeight
var g:Graphics = this.graphics;
g.clear();
g.lineStyle(3, 0x00FF00); // change thickness / color here
g.moveTo(0,unscaledHeight);
g.lineTo(unscaledWidth, unscaledHeight);
}
}
}
Custom grid (CustomGrid.as):
package
{
import flash.display.Graphics;
import flash.display.Sprite;
import mx.controls.DataGrid;
import mx.controls.listClasses.ListBaseContentHolder;
public class CustomGrid extends DataGrid
{
public function CustomGrid()
{
super();
}
override protected function drawHorizontalLine(s:Sprite, rowIndex:int, color:uint, y:Number):void
{
var contentHolder:ListBaseContentHolder = s.parent.parent as ListBaseContentHolder;
var g:Graphics = s.graphics;
g.lineStyle(3, color); // change the thickness here
g.moveTo(0, y);
g.lineTo(contentHolder.width, y);
}
}
}