<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:nestedtreedatagrid="com.flexicious.nestedtreedatagrid.*"
               creationComplete="application1_creationCompleteHandler(event)" 
               xmlns:grids="com.cisco.xmp.xwt.treetable.grid.*" xmlns:controls="com.flexicious.controls.*" xmlns:flxs="http://www.flexicious.com/2011"
               width="100%" height="100%">


    <fx:Script>
        <![CDATA[
            import com.flexicious.example.view.support.CustomSpinner;
            import com.flexicious.nestedtreedatagrid.FlexDataGridColumnLevel;
            import com.flexicious.nestedtreedatagrid.FlexDataGridVirtualBodyContainer;
            import com.flexicious.nestedtreedatagrid.events.ExtendedFilterPageSortChangeEvent;
            import com.flexicious.nestedtreedatagrid.events.FlexDataGridEvent;
            import com.flexicious.nestedtreedatagrid.events.FlexDataGridVirtualScrollEvent;
            import com.flexicious.nestedtreedatagrid.valueobjects.VirtualScrollLoadInfo;
            
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            import mx.events.ScrollEvent;
            [Bindable]public var orgData:ArrayCollection = new ArrayCollection();
            
            
            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                loadInitialData();
            }
            
            protected function grid_virtualScrollHandler(event:FlexDataGridVirtualScrollEvent):void
            {
                var vbd:FlexDataGridVirtualBodyContainer =(dgMain.bodyContainer as FlexDataGridVirtualBodyContainer);
                txtOpen.text = vbd._openItemVerticalPositions.join("");
                txtRecords.text = event.recordsToLoad.join(""); 
                //in real life, we will send server request)
                for each(var vsli:VirtualScrollLoadInfo in event.recordsToLoad){                 
                    vsli.item = populateObject(new Object(),
                        vsli.item?vsli.item.Id:vsli.parent?vsli.parent.Id+":"+vsli.recordIndex.toString():vsli.recordIndex.toString(),
                        vsli.level);
                }
                vbd.setVirtualScrollData(event.recordsToLoad);
            }
            
            private function populateObject(obj:Object, x:String, lvl:FlexDataGridColumnLevel):Object
            {
                obj.Id = x;
                obj.Name = "Name " + x.toString();
                obj.Street = "Street" + x;
                obj.Title = "CEO" + x;
                obj.City = "City" + x;
                if(obj.Id!=3)
                    obj.numChildren=1000;
                
                return obj;
            }
            
            protected function grid_filterPageSortChangeHandler(event:ExtendedFilterPageSortChangeEvent):void
            {
                if(event.filter.level.nestDepth==1){
                    //this means the top level filter changed.
                    loadInitialData();
                }else{
                    //this means the user changed the sort at an inner level    
                    //this will be handled similar to a virtual scroll, just with updated sort information.
                }
            }
            
            private function loadInitialData():void
            {
                dgMain.gotoVerticalPosition(0);
                orgData.removeAll();
                for( var x:uint = 0; x <= 500; x++ )
                {
                    var obj:Object = new Object();
                    populateObject(obj,x.toString(),dgMain.columnLevel);
                    orgData.addItem(obj);
                }
                dgMain.dataProvider=orgData;
                dgMain.totalRecords=1000;
                
            }
            protected function grid_scrollHandler(event:ScrollEvent):void
            {
                dgMain.spinnerLabel = "Loading Record " + (dgMain.virtualBodyContainer.getTopLevelRecordIndex(event.position));
            }
            
        ]]>
    </fx:Script>
    <mx:HBox width="100%" height="100%">
        <mx:VBox width="50%" height="100%">
            <nestedtreedatagrid:FlexDataGrid id="dgMain" selectedKeyField="Id" filterPageSortMode="server" showSpinnerOnFilterPageSort="true"
                                             filterPageSortChange="grid_filterPageSortChangeHandler(event)" width="100%" 
                                             height="500" enableVirtualScroll="true"
                                             initialSortField="Id" virtualScroll="grid_virtualScrollHandler(event)"
                                             scroll="grid_scrollHandler(event)" 
                                             enableSelectionCascade="true"
                                             enableSelectionBubble="true"
                                             enableSelectionExclusion="true"
                                             enableTriStateCheckbox="true"
                                             clearSelectionOnDataProviderChange="false"
                                             spinnerFactory="{new ClassFactory(CustomSpinner)}"
                                             >
                
                
                <nestedtreedatagrid:columnLevel>
                    <nestedtreedatagrid:FlexDataGridColumnLevel childrenCountField="numChildren" itemLoadMode="server"
                                                                enableFooters="true" selectedKeyField="Id">
                        <nestedtreedatagrid:columns>
                            <nestedtreedatagrid:FlexDataGridCheckBoxColumn/>
                            <nestedtreedatagrid:FlexDataGridColumn dataField="Id" enableHierarchicalNestIndent="true"/>
                            <nestedtreedatagrid:FlexDataGridColumn dataField="Name" />
                            <nestedtreedatagrid:FlexDataGridColumn dataField="Street" />
                            <nestedtreedatagrid:FlexDataGridColumn dataField="Title" />
                            <nestedtreedatagrid:FlexDataGridColumn dataField="City" />
                            <!--<nestedtreedatagrid:FlexDataGridColumn headerText="Actions" width="200">
                                <nestedtreedatagrid:itemRenderer>
                                    <fx:Component>
                                        <mx:HBox horizontalGap="0" horizontalScrollPolicy="off" verticalScrollPolicy="off">
                                            <mx:Label paddingLeft="0" paddingRight="0" text="Edit" mouseChildren="false" buttonMode="true" useHandCursor="true" textDecoration="underline"/>
                                            <mx:Label paddingLeft="0" paddingRight="0" text="|"/>
                                            <mx:Label paddingLeft="0" paddingRight="0" text="Delete" mouseChildren="false" buttonMode="true" useHandCursor="true" textDecoration="underline"/>
                                                                        </mx:HBox>
                                    </fx:Component>
                                </nestedtreedatagrid:itemRenderer>
                            </nestedtreedatagrid:FlexDataGridColumn>-->
                        </nestedtreedatagrid:columns>
                        <nestedtreedatagrid:nextLevel>
                            <nestedtreedatagrid:FlexDataGridColumnLevel  enableFooters="true" childrenCountField="numChildren" itemLoadMode="server" selectedKeyField="Id" >
                                <nestedtreedatagrid:columns>
                                    <nestedtreedatagrid:FlexDataGridCheckBoxColumn/>
                                    <nestedtreedatagrid:FlexDataGridColumn dataField="Id" enableHierarchicalNestIndent="true"/>
                                    <nestedtreedatagrid:FlexDataGridColumn dataField="Name" />
                                    <nestedtreedatagrid:FlexDataGridColumn dataField="Street" />
                                    <nestedtreedatagrid:FlexDataGridColumn dataField="Title" />
                                    <nestedtreedatagrid:FlexDataGridColumn dataField="City" />
                                </nestedtreedatagrid:columns>
                                <nestedtreedatagrid:nextLevel>
                                    <nestedtreedatagrid:FlexDataGridColumnLevel selectedKeyField="Id" enableFooters="true">
                                        <nestedtreedatagrid:columns>
                                            <nestedtreedatagrid:FlexDataGridCheckBoxColumn/>
                                            <nestedtreedatagrid:FlexDataGridColumn dataField="Id" enableHierarchicalNestIndent="true"/>
                                            <nestedtreedatagrid:FlexDataGridColumn dataField="Name" />
                                            <nestedtreedatagrid:FlexDataGridColumn dataField="Street" />
                                            <nestedtreedatagrid:FlexDataGridColumn dataField="Title" />
                                            <nestedtreedatagrid:FlexDataGridColumn dataField="City" />
                                        </nestedtreedatagrid:columns>
                                    </nestedtreedatagrid:FlexDataGridColumnLevel>
                                </nestedtreedatagrid:nextLevel>    
                            </nestedtreedatagrid:FlexDataGridColumnLevel>
                        </nestedtreedatagrid:nextLevel>
                    </nestedtreedatagrid:FlexDataGridColumnLevel>
                </nestedtreedatagrid:columnLevel>
            </nestedtreedatagrid:FlexDataGrid>
            
        </mx:VBox>
        <mx:VBox>
            <mx:Text width="100%"
                     text="This example demonstrates the virtual scroll capabilities of the Ultimate DataGrid. As you scroll, the grid will dispatch an event that contains a list of the currently visible recods. This list can then be used to fetch the records from the database, and display. The draw as you scroll checkbox enables continuous server calls so the grid continues to draw as you scroll. This is not recommended for slower backends. There is a scroll delay, which is configureable as well, which controls the time gap to wait after the user pauses scrolling to issue the server request. With virtual scroll, you must enable selection exclusion. Since the data set is very large, selection cascade and select all will simply set flags on the selectionInfo object. The selectedObjects and selectedKeys no longer contain references to data that is selected. Instead, they contain the items that the user explicitly selected. unSelectedObjects will contain items that the user explicitly unselected. This helps maintain selection across very large lazy loaded datasets. When you set this flag to true, use the selectionInfo object to access the selection (or build a query on the server) to identify the objects user selected. The textbox below shows the details of the selection info object"/>
            <mx:HBox width="100%">
                <mx:CheckBox id="cbDrawAsYouScroll" label="Draw As you Scroll" selected="false" change="dgMain.enableDrawAsYouScroll=event.target.selected"/>
                <mx:CheckBox id="cbShowSpinner" label="Show Spinner" enabled="{!cbDrawAsYouScroll.selected}" selected="true" change="dgMain.showSpinnerOnFilterPageSort=event.target.selected"/>
                <mx:Label text="Scroll Delay (msec)" />
                <controls:TextInput watermark="Scroll Delay (msec)" enabled="{!cbDrawAsYouScroll.selected}" text="500" change="dgMain.virtualScrollDelay=parseInt(event.target.text)"/>
            </mx:HBox>
            <mx:Label text="Data To Display:"/>
            <mx:TextArea width="100%" height="150" id="txtRecords"/>
            <mx:Label text="Open Positions:"/>
            <mx:TextArea width="100%" id="txtOpen"/>
            <mx:Label width="100%"  text="Scroll Position: {dgMain.verticalScrollPosition.toString()}"/>
            <mx:Button label="Programatic Scroll Dispatch" click="dgMain.bodyContainer['doScroll'].apply()"/>
        </mx:VBox>
        
    </mx:HBox>
</s:VGroup>