<?xml version="1.0" encoding="utf-8"?>
<mx:VBox  xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:grids="com.flexicious.grids.*" 
    xmlns:columns="com.flexicious.grids.columns.*" 
    xmlns:mate="http://mate.asfusion.com/" 
    width="100%" >
    <mx:Script>
        <![CDATA[
            import com.sample.examples.support.export.MyExportOptions;
            import com.sample.examples.support.print.MyPrintOptions;
            import com.flexicious.export.ExportOptions;
            import com.flexicious.export.ExportController;
            import com.flexicious.print.PrintOptions;
            import com.flexicious.print.PrintController;
            import com.flexicious.utils.UIUtils;
            import com.sample.SampleUIUtils;
            import com.sample.model.Employee;
            import com.flexicious.utils.DateRange;
            
            
        ]]>
    </mx:Script>
    <mx:HBox width="100%">
        <mx:Label text="# Selected Ids: {dgEmployees.selectedKeys.length}"/>
        <mx:Spacer width="100%"/>
        <mx:Button label="View Explanation For Example" click="UIUtils.openBrowserPopup('http://www.flexicious.com/Home/FlexDataGridPrintingExcelExport',
        'width=1024,height=768,lef t=0,top=0, toolbar=No,location=No,scrollbars=Yes,status=No,resizable=No,fullscreen=No')"/>
    </mx:HBox>
    <mx:TextArea width="100%"  text="This example shows all the print/export options that can be customized. It also demonsrates ALIVE PDF integration."/>
    <!--Datagrid with filterPageSortMode = client (All records loaded at once from the server)-->
    <grids:ExtendedDataGrid dataProvider="{Employee.getAllEmployees()}" enableFilters="true" enableCopy="true" 
        enableFooters="true" enablePaging="true" id="dgEmployees" height="271" pagerPosition="bottomMiddle" pageSize="50" width="100%"
        initialSortField="employeeId" enablePreferencePersistence="true" preferencePersistenceKey="customizedPrintGrid" pagerRenderer="com.sample.examples.support.CustomPagerControl" >
        <grids:columns>
            <columns:SelectAllCheckBoxHeaderColumn width="15" selectedKeyField="employeeId"/>
            <columns:ExtendedDataGridColumn headerText="ID" dataField="employeeId" filterOperation="Contains" filterControl="TextInput"/>
            <columns:ExtendedDataGridColumn headerText="First Name" dataField="firstName" filterOperation="BeginsWith" filterControl="TextInput"/>
            <columns:ExtendedDataGridColumn headerText="Last Name" dataField="lastName" filterOperation="BeginsWith" filterControl="TextInput"/>
            <columns:ExtendedDataGridColumn headerText="State" dataField="stateCode" filterRenderer="com.sample.examples.support.dynamicFilter.DynamicFilterControl"/>
            <columns:ExtendedDataGridColumn headerText="Department" dataField="department" filterOperation="Equals" 
                filterControl="MultiSelectComboBox" filterComboBoxBuildFromGrid="true" filterComboBoxWidth="150"/>
            <columns:ExtendedDataGridColumn headerText="Phone" dataField="phoneNumber" filterOperation="Contains" filterControl="TextInput"/>
            <columns:ExtendedDataGridColumn headerText="Active" dataField="isActive" filterOperation="Equals" filterControl="TriStateCheckBox"/>
            <columns:ExtendedDataGridColumn headerText="Hire Date" dataField="hireDate" filterControl="DateComboBox" labelFunction="SampleUIUtils.dataGridFormatDate" filterDateRangeOptions="{[DateRange.DATE_RANGE_THISQUARTER,DateRange.DATE_RANGE_LASTQUARTER,DateRange.DATE_RANGE_THISYEAR,DateRange.DATE_RANGE_LASTYEAR,DateRange.DATE_RANGE_CUSTOM]}" filterComboBoxWidth="150" 
                footerOperation="count" footerLabel="Count:" footerOperationPrecision="0"/>
            <columns:ExtendedDataGridColumn textAlign="right" labelFunction="SampleUIUtils.dataGridFormatCurrency" width="100" headerText="Annual Salary" dataField="annualSalary" footerOperation="average" footerLabel="Avg:" footerFormatter="{SampleUIUtils.currencyFormatterWithCents}" filterControl="NumericRangeBox"/>
        </grids:columns>
    </grids:ExtendedDataGrid>
    <mx:HBox>
    </mx:HBox>
    
</mx:VBox>