<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"
xmlns:nestedtreedatagrid="com.flexicious.nestedtreedatagrid.*"
creationComplete="group1_creationCompleteHandler(event)"
initialize="initApp()">
<fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
import com.flexicious.example.view.support.StyledPager;
import com.flexicious.nestedtreedatagrid.events.FlexDataGridEvent;
import com.flexicious.utils.UIUtils;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.core.UIComponent;
import mx.events.FlexEvent;
[Bindable(private var _employees:ArrayCollection=new ArrayCollection();
public function addFilterToUserName(filterName:String):void
{
dgMain.setFilterValue("userName",filterName);
}
public function initApp():void
{
if (ExternalInterface.available)
ExternalInterface.addCallback("addFilterToUserName", addFilterToUserName);
}
protected function group1_creationCompleteHandler(event:FlexEvent):void
{
_employees.addItem({province:"ON",
children:[
{city:"Toronto",cityrep:"Jack Jhonson",email:"jjhonson@email.com",actual:"23564"
,estimated:"300000",lastSale:new Date(),created:new Date()},
{city:"Kingston",cityrep:"Kenneth Parcel",email:"kparcel@email.com",actual:"22586"
,estimated:"250000",lastSale:new Date(),created:new Date()},
{city:"Kitchener",cityrep:"Tracy Jordan",email:"tjordan@email.com",actual:"156222"
,estimated:"250000",lastSale:new Date(),created:new Date()}
] });
_employees.addItem({province:"BC",
children:[
{city:"Vancouver",cityrep:"Ann Perkins",email:"aperkins@email.com",actual:"23564"
,estimated:"300000",lastSale:new Date(),created:new Date()},
{city:"Victoria",cityrep:"Ron Swansan",email:"rswanson@email.com",actual:"22586"
,estimated:"250000",lastSale:new Date(),created:new Date()},
{city:"Whistler",cityrep:"Shaun White",email:"swhite@email.com",actual:"156222"
,estimated:"250000",lastSale:new Date(),created:new Date()}
] });
dgMain.rebuild();
}
protected function dgMain_rendererInitializedHandler(event:FlexDataGridEvent):void
{
}
]]>
</fx:Script>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace nestedtreedatagrid "com.flexicious.nestedtreedatagrid.*";
.myGridStyle{
filterColors:#D8D8D8;
headerColors:#D8D8D8;
alternating-item-colors:#E6E6E6,#FFFFFF;
font-family:"calibri";
font-size:12;
header-style-name: headerstyle;
header-vertical-grid-line-color:#B2C1CD;
filter-style-name: headerstyle;
filter-vertical-grid-line-color:#B2C1CD;
header-draw-top-border:false;
header-horizontal-grid-lines:false;
filter-horizontal-grid-lines:false;
vertical-grid-lines:false;
pager-colors:#FFFFFF,#81F781;
pager-roll-over-colors:#FFFFFF,#81F781;
}
.headerstyle
{
border-alpha:"1.0";
font-weight:"normal"
}
</fx:Style>
<nestedtreedatagrid:FlexDataGrid dataProvider="{_employees}" width="100%" height="100%" id="dgMain" styleName="myGridStyle"
forcePagerRow="true" pagerRowHeight="40" rendererInitialized="dgMain_rendererInitializedHandler(event)" itemOpen="dgMain.refreshCells()" itemClose="dgMain.refreshCells()">
<nestedtreedatagrid:columnLevel>
<nestedtreedatagrid:FlexDataGridColumnLevel childrenField="children" enableFilters="true" headerHeight="22"
headerVerticalGridLineThickness="1" filterRowHeight="30"
pagerRenderer="com.flexicious.example.view.support.StyledPager" >
<nestedtreedatagrid:columns>
<nestedtreedatagrid:FlexDataGridCheckBoxColumn />
<nestedtreedatagrid:FlexDataGridColumn headerText="Province" dataField="province" filterControl="TextInput" filterOperation="BeginsWith" >
<nestedtreedatagrid:itemRenderer>
<fx:Component>
<mx:Canvas horizontalScrollPolicy="off">
<fx:Script>
<![CDATA[
import com.flexicious.nestedtreedatagrid.interfaces.IFlexDataGridCell;
public override function set data(val:Object):void{
super.data=val;
visible =IFlexDataGridCell(parent).level.nestDepth==1;
var isOpen:Boolean = IFlexDataGridCell(parent).level.grid.openItems.contains(val);
imgPersonIconClosed.source=isOpen?"/assets/images/Data Blue Move Up.png":"/assets/images/Data Blue Move Down.png"
}
]]>
</fx:Script>
<mx:Image top="0" left="2" id="imgPersonIconClosed" >
</mx:Image>
<mx:Label left="24" top="3" text="{data.province}" paddingRight="50"/>
</mx:Canvas>
</fx:Component>
</nestedtreedatagrid:itemRenderer>
</nestedtreedatagrid:FlexDataGridColumn>
<nestedtreedatagrid:FlexDataGridColumn headerText="" width="30" columnWidthMode="fixed">
<nestedtreedatagrid:itemRenderer>
<fx:Component>
<mx:Image source="/assets/images/Statistics Move Up.png"
scaleContent="false" useHandCursor="true" buttonMode="true" mouseChildren="false">
<fx:Script>
<![CDATA[
import com.flexicious.nestedtreedatagrid.interfaces.IFlexDataGridCell;
public override function set data(val:Object):void{
super.data=val;
visible =IFlexDataGridCell(parent).level.nestDepth==2;
if(data.city=="Kingston")
{
source="/assets/images/Statistics Move Down.png"
}
}
]]>
</fx:Script>
</mx:Image>
</fx:Component>
</nestedtreedatagrid:itemRenderer>
</nestedtreedatagrid:FlexDataGridColumn>
<nestedtreedatagrid:FlexDataGridColumn headerText="City" dataField="city" filterControl="TextInput" filterOperation="BeginsWith" />
<nestedtreedatagrid:FlexDataGridColumn headerText="City Rep" dataField="cityrep" filterControl="TextInput" filterOperation="BeginsWith"/>
<nestedtreedatagrid:FlexDataGridColumn headerText="Email" dataField="email" filterControl="TextInput" filterOperation="BeginsWith"/>
<nestedtreedatagrid:FlexDataGridColumn headerText="Actual" dataField="actual" filterControl="TextInput" filterOperation="BeginsWith">
<nestedtreedatagrid:itemRenderer>
<fx:Component>
<mx:Canvas horizontalScrollPolicy="off">
<fx:Script>
<![CDATA[
import com.flexicious.utils.UIUtils;
]]>
</fx:Script>
<mx:Image top="2" left="2" id="phoneIcon" source="@Embed('/../assets/images/Status Flag Green.png')" >
<fx:Script>
<![CDATA[
import com.flexicious.nestedtreedatagrid.interfaces.IFlexDataGridCell;
public override function set data(val:Object):void{
super.data=val;
visible =IFlexDataGridCell(parent).level.nestDepth==2;
phoneIcon.source=(data.city=="Kingston")?"/assets/images/Status Flag Red.png": "/assets/images/Status Flag Green.png";
}
]]>
</fx:Script>
</mx:Image>
<mx:Label left="20" text="{(data.actual)}" paddingRight="50" />
</mx:Canvas>
</fx:Component>
</nestedtreedatagrid:itemRenderer>
</nestedtreedatagrid:FlexDataGridColumn>
<nestedtreedatagrid:FlexDataGridColumn headerText="Estimated" dataField="estimated" filterControl="TextInput" >
<nestedtreedatagrid:itemRenderer>
<fx:Component>
<mx:Canvas horizontalScrollPolicy="off">
<fx:Script>
<![CDATA[
import com.flexicious.utils.UIUtils;
]]>
</fx:Script>
<mx:Image top="2" left="2" id="phoneIcon" source="@Embed('/../assets/images/Status Flag Green.png')" >
<fx:Script>
<![CDATA[
import com.flexicious.nestedtreedatagrid.interfaces.IFlexDataGridCell;
public override function set data(val:Object):void{
super.data=val;
visible =IFlexDataGridCell(parent).level.nestDepth==2;
}
]]>
</fx:Script>
</mx:Image>
<mx:Label left="20" text="{(data.estimated)}" paddingRight="50" />
</mx:Canvas>
</fx:Component>
</nestedtreedatagrid:itemRenderer>
</nestedtreedatagrid:FlexDataGridColumn>
<nestedtreedatagrid:FlexDataGridColumn headerText="Last Sale" dataField="lastSale" filterControl="DateComboBox" labelFunction="UIUtils.dataGridFormatDateLabelFunction"/>
<nestedtreedatagrid:FlexDataGridColumn headerText="Created" dataField="created" filterControl="DateComboBox" labelFunction="UIUtils.dataGridFormatDateLabelFunction"/>
</nestedtreedatagrid:columns>
<nestedtreedatagrid:nextLevel>
<nestedtreedatagrid:FlexDataGridColumnLevel reusePreviousLevelColumns="true"/>
</nestedtreedatagrid:nextLevel>
</nestedtreedatagrid:FlexDataGridColumnLevel>
</nestedtreedatagrid:columnLevel>
</nestedtreedatagrid:FlexDataGrid>
</s:Group>