[FLEX-27279] Veritical scroll bar overlaps the column header when the horizontal scroll bar is shown

• Type: Bug
• Status: Open
• Priority: Major
• Resolution: Unresolved
• Affects Version/s: Adobe Flex SDK 4.1 (Release)
• Component/s: mx: DataGrid
• Environment: Affected OS(s): Windows; Affected OS(s): Windows XP; Browser: Other (specify version); Language Found: English
• Assignee: Unassigned
• Reporter: Adobe JIRA
• Created: 11/Apr/11 02:15
• Updated: 11/Apr/11 02:15

Description

Steps to reproduce:
1. Populate a DataGrid with at least 6 rows of data.
2. Set the width to 100% and the height to something where the vertical scroll bar is shown.
3. Resize the DataGrid so that the horizontal scroll bar is shown.

Actual Results:
The vertical scroll bar overlaps the column header (the height of the scroll bar is the same as the data grid).

Expected Results:
The vertical scroll bar should remain underneath the column header.

Workaround (if any):
I created a base class and overrode a few methods:

public class BaseDataGrid extends DataGrid
{
//--------------------------------------------------------------------------
//
// Constructor
//
//--------------------------------------------------------------------------

/**

• Constructor.
  *
• @langversion 3.0
• @playerversion Flash 9
• @playerversion AIR 1.1
• @productversion Flex 3
  */

public function BaseDataGrid()

{ super(); }

//--------------------------------------------------------------------------
//
// Variables
//
//--------------------------------------------------------------------------

/**

• @private
  */
  private var lockedColumnWidth:Number = 0;

//--------------------------------------------------------------------------
//
// Methods
//
//--------------------------------------------------------------------------

/**

• @private
  */
  private function calculateColumnSizes():void
  {
  var i:int;
  var n:int;
  var col:DataGridColumn;

lockedColumnWidth = 0;

if (visibleLockedColumns.length)
{
n = visibleLockedColumns.length;
for (i = 0; i < n; i++)

{ col = visibleLockedColumns[i]; lockedColumnWidth += col.width; }

}
}

//--------------------------------------------------------------------------
//
// Overriden Methods
//
//--------------------------------------------------------------------------

/**

• @inheritDoc

• */
  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
  {
  super.updateDisplayList(unscaledWidth, unscaledHeight);

calculateColumnSizes();

// If we have a vScroll only, we want the scrollbar to be below
// the header.
if (verticalScrollBar != null && verticalScrollBar.visible &&
headerVisible)
{
var hh:Number = header.height;
var bm:EdgeMetrics = borderMetrics;

if (roomForScrollBar(verticalScrollBar,
unscaledWidth-bm.left-bm.right,
unscaledHeight-hh-bm.top-bm.bottom))
{
// NOTE - DL: The following code fixes a bug in the standard
// mx:DataGrid where the vScrollBar is positioned on top of
// the DataGridHeader.
var verticalScrollBarY:Number;
var verticalScrollBarHeight:Number;

if(horizontalScrollBar && horizontalScrollBar.visible)

{ verticalScrollBarY = viewMetrics.top + hh; verticalScrollBarHeight = unscaledHeight - viewMetrics.top - viewMetrics.bottom - hh; }
else
{ verticalScrollBarY = viewMetrics.top + hh; verticalScrollBarHeight = unscaledHeight - viewMetrics.top - viewMetrics.bottom - hh; }

verticalScrollBar.move(verticalScrollBar.x, verticalScrollBarY );
verticalScrollBar.setActualSize(
verticalScrollBar.width,
verticalScrollBarHeight);
verticalScrollBar.visible = true;
headerMask.width += verticalScrollBar.getExplicitOrMeasuredWidth();

header.invalidateDisplayList();
DataGridHeader (header).needRightSeparator = true;

if (!DataGridHeader(header).needRightSeparator)

{ header.invalidateDisplayList(); DataGridHeader(header).needRightSeparator = true; }

}
else
{
if (DataGridHeader(header).needRightSeparator)

{ header.invalidateDisplayList(); DataGridHeader(header).needRightSeparator = false; }

}
}
}

/**

• @inheritDoc

• */
  override protected function adjustListContent(unscaledWidth:Number = -1,
  unscaledHeight:Number = -1):void
  {
  super.adjustListContent(unscaledWidth, unscaledHeight);

var ww:Number;
var hh:Number = 0;
var lcx:Number;
var lcy:Number;
var hcx:Number;

if (headerVisible)
{
if (lockedColumnCount > 0)

{ lockedColumnHeader.visible = true; hcx = viewMetrics.left + Math.min(DataGridHeader(lockedColumnHeader).leftOffset, 0); lockedColumnHeader.move(hcx, viewMetrics.top); hh = lockedColumnHeader.getExplicitOrMeasuredHeight(); lockedColumnHeader.setActualSize(lockedColumnWidth + 1, hh); DataGridHeader(lockedColumnHeader).needRightSeparator = true; DataGridHeader(lockedColumnHeader).needRightSeparatorEvents = true; }

header.visible = true;
hcx = viewMetrics.left + lockedColumnWidth + Math.min(DataGridHeader(header).leftOffset, 0);
header.move(hcx, viewMetrics.top);

// NOTE - DL: Ensures the width of the header is correct, even
// when a vScrollBar is shown.
ww = Math.max(0, DataGridHeader(header).rightOffset) - hcx - borderMetrics.right;
hh = header.getExplicitOrMeasuredHeight();
header.setActualSize(unscaledWidth + ww, hh);
if(header.mask)

{ header.mask.x = viewMetrics.right; }

}
}
}