Adobe AIR - Grid Scroll Bars Not Working

I have a pretty extensive project written in Javascript running in AIR that is almost completely based on AW. Didn't start out the way, but I kept finding ways to use the AW features.

I do, however, have one issue. If I call grid.refresh(), grid.clearRowModel() or do a table.request() anytime after the initial load of the data (javascript or XML data) the scroll bars becomes ineffective. They are visible, and they move with the mouse, but no scrolling takes place within the grid. If I select a cell and then arrow up or down within the grid, the grid will scroll, and the scroll bars follow.

This is most problematic when populating the grids with new data. Clearing the grid for re-use seems to inevitably require a call to grid.refresh(). I have tried to recreate my own refresh, (setRowCount(0), clearRowModel(), deleting rows one at a time, etc.) but the data, the row indices, the grid HTML get out of sync really fast, at some point, a call to grid.refresh() is required to get everything cleaned up and ready for re-use. All with no effect on getting the scroll bars 're-attached'.

This is easily demonstrable using the AW 'change datasets.htm' example that shows how to load two different datasets into the grid. The scroll bars are ineffective immediately, as stated above.

The only mod made to the example to run it in AIR is to add the line:
<script src="<yourpath>/AIRAliases.js" type="text/javascript"></script>.

And you only need a minimally edited descriptor file (application.xml) to run it.

Has anybody had any experience with or a work around for this?

Environment:
AW 2.5.5
Adobe AIR 1.5
Windows XP

Thanks!

Some additional info...
When grid.refresh() is called, I've traced the 'offending' code to browsers/dom.js -

if (AW.webkit || AW.opera){
AW.setOuterHTML = function(element, html) {
element.outerHTML = html;
};
}

During grid.refresh(), if I comment out 'element.outerHTML = html;' the scrolling is still active, but as soon as I let it 'write' the grid, the scrolling becomes inactive.

I guess the problem is that you are trying to use AW in AIR application sandbox which does not allow eval() and, as a consequence, disables event handlers assigned via innerHTML/outerHTML -

http://help.adobe.com/en_US/AIR/1.1/devappsflex/WS5b3ccc516d4fbf351e63e3d118666ade46-7f0e.html#WS5b3ccc516d4fbf351e63e3d118666ade46-7ef8

Because of these security restrictions AW can only work correctly in AIR within iframe container but not on the top-level application container (unless it is possible somehow to configure the application to allow eval() and related features).

Actually the only places where eval() is required is inline event handlers and formatting classes :-(

Alex,
You are correct, eval() is a problem in AIR, but since AW uses them very rarely, its one of the qualifying reasons I went with AW in AIR. And I haven't run into an eval() in this issue, so far. The eval() is allowed only when working with literals and the formatting is working.

Crazy thing is when I call grid.refresh() after I have set up the grid for the first time, and override table.response() to load the grid myself via setCellData(), the data appears like it should and the scroll bars work. If, however, I call grid.refresh() within the table.response() or anytime elsewhere during execution the scroll bars are ineffective forever.

So what is being done or setup differently between the initial grid.refresh() and the subsequent grid.refresh() calls?

From what I can trace down, in the subsequent grid.refresh()'s,

element.outerHTML = html;

'element' seems to be pointing one 'document.parentNode' higher compared to the initial grid.refresh(). And that may be by design, I just haven't completed mapping out the document DOM that is generated yet, but I'm getting there! Maybe AIR webkit !== webkit?

My sales pitch here...
Using AW with AIR and an AJAX model gives a developer the capabilities to create a product with the look and feel and performance of a desktop application with the benefits of a browser based application (deployment and support for starters.) You can get similar functionality via Flex and/or Flash within AIR, but with a far larger footprint and development cost, just in the tools alone.

My product is being used by my customer, but this issue keeps getting flagged in their testing and my workarounds aren't working all that well.

Out of the 10K lines of code and the 20+ grids (all loaded and available concurrently) that I am using with all of their various differences (tabs, buttons, combo boxes, real time data updating, formatting, images, event handlers, input boxes, check boxes, etc.) this is the only true AIR/AW issue that I have found that I can not resolve. I think this speaks well for AW as well as AIR.

Any insight you might have would be appreciated!

One possible solution is to run your app in iframe instead of top-level page.

Otherwise you need to replace all inline event handlers with addEventListener() calls. There are not so many places where inline events are used but the scroll event is one of them. I will try to make a modified scroll template and see if this works.

Try this patch -

document.body.addEventListener('scroll', function(event){
    if (event.target && event.target.getAttribute('onscroll') == 'AW(this,event)') {
        AW(event.target, event);
    }
});

This should fix grid scrolling in AIR. The same thing could be done with other inline events (at least with those bubbling up to the document level).

Alex,
Yep, the patch got the scroll bars working!

I'm assuming that AW is grabbing the onscroll when the mouse is over the grid itself. I don't see it bubbling up, and I'm trying to get the mousewheel to work with the mouse over the grid. It works just fine over the scroll bar.

Thanks for your efforts!

Chris

Alex,
Thanks again, we were able to release the project to QA today!

Chris