Love or loath data-grids they're a quick and useful way to show a view on the web. They have to be used with caution though and whether you use them at all or not is down to the requirements of each application.

One shortcoming of data-grids is in dealing with really big views of data. Say, like 40,000 documents, as in the Fake Names address book. Here we wouldn't want to load all that data in one go.

One option for large datasets is to use paging - where the user see a "Page X of Y" message and navigational buttons. Solves the problem but not particularly user-friendly are they.

A much better option is to use "lazy loading", which is what the following Flex DataGrid demo does. As you can see from the scrollbar it's a large view (it's feeding off the 40,000 docs in the NAB I mentioned earlier). However, it has only actually loaded the first 100 documents.

If you use the scroll-bar arrow (avoid dragging the scrollbar for best results) to move to the end of the first 100 documents you should then see a flicker as the next set of 100 documents loads from the server. Then drag the scrollbar right down to the very bottom and see the very last set load (all those in-between won't load - until needed).

Cool, no?

It uses Flex 4's new AsyncListView, which James Ward talked about here. What you see above is his code re-worked to adapt to use with Domino's URL rules and using XML rather than AMF, which is something I'd like to look in to using with Domino at some point if I get the chance.

Shortcomings

As with any paged set of data it all falls down when you try and sort a column or filter the data. In both cases you'd need to over-ride the defaults for these events to force a trip back to the server. Probably possible, but I don't have time to look in to it.

The Code

The Flex code used is exactly the same as on James Wards' site but I replaced the RemoteObject with an HTTPService, like this one:

<s:HTTPService url="http://www.codestore.net/fakenames.nsf/PeopleXML?OpenView" 
        resultFormat="e4x" id="ro" method="GET"/>

And I modified the code that handle sending/processing date requests to look like this:

var asyncToken:AsyncToken = ro.send({'start':startIndex+1, 'count':numItemsToFetch});

asyncToken.addResponder(new AsyncResponder(function result(event:ResultEvent, token:Object = null):void {
        var people:XMLList = event.result.person as XMLList;
                                                
        for (var i:uint = 0; i < people.length(); i++){
                items.setItemAt(peoplei, token + i);
        }
        }, 
        function fault(event:FaultEvent, token:Object = null):void {
                trace(event.fault.faultString);
        },
        startIndex)
);

The rest of the code you can get from James' site. Enjoy.