Odd side-effect of code for disabling horizontal scroll

Hi Alex,

To remove any horizontal scroll you kindly recommended using:
.aw-bars-spacer {width: 0px!important;}
obj.setScrollBars("vertical");
obj.onScrollBarsChanging = function(){return 1}; //cancel change

I've just discovered that the above code seems to have an odd side effect (in 2.5.5 and earlier). Here's what I mean.
1. Use the above code with a grid that has sufficient items to require a vertical scrollbar.
2. Scroll down vertically so the last item in the list comes into view.
3. Select that last item. Oddly, a new blank row appears under that last item, and the onRowClicked event doesn't fire. I have to select that last item a second time to get the onRowClicked event to fire.

Things work normally when I remove the above code.

Any thoughts? Much appreciated.

In case it helps, here's an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<link href='aw.css' type='text/css' rel='stylesheet'></link>
<script src='aw.js' type='text/javascript'></script>
</head>
<body>
<span id="grid1"></span>
<script type="text/javascript">
var myData = [
["aa", "Text", "Number", "Text" ],
["bb", "Text", "Number", "Text" ],
["cc", "Text", "Number", "Text" ],
["dd", "Text", "Number", "Text" ],
["ee", "Text", "Number", "Text" ],
["ff", "Text", "Number", "Text" ],
["gg", "Text", "Number", "Text" ],
["hh", "Text", "Number", "Text" ],
["ii", "Text", "Number", "Text" ],
["jj", "Text", "Number", "Text" ],
["kk", "Text", "Number", "Text" ]
];
</script>
<style type=text/css>
#grid1 {height: 100%; font: Tahoma;}
#grid1 .aw-grid-row {border-bottom: 1px solid threedlightshadow;}
#grid1 .aw-mouseover-row {background-color: gainsboro}
#grid1 .aw-cells-selected, .aw-rows-selected {color: #fff!important;background: #396FA2!important;}
#grid1 .aw-rows-selected .aw-grid-cell {background: none!important;}
#grid1 .aw-bars-spacer {width: 0px!important;}
.aw-strict #grid1 .aw-grid-cell {padding-right: 3px;}
.aw-strict #grid1 .aw-grid-row {padding-bottom: 3px;}
#grid1 .aw-column-0 {display: none!important;}
#grid1 .aw-column-1 {width:80px; text-align: left;}
#grid1 .aw-column-2 {width:80px; text-align: left;}
#grid1 .aw-column-3 {width:80px; text-align: left;}
</style>
<script type="text/javascript">
var string = new AW.Formats.String;
var number = new AW.Formats.Number;
number.setTextFormat("");
number.setErrorText(" ");
var obj = new AW.UI.Grid;
obj.setId("grid1");
obj.setSelectionMode("single-row");
var myColumns = ["1", "2", "3", "4"];
obj.setCellFormat([string, string, number, string]);
obj.setColumnCount(4);
obj.setHeaderText(myColumns);
obj.setHeaderHeight(20);
obj.setCellText(myData);
obj.setControlSize(260,200);
var intArrayLength = myData.length;
obj.setVirtualMode(false);
obj.setRowCount(intArrayLength);

// ----------------------------------------
// Disable horizontal scroll
// ----------------------------------------
obj.setScrollBars("vertical");
obj.onScrollBarsChanging = function(){return 1};

obj.refresh();
obj.onRowClicked = function(event, index) {alert(obj.getCellText(0,index));}
</script>
</body>
</html>

Justin

September 27,

I found a workaround:
obj.onScrollBarsChanging = function(){obj.setScrollBars("vertical");return 1};

Carlos

September 27,

Thanks very much Carlos. That does fix the problem.

Unfortunately, with the workaround the disabled horizontal scrollbar is always displayed. I'm hoping to both disable and hide it. Any thoughts?

Maybe Alex knows another workaround that both disables and hides the horizontal scrollbar, or knows how to hide the disabled horizontal scrollbar when using the workaround from Carlos.

Thanks again.

Justin

September 27,

