<?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%" creationComplete="onCreationComplete()">

    <mx:RemoteObject id="dotNetRemoteObject" showBusyCursor="true" destination="fluorine" source="Site.Services.FlexService">
        <mx:method name="getEmployees" result="onEmployeesResult(event)"/>
        <mx:method name="getAllDepartments" result="onDepartmentsResult(event)"/>
    </mx:RemoteObject>

    <mx:Script>
        <![CDATA[
            import com.flexicious.controls.Spinner;
            import com.flexicious.export.ExportController;
            import com.flexicious.print.PrintController;
            import com.flexicious.grids.filters.PrintExportFilter;
            import com.sample.model.MyPrintExportFilter;
            import com.flexicious.grids.events.PrintExportDataRequestEvent;
            import com.flexicious.utils.UIUtils;
            import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;


            import com.flexicious.controls.MultiSelectComboBox;
            import com.sample.model.MyFilter;
            import com.sample.examples.support.SalaryRangeSlider;
            import com.sample.model.EmployeeGenerator;
            import com.sample.model.Employee;
            import com.flexicious.utils.DateRange;
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;
            import com.flexicious.grids.filters.Filter;
            import com.flexicious.grids.events.FilterPageSortChangeEvent;
            import com.flexicious.grids.filters.FilterExpression;
            import com.sample.SampleUIUtils;


            //we get this list from server on initial load
            [Bindable()]
            private var _serverDepartments:ArrayCollection;
            [Bindable()]
            private var _totalRecords:int;

            //fire off the server call on initial load
            private function onCreationComplete():void
            {
                //for the grid bound to the server, 
                //just get the first page of employees
                var filter:MyFilter=new MyFilter(null);
                filter.pageIndex=0;
                filter.pageSize=dgEmployeesServer.pageSize;

                //this will get the list of all departments
                dotNetRemoteObject.getAllDepartments();
                //just get the first page initially...
                dotNetRemoteObject.getEmployees(filter);
                

                
                

            }

            //This event is fired when the user changes the sort, page or filter 
            private function onFilterPageSortChange(event:FilterPageSortChangeEvent):void
            {
                //here we build our custom filter object and send it to the server
                dotNetRemoteObject.getEmployees(new MyFilter(event.filter));
                
                    
            }

            //This event is only fired when the user requests to print data that is currently
            //not loaded in the grid. It is only applicable when filterPageSortMode is set to 
            //'server', because in this mode, the grid only requests the current page of data
            //from the server.
            //For example, if the user asks to print pages 1-4 of a 10
            //page grid, and we're currently on page #4, on the client, we only have the records
            //from page #4. So we have to get the records from pages 1-4 from the server.
            //when this data comes back, we just set the grids.printExportData property, and the
            //print/export mechanism continues as usual.
            private function onPrintExportDataRequest(event:PrintExportDataRequestEvent):void
            {
                //here we build our custom filter object and send it to the server
                dotNetRemoteObject.getEmployees(new MyPrintExportFilter(event.filter as PrintExportFilter));
            }

            //Function to call when server call returns.
            private function onEmployeesResult(event:ResultEvent):void
            {
                if (event.result.isPrintExportResponse)
                {
                    //This response came back as a result of a print request. so set
                    // the print export data on the grid and have the print/export
                    //mechanism continue on its way
                    dgEmployeesServer.printExportData=event.result.records;

                }
                else
                {
                    //the dummy service just sends back the page to display, and the total records.
                    //what you send back from your service will need to reflect in the below
                    //two lines of code.
                    dgEmployeesServer.totalRecords=event.result.totalRecords;
                    dgEmployeesServer.dataProvider=event.result.records as ArrayCollection;
                    _totalRecords=event.result.totalRecords;
                    dgEmployeesServer.footerRow.redrawFooter();

                }
            }

            // Callback function that highlights in red 
            // all rows for >75,000
            public function myStyleFunc(data:Object, col:AdvancedDataGridColumn):Object
            {
                if (data["annualSalary"] > 75000)
                    return {color:0xFF0000};
                return null;
            }

            private function onDepartmentsResult(event:ResultEvent):void
            {
                _serverDepartments=event.result as ArrayCollection;
                //we need to call this to rebuild the filter row on
                //basis of updated data from the server.        
                dgEmployeesServer.refreshLayout();
            }
        ]]>
    </mx:Script>


    <mx:HBox width="100%">
        <mx:Label text="# Selected Ids: {dgEmployeesServer.selectedKeys.length}"/>
        <mx:Spacer width="100%"/>
        <mx:Button label="View Explanation For Example" click="UIUtils.openBrowserPopup('http://www.flexicious.com/Home/AdvancedFlexDataGridPagingFilterServer',
        'width=1024,height=768,lef t=0,top=0, toolbar=No,location=No,scrollbars=Yes,status=No,resizable=No,fullscreen=No')"/>
    </mx:HBox>

    <!--Datagrid with filterPageSortMode = server (Only the first page is loaded from the server (see onCreationCompelete.
         The grid then fires filterPageSortChange when the user requests another page or sort or filter.
         This is then handled by the server call and data is bound on server call return. See onFilterPageSortChange
         This grid also demonstrates how to handle the scenario when the user requests a print/export of data currently not loaded.. See onPrintExportDataRequest))-->
    <mx:TextArea width="100%" text="This example shows a ADVANCED Data Grid bound to a .NET implementation. The C# demonsrates the construction of Entity HQL on basis of the Flexicious filter. This grid also demonstrates how to handle the scenario when the user requests a print/export of data currently not loaded. (See onPrintExportDataRequest). It also shows how to use a Custom Pager Control."/>
    <grids:ExtendedAdvancedDataGrid showSpinnerOnFilterPageSort="true" enableFilters="true" enableCopy="true" enableFooters="true" 
        enablePreferencePersistence="true" preferencePersistenceKey="serverGridDotNet"
        enablePaging="true" id="dgEmployeesServer" height="271" pagerPosition="bottomMiddle" 
        pageSize="20" filterPageSortMode="server" 
        pagerRenderer="com.sample.examples.support.CustomPagerControl" 
        filterPageSortChange="onFilterPageSortChange(event)" width="100%" 
        filterRowHeight="30" styleFunction="myStyleFunc" 
        printExportDataRequest="onPrintExportDataRequest(event)">
        <grids:groupedColumns>
            <columns:SelectAllAdvancedCheckBoxHeaderColumn width="15" selectedKeyField="employeeId"/>
            <columns:ExtendedAdvancedDataGridColumn headerText="ID" dataField="employeeId" filterControl="NumericTextInput"/>
            <mx:AdvancedDataGridColumnGroup headerText="Name">
                <columns:ExtendedAdvancedDataGridColumn headerText="First Name" dataField="firstName" filterOperation="BeginsWith" filterControl="TextInput"/>
                <columns:ExtendedAdvancedDataGridColumn headerText="Last Name" dataField="lastName" filterOperation="BeginsWith" filterControl="TextInput"/>
            </mx:AdvancedDataGridColumnGroup>
            <columns:ExtendedAdvancedDataGridColumn 
                headerText="Department" dataField="department" filterOperation="Equals" 
                searchField="department.departmentId" sortField="department.departmentName"
                filterComboBoxDataProvider="{_serverDepartments}"
                filterComboBoxDataField="departmentId"
                filterComboBoxLabelField="departmentName"
                filterControl="MultiSelectComboBox"
                filterComboBoxWidth="150"
            />
            <columns:ExtendedAdvancedDataGridColumn headerText="Phone" dataField="phoneNumber" filterOperation="Contains" filterControl="TextInput"/>
            <columns:ExtendedAdvancedDataGridColumn headerText="Active" dataField="isActive" filterOperation="Equals" filterControl="TriStateCheckBox"/>
            <columns:ExtendedAdvancedDataGridColumn 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" footerLabel="Count: {_totalRecords}"/>
            <columns:ExtendedAdvancedDataGridColumn textAlign="right" labelFunction="SampleUIUtils.dataGridFormatCurrency" width="100" headerText="Annual Salary" dataField="annualSalary" footerOperation="average" footerLabel="Avg:" footerFormatter="{SampleUIUtils.currencyFormatterWithCents}" filterControl="NumericRangeBox"/>
        </grids:groupedColumns>
    </grids:ExtendedAdvancedDataGrid>
</mx:VBox>