<?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"
               creationComplete="application1_creationCompleteHandler(event)"
               xmlns:controls="com.flexicious.controls.*" xmlns:functional="com.flexicious.example.view.functional.*"
               width="100%" height="100%">

    <fx:Script>
        <![CDATA[
            import mock.FlexiciousMockGenerator;
            
            import mx.events.FlexEvent;
            private var xml:String="<grid x='0' y='0' forcePagerRow='true' enableFilters='true' enableMultiColumnSort='true' builtInActions='sort,separator'  width='100%' height='100%' id='dgMain' styleName='FlexiciousGridStyle' enableSelectionCascade='true' enableSelectionBubble='true' enableTriStateCheckbox='true' showSpinnerOnFilterPageSort='true' enableDefaultDisclosureIcon='false'>"+
                "  <level childrenField='items'  enableFilters='false' nestIndent='20'>"+
                "    <columns>"+
                "      <column sortable='false' headerText='' excludeFromSettings='true' enableExpandCollapseIcon='true' width='25' columnWidthMode='fixed'/>"+
                "      <column type='checkbox'/>"+
                "      <column headerText='Employee Name' dataField='employeeName' filterControl='TextInput' filterOperation='BeginsWith'  />"+
                "      <column headerText='Title' dataField='title' filterControl='TextInput' filterOperation='BeginsWith'/>"+
                "      <column headerText='Email Address' dataField='emailAddress' filterControl='TextInput' filterOperation='BeginsWith'/>"+
                "      <column headerText='Department' dataField='department' filterControl='TextInput' filterOperation='BeginsWith'/>"+
                "      <column headerText='Hire Date' dataField='hireDate' filterControl='TextInput' filterOperation='BeginsWith' />"+
                "      </columns>"+
                "      <nextLevel>"+
                "      <level reusePreviousLevelColumns='false' childrenField='items'   headerVerticalGridLineThickness='1' >"+
                "        <columns>"+
                "           <column sortable='false' headerText='' excludeFromSettings='true' enableExpandCollapseIcon='true' width='50' columnWidthMode='fixed' expandCollapseIconLeft='25'/>"+
                "          <column type='checkbox'/>"+
                "          <column  dataField='project' headerText='Project' />"+
                "          <column dataField='roleOnProject' headerText='Role On Project'  />"+
                "          <column dataField='projectStartDate' headerText='Project Start'  />"+
                "          <column dataField='projectEndDate' headerText='Project End'  />"+
                "        </columns>"+
                "        <nextLevel>"+
                "          <level reusePreviousLevelColumns='false' childrenField='items' headerVerticalGridLineThickness='1'  >"+
                "            <columns>"+
                "                  <column sortable='false' headerText='' excludeFromSettings='true' width='75' columnWidthMode='fixed'/>"+
                "                 <column type='checkbox'/>"+
                "              <column dataField='timeSheetTitle' headerText='TimeSheet Title' />"+
                "              <column dataField='hours' headerText='Hours'  />"+
                "              <column dataField='rate' headerText='Rate'  />"+
                "              <column dataField='totalExpense' headerText='Total Expense'  />"+
                "            </columns>"+
                "          </level>"+
                "        </nextLevel>"+
                "      </level>"+
                "    </nextLevel>"+
                "  </level>"+
                "</grid>"
            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                dgMain.buildFromXml(xml);
                dgMain.dataProvider=FlexiciousMockGenerator.mockNestedData;
                dgMain.columnLevel.nextLevel.nextLevel.filterFunction=filterDeviceTypes;
                dgMain.enableHeightAutoAdjust=true;
                dgMain.validateNow();
                dgMain.expandAll();
            }
            public  function filterDeviceTypes(item:Object):Boolean{
                if(!cbStartup.selected && item.timeSheetTitle=='Time Sheet-1')
                    return false;
                if(!cbRunning.selected && item.timeSheetTitle=='Time Sheet-2')
                    return false;
                return true;
            }
        ]]>
    </fx:Script>
    
    <mx:HBox width="100%" height="100%" paddingLeft="10" paddingRight="10">
        <mx:VBox width="100%" height="100%">
            <mx:Text width="100%" 
                     text="This example demonstrates an external filter that can be tied into the Grid."/>
            <functional:MyDataGrid id="dgMain" editable="true" 
                                   width="100%" height="100%"
                                   verticalGridLines="false">
                
            </functional:MyDataGrid>
        </mx:VBox>
        <mx:Panel  height="100%" title="External Filter Panel">
            <mx:CheckBox label="Time Sheet-1" id="cbStartup" selected="true"/>
            <mx:CheckBox label="Time Sheet-2" id="cbRunning" selected="true"/>
            <mx:Button label="Search" click="dgMain.processFilter()"/>    
        </mx:Panel>
        
    </mx:HBox>
</s:VGroup>