Actually, it seems the workaround doesn't seem to work where I have 2 or more grids on the page. It works fine on the first grid, but confuses the 2nd grid etc.

Justin

September 27,

Further news - it seems that I just apply the workaround from Carlos to the first grid on a page, and it then applies also to any other grids on the page.

It would still be great if anyone knows of a way to both disable and hide the horizontal scrollbar, in a way that doesn't cause the above-mentioned problem with the last item in the list.
Thanks.

Justin

September 28,

Are you sure you have added all three elements needed to the two grids?

i.e.:

#grid1 .aw-column-0 {display: none!important;}
#grid2 .aw-column-0 {display: none!important;}

obj.setScrollBars("vertical");
obj2.setScrollBars("vertical");

obj.onScrollBarsChanging = function(){obj.setScrollBars("vertical");return 1};
obj2.onScrollBarsChanging = function(){obj2.setScrollBars("vertical");return 1};

Note the 'grid2' ID . And you can also use 'this' on the last tho lines, i.e.
obj.onScrollBarsChanging = function(){this.setScrollBars("vertical");return 1};
obj2.onScrollBarsChanging = function(){this.setScrollBars("vertical");return 1};

HTH

Carlos

September 28,

This seems to be an artefact of setting the scrollbars to vertical only. If you make the height of the grid larger (i.e. obj.setSize(260,223) or more), the spacer for the vertical scrollbar remains. However, it doesn't have the problem on the last line.

Regardless of whether is a bug with the AW code, it might be better to go back to first principles and ask what you're actually trying to do. Depending on what that is, there may be a better solution (like using an extended grid or some other solution).

Anthony

September 28,

Upps!
the two styles should be:
#grid1 .aw-bars-spacer {width: 0px!important;}
#grid2 .aw-bars-spacer {width: 0px!important;}

but you also need to lock (disable) column resizing , otherwise you'll get a "stack overflow" error.

I agree with Anthony that an extended grid with fixed columns could be a better solution ( although would increase the code weigh ) for this case.

Carlos

September 28,

Thanks Carlos (and Anthony).

Well spotted Carlos. I had taken out "obj.setScrollBars("vertical");" when I added in "obj.onScrollBarsChanging = function(){obj.setScrollBars("vertical");return 1};". I added that first line of code back, and that seems to have fixed things.

Thanks very much for your help. Much appreciated.
Justin

Justin

September 28,

Forget all about "stack overflow" error.
My bad doing fast-testing.
You can resize columns normally.
Thank you Justin

Carlos

September 28,

Sorry for my erratic "?¿%&/Ç%)(/=(... series.

to avoid "stack overflow" error. you must change the word "Changing" with "Changed". i.e.:
replace the line
obj.onScrollBarsChanging = function(){this.setScrollBars("vertical");return 1};
with:
obj.onScrollBarsChanged = function(){this.setScrollBars("vertical");return 1};

Carlos

September 28,

One more wrinkle - I've been using the above suggestions successfully, but just noticed that the line:

obj.onScrollBarsChanged = function(){obj.setScrollBars("vertical");return 1};

prevents me scrolling a row into view with the following line:

window.setTimeout(function(){obj.setCurrentRow(intSetIndex);},600);

The scroll that should be caused by the second line just doesn't happen (presumably because the first line is disabling the code-driven scrolling). The scroll works fine if I comment out the first line (although that reveals the disabled horizontal scroll bar).

I'll keep investigating, and post any solution I find that gives me both a hidden horizontal scrollbar and a "scroll into view". Any other suggestions would be much appreciated.

Justin

Justin

October 6,

You can also try with just left (horiz) srolling in combination with Error to avoid the "too much recursion" issue. ( sorry , I can't test it right now)
obj.onScrollLeftChanged = function(){obj.setScrollBars("vertical");return 1};
obj.onScrollLeftChangedError = function(){return 1};
HTH

Carlos

October 7,

This topic is archived.

Odd side-effect of code for disabling horizontal scroll

See also:

Search

New Data Grid

Version 2