<?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" 
               xmlns:controls="com.flexicious.controls.*"
               creationComplete="application1_creationCompleteHandler(event)" xmlns:functional="com.flexicious.example.view.functional.*"
               width="100%" height="100%">
    
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            private var xml:String="<grid variableRowHeight='true' editable='true' "+
                "titleIcon='http://www.flexicious.com/resources/images/device_red.png' "+
                "disabledField='disabled' enableSelectionCascade='true' enableFilters='true' enableMultiColumnSort='true' "+
                "enableAutoRefresh='true' width='100%' maxAutoAdjustHeight='300' enableDrag='true' "+
                "headerVerticalGridLineThickness='0' lockedSeperatorThickness='0'  "+
                " enableDynamicLevels='true'  forcePagerRow='true' "+
                "enableDefaultDisclosureIcon='false' filterExcludeObjectsWithoutMatchField='true'>"+
                "  <level childrenField='items' hierarchicalNestIndent='25'>"+
                "    <columns>"+
                "      <column type='checkbox' width='300' filterPaddingLeft='20'  headerPaddingLeft='20' excludeFromSettings='false' enableLabelAndCheckBox='true' headerText='Name' paddingRight='15' paddingLeft='20' enableRecursiveSearch='true' dataField='groupName' filterControl='TextInput' sortCaseInsensitive='true' filterOperation='BeginsWith'  enableHierarchicalNestIndent='true' enableExpandCollapseIcon='true' enableQuickView='true' showIconOnRowHover='true'  editable='false'/>"+
                "      <column headerText='Description' width='300' dataField='description' wordWrap='true' enableQuickView='true' paddingRight='10'  filterControl='TextInput' filterOperation='BeginsWith'  showIconOnCellHover='true' enableRecursiveSearch='true'/>"+
                "      <column headerText='Type' dataField='family' enableObjectSelectorItemEditor='true' filterControl='TextInput' filterOperation='BeginsWith' enableRecursiveSearch='true'/>"+
                "      <column headerText='IP Address'  dataField='address' filterControl='TextInput' filterOperation='EndsWith' editorStyleName='editableTextInput' editable='true' enableRecursiveSearch='true'/>"+
                "      <column headerText='Vendor' dataField='vendor' filterControl='TextInput' filterOperation='BeginsWith' enableRecursiveSearch='true'/>"+
                "    </columns>"+
                "  </level>"+
                "  <actions>"+
                "    <action code='edit' />"+
                "    <action code='delete' />"+
                "    <action code='separator' />"+
                "    <action code='acknowledge' name='Acknowledge' tooltip='Click Here to Acknowledge' requiresSingleSelection='true' iconUrl='contextualAcknowledge' disabledIconUrl='contextualAcknowledgeDisabled' />"+
                "    <action code='separator' />"+
                "    <action code='addRow' />"+
                "    <action code='separator' />"+
                "    <action code='acknowledge' name='Acknowledge' tooltip='Click Here to Acknowledge' requiresSingleSelection='true' iconUrl='contextualAcknowledge' disabledIconUrl='contextualAcknowledgeDisabled' />"+
                "  </actions>"+
                "  <filters>"+
                "    <filter description='Custom Filter 1'/>"+
                "    <filter description='Custom Filter 2'/>"+
                "    <filter description='Custom Filter 3'/>"+
                "  </filters>"+
                "</grid>"
            private var data:Object=[ { "id": "3190","disabled":false, "groupName": "United States", "description": "United States", "parentId": 0,
                "hasChildren": true, "isStatic": false, "type": "Customer", "iconClass": "Customer", 
                "items": [ 
                    { "id": "31469", "disabled":false,"groupName": "San Jose", "description": "null", "parentId": 3190, "hasChildren": true, "isStatic": false, "type": "Site", "iconClass": "Site", 
                        "items": [] }
                  , { "id": "31470", "groupName": "Chicago","disabled":false, "description": "null", "parentId": 3190, "hasChildren": true, "isStatic": false, "type": "Site", "iconClass": "Site", 
                      "items": [ { "id": "3144141", "groupName": "ohr-rtc-1","disabled":true, "description": "ohr-rtc-1 this is a really long description and should cause truncation", "parentId": 31470, "hasChildren": false, 
                          "isStatic": true, "address": "10.125.154.2", "type": "router", "iconClass": "router", "vendorName": "Flexicious", "items": [] }, 
                  { "id": "3144142", "groupName": "ohr-device-1","disabled":true, "description": "ohr-device-1", "parentId": 31470, "hasChildren": false, 
                      "isStatic": true, "address": "10.125.104.2", "type": "switch", "iconClass": "switch", "vendorName": "Flexicious", "items": [] }, 
                  { "id": "3144143", "groupName": "ohr-device-2", "description": "ohr-device-2","disabled":true, "parentId": 31470, "hasChildren": false, 
                  "isStatic": true, "address": "10.101.103.3", "type": "switch", "iconClass": "switch", "vendorName": "Flexicious", "items": [] }, 
              { "id": "3144144", "groupName": "ohr-device-3", "description": "ohr-device-3","disabled":true, "parentId": 31470, "hasChildren": false, 
                  "isStatic": true, "address": "10.121.105.3", "type": "switch", "iconClass": "switch", "vendorName": "Flexicious", "items": [] } ] }, 
                  { "id": "31471", "groupName": "Denver","disabled":false, "description": "null", "parentId": 3190, "hasChildren": true, "isStatic": false, 
                      "type": "Site", "iconClass": "Site", "items": [] } ] }, { "id": "3191", "groupName": "Canada", "description": "Canada"
                          ,"disabled":false, "parentId": 0, "hasChildren": true, "isStatic": false, "type": "Customer", "iconClass": "Customer", "items": [] } 
            ];
            
            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                mdg.buildFromXml(xml);
                mdg.dataProvider=data;
                mdg.enableHeightAutoAdjust=true;
                mdg.validateNow();
                mdg.expandAll();
            }
            
        ]]>
    </fx:Script>
    <mx:VBox paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" width="100%" height="100%" id="appContainer" >
        <mx:Text width="100%" text="This example demonstrates how to use the new enableLabelAndCheckBox feature, coupled with the enableDefaultDisclosureIcon and enableExpandCollapse to turn of the default disclosure icon, and embed label and CheckBox as well as the expand collapse Icon in a single cell"/> 
        <functional:MyDataGrid id="mdg" verticalGridLines="false" 
                               maxAutoAdjustHeight="400"
                               x="12" y="84" width="100%" 
                               height="100%"/>
    </mx:VBox>
</s:VGroup>