Flex execution timeout in AdvancedDataGrid

Question

Hi,

I've a problem, I'm using an AdvancedDataGrid .

It loads about 3000 records with about 20 columns. I constantly get Flex execution timeout because the grid executes a lot inside LayoutManager. How can I make it asyncronousely or faster at all?

Answer 1

Load the data a chunk at a time? Say slightly more than however many rows are shown visually. That way you get the perceived performance that it renders quickly.

3000 records is a lot to be loading in one go it has to be said...

Answer 2

Use Datagrid pagination.

http://gurufaction.blogspot.com/2007/02/flex-datagrid-paging-example-with.html http://stackoverflow.com/questions/1893350/how-does-flex-3-datagrid-paging-work

or something like this

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="InitApp()" xmlns:MyComp="*">
<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.events.ItemClickEvent;
        [Bindable]
        public var myData:ArrayCollection = new ArrayCollection();
        public var orgData:ArrayCollection = new ArrayCollection();
        [Bindable]
        public var nav:ArrayCollection = new ArrayCollection();
        private var index:int = 0;
        private var page:int = 25;      
        private var paging:Boolean = true;

        private function InitApp():void {
            for( var x:uint = 1; x <= 500; x++ ) {
                var obj:Object = new Object();
                obj.Id = x.toString();
                obj.Name = "Column " + x.toString();
                obj.Street = "5555 Street";
                obj.Title = "CEO";
                obj.City = "El Paso";
                orgData.addItem(obj);
            }
            refreshDataProvider(0);
        }

        private function navPage(d:int):void {
            index += d;
            refreshDataProvider(index); 
        }

        private function refreshDataProvider(start:int):void {
            if (paging == true) {
                page = 25;
                myData = new ArrayCollection(orgData.source.slice(start,start+page));
            }
            else {
            index = 0;
                page = 500;
                myData = new ArrayCollection(orgData.source);               
            }
            down.enabled = index > 0;
            up.enabled = index + page < orgData.length;
            lbl.text = index.toString() + ' to ' + (index + page).toString() + ' of ' + orgData.length;             
        }

        private function togglePaging():void {
            paging = !paging;
            toggle.label = paging.toString();
            refreshDataProvider(index);
        }

]]>
</mx:Script>
    <mx:DataGrid id="dg" dataProvider="{myData}" width="510" height="202"></mx:DataGrid>
    <mx:Button x="10" y="210" label="&lt;" click="navPage(-25);" id="down"/>
    <mx:Button x="216" y="210" label="&gt;" click="navPage(25);" id="up"/>
    <mx:Label x="58" y="212" text="page" width="150" id="lbl"/>
    <mx:Button x="264" y="210" label="true" id="toggle" click="togglePaging();"/>

</mx:Application>