3.2.0

Vertical scrollbar does not show in Multilined Grid

Should one have a grid with multilined cells, the vertical scrollbar does not appear if the height of all the rows is larger than that of the grid:

Here is the script:
var myColumns = ["Column 1", "Column 2"];
var myData = [
   ["Text","<strong>Heading</strong><br />Content<br />Content"],
   ["Text","<strong>Heading</strong><br />Content<br />Content"],
   ["Text","<strong>Heading</strong><br />Content<br />Content"],
   ["Text","<strong>Heading</strong><br />Content<br />Content"],
   ["Text","<strong>Heading</strong><br />Content<br />Content"],
   ["Text","<strong>Heading</strong><br />Content<br />Content"]
];
var grid = new AW.UI.Grid;

var str = new AW.Formats.String;
var html = new AW.Formats.HTML;

grid.setHeaderText(myColumns);
grid.setCellData(myData);
grid.setCellFormat([str, html]);

grid.setRowCount(myData.length);
grid.setColumnCount(myColumns.length);

grid.setSelectionMode("single-row");

grid.getRowTemplate().setClass("text", "wrap");

document.write(grid);


Here is the CSS:
.aw-control-grid {font: menu;width: 100%; height: 350px; border: 1px inset; background: white}
.aw-grid-column {border-right: 1px solid threedlightshadow;}
.aw-grid-cell {border-right: 1px solid threedlightshadow;}
.aw-grid-row {border-bottom: 1px solid threedlightshadow;}
.aw-row-selector {text-align: center}
.aw-grid-row {
  _overflow: visible;
}

.aw-grid-row.gecko {
  display: -moz-box;
  height: auto;
  width: auto;
  min-width: 100%;
}
.aw-grid-control .aw-item-text {
    vertical-align: top;
}


How can I get the scrollbar to display?
Neil Craig
June 15,
Neil,

AW 2.0 calculates the scrolling range assuming all rows are of the same height. If you want rows to have variable height you also need to adjust scrollbars handling code.
Alex (ActiveWidgets)
June 16,
I suppose I need to use the AW.Scroll.Bars class, but how would I go about it?
Neil Craig
June 19,
I tried setting the scroll property like so:
grid.setScrollProperty('bars','both');
grid.refresh();


I have also looped through the rows of the grid, determining their row heights (getRowHeight) and then set the Scroll Height to that of the sum of row heights like so:
var scrollHeight = 0;
for (i = 0; i < grid.getRowCount(); i++) {
  scrollHeight += grid.getRowHeight(i);
}
grid.setScrollProperty('height',scrollHeight);
grid.refresh();


But it did not work. Did you mean I have to change the actual source of the ActiveWidgets release?
Neil Craig
June 19,
First you should make getRowHeight method returning actual row height (if you set overflow:visible or height:auto on rows). And also disabling grids own code for calculating scroll range which may otherwise overwrite your value.
Alex (ActiveWidgets)
June 19,

This topic is archived.

See also:


Back to support forum