<?xml version="1.0" encoding="utf-8"?>
<mx:HBox 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.*" xmlns:controls="com.flexicious.controls.*">
    <fx:Script>
        <![CDATA[
            import com.flexicious.example.model.common.ReferenceData;
            import com.flexicious.example.model.common.SystemConstants;
            import com.flexicious.example.model.organizations.Organization;
            import com.flexicious.example.utils.ExampleUtils;
            import com.flexicious.nestedtreedatagrid.events.FlexDataGridItemEditEvent;
            import com.flexicious.nestedtreedatagrid.interfaces.IFlexDataGridCell;
            import com.flexicious.utils.UIUtils;
            
            import mock.FlexiciousMockGenerator;
            
            import mx.controls.Alert;
            import mx.controls.DateField;
            
            
            //here we validate the user input, and ensure that only valid  
            protected function flexdatagridcolumn1_itemEditValueCommitHandler(event:FlexDataGridItemEditEvent):void
            {
                if(event.column.dataField=="headquarterAddress.city.name"){
                    var txt:String=event.itemEditor["text"];
                    var found:Boolean=false;
                    for each(var city:ReferenceData in SystemConstants.cities){
                        if(city.name==txt){
                            (event.item as Organization).headquarterAddress.city=city;
                            found=true;
                            break;
                        }
                    }
                    if(!found){
                        Alert.show("Invalid City Entered: " + txt);
                    }
                    event.preventDefault();//we do this, so when the value is entered, we validate and apply ourselves, dont let the grid apply it.. 
                }
                
            }
            //or use the validator function....
            private function validateFutureDate(editor:DateField):Boolean{
                if(editor.selectedDate<new Date()){
                    Alert.show("Please choose a date in the future.");
                    return false
                }
                return true;
            }
            private function getRowDisabled(cell:IFlexDataGridCell, data:Object):Boolean{
                if(data.legalName=='Adobe Systems'){
                    return true;
                }
                return false;//do not disable by default.
            }

        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <mx:VBox width="100%" height="100%">
        <nestedtreedatagrid:FlexDataGrid enableDrag="true" rowDisabledFunction="getRowDisabled" editable="true" enableFilters="true" 
                                         enableFooters="true" id="grid" width="100%" height="100%" 
                                         dataProvider="{FlexiciousMockGenerator.instance().getFlatOrgList()}" 
                                         itemEditValueCommit="flexdatagridcolumn1_itemEditValueCommitHandler(event)" preferencePersistenceKey="editableCells">
            <nestedtreedatagrid:columns>
                <nestedtreedatagrid:FlexDataGridCheckBoxColumn />
                <nestedtreedatagrid:FlexDataGridColumn dataField="id" headerText="ID" filterControl="TextInput" 
                                                       editable="true" selectable="true" truncateToFit="true"/>
                <nestedtreedatagrid:FlexDataGridColumn dataField="legalName" headerText="Legal Name" truncateToFit="true" selectable="true"
                                                       editable="true" />
                <nestedtreedatagrid:FlexDataGridColumn dataField="headquarterAddress.line1" headerText="Address Line 1" footerLabel="Count:" 
                                                       footerOperation="count"
                                                       editable="true"/>
                <nestedtreedatagrid:FlexDataGridColumn dataField="headquarterAddress.line2" headerText="Address Line 2"/>
                <nestedtreedatagrid:FlexDataGridColumn dataField="headquarterAddress.city.name" headerText="City" filterControl="MultiSelectComboBox" filterComboBoxBuildFromGrid="true" filterComboBoxWidth="150"
                                                       editable="true" />
                <nestedtreedatagrid:FlexDataGridColumn dataField="headquarterAddress.state.name" headerText="State" 
                                                       filterControl="MultiSelectComboBox" filterComboBoxBuildFromGrid="true" 
                                                       filterComboBoxWidth="150" editable="true" itemEditorManagesPersistence="true"
                                                       >
                    <nestedtreedatagrid:itemEditor>
                        <fx:Component>
                            <controls:ComboBox dataProvider="{SystemConstants.states}" dataField="code" labelField="name" 
                                               creationComplete="selectedValue=((parent as FlexDataGridContainerBase).grid.getCurrentEditingCell()).rowInfo.data.headquarterAddress.state.code"
                                               change="cbxState_changeHandler(event)">
                                <fx:Script>
                                    <![CDATA[
                                        import com.flexicious.example.model.common.SystemConstants;
                                        import com.flexicious.nestedtreedatagrid.FlexDataGridContainerBase;
                                        import com.flexicious.nestedtreedatagrid.cells.FlexDataGridCell;
                                        
                                        import mx.events.ListEvent;
                                        
                                        protected function cbxState_changeHandler(event:ListEvent):void
                                        {
                                            (parent as FlexDataGridContainerBase).grid.getCurrentEditingCell().rowInfo.data.headquarterAddress.state=selectedItem
                                        }
                                        
                                    ]]>
                                </fx:Script>
                            </controls:ComboBox>
                        </fx:Component>
                    </nestedtreedatagrid:itemEditor>
                </nestedtreedatagrid:FlexDataGridColumn>
                <nestedtreedatagrid:FlexDataGridColumn dataField="headquarterAddress.country.name" headerText="Country" filterControl="MultiSelectComboBox" filterComboBoxBuildFromGrid="true" filterComboBoxWidth="150"/>
                <nestedtreedatagrid:FlexDataGridColumn dataField="annualRevenue" headerText="Annual Revenue" textAlign="right" headerAlign="center" 
                                                       footerLabel="Avg:" footerOperation="average" footerAlign="center" footerOperationPrecision="2" 
                                                       footerFormatter="{ExampleUtils.globalCurrencyFormatter}" 
                                                       labelFunction="UIUtils.dataGridFormatCurrencyLabelFunction" editable="true"/>
                <nestedtreedatagrid:FlexDataGridColumn dataField="numEmployees" headerText="Num Employees" textAlign="right" footerLabel="Avg:" 
                                                       footerOperation="average" footerOperationPrecision="2" footerFormatter="{ExampleUtils.globalCurrencyFormatter}"
                                                       labelFunction="UIUtils.dataGridFormatCurrencyLabelFunction" editable="true"/>
                <nestedtreedatagrid:FlexDataGridColumn dataField="earningsPerShare" headerText="EPS" textAlign="right" 
                                                       footerLabel="Avg:" footerOperation="average" footerFormatter="{ExampleUtils.globalCurrencyFormatter}" 
                                                       labelFunction="UIUtils.dataGridFormatCurrencyLabelFunction" editable="true"/>
                <nestedtreedatagrid:FlexDataGridColumn dataField="lastStockPrice" headerText="Stock Price" 
                                                       textAlign="right" footerLabel="Avg:" footerOperation="average" 
                                                       footerOperationPrecision="2" footerFormatter="{ExampleUtils.globalCurrencyFormatter}" 
                                                       labelFunction="UIUtils.dataGridFormatCurrencyLabelFunction" editable="true"/>
                <nestedtreedatagrid:FlexDataGridColumn dataField="addedDate" headerText="Added Date" 
                                                       itemEditor="{new ClassFactory(mx.controls.DateField)}"  
                                                       editable="true" editorDataField="selectedDate" itemEditorValidatorFunction="validateFutureDate"/>
                
                
            </nestedtreedatagrid:columns>
        </nestedtreedatagrid:FlexDataGrid>
        
        
    </mx:VBox>
    
</mx:HBox>