0 Replies Latest reply on Jun 20, 2007 5:51 PM by codeidiot

    Custom Data Grid and Functionality

    codeidiot
      I have pieced together a sample demo app for a flex application I am proposing here at work. I have "talked up" flex and now the proof is in the pudding. I work for a government agency and accessibility is a big concern. I created a datagrid control that renders checkboxes in 4 of 5 columns representing boolean values. I want a user to be able to use their tab key and simply hit enter or spacebar (whatever) and either check or uncheck a given checkbox. Problem is! To enable tabbing on the datagrid I have to set it to editable. When enabling the datagrid to be editable, tabbing over any given cell turns that cell into a text box! Overriding my item renderer which is a checkbox. So instead of "focusing" on the cell, it get's all messed up.

      Here are the two files to my app thus far:

      file 1) VanPool.mxml
      ====================================================================
      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
      layout="vertical"
      horizontalAlign="center"
      verticalAlign="top"
      creationComplete="initApp()">

      <mx:Canvas width="90%" height="30">
      <mx:Label text="Vanpool Ridership" fontWeight="bold" color="#ffffff" fontSize="14" left="10" top="7"/>
      </mx:Canvas>

      <mx:Script>
      <![CDATA[
      import mx.controls.CheckBox;
      import mx.controls.Alert;
      import mx.controls.dataGridClasses.DataGridListData;
      import mx.collections.ArrayCollection;

      // when our data is updated, our controls are notified
      //[ArrayElementType("VanpoolRidersVO")]
      [Bindable]
      public var DriverData:ArrayCollection;

      // call this when we're all created
      protected function initApp():void
      {
      DriverData = new ArrayCollection();
      DriverData.addItem(new VanpoolRidersVO(1, "Fred Flinstone", true,false,false,false));
      DriverData.addItem(new VanpoolRidersVO(2, "Wilma Flinstone", false,false,true,false));
      DriverData.addItem(new VanpoolRidersVO(3, "Barney Rubble", true,false,false,false));
      DriverData.addItem(new VanpoolRidersVO(4, "Betty Rubble", true,true,false,true));
      DriverData.addItem(new VanpoolRidersVO(5, "Pebbles Flinstone", true,false,false,false));
      DriverData.addItem(new VanpoolRidersVO(6, "Bamm-Bamm Rubble", false,false,true,false));
      DriverData.addItem(new VanpoolRidersVO(7, "Pebbles", true,false,false,false));
      DriverData.addItem(new VanpoolRidersVO(9, "Bobby Bedrock", true,true,false,true));
      DriverData.addItem(new VanpoolRidersVO(10, "Godzilla", true,false,false,false));
      DriverData.addItem(new VanpoolRidersVO(11, "T-Rex", false,false,true,false));
      DriverData.addItem(new VanpoolRidersVO(12, "Neandertal Man", true,false,false,false));
      DriverData.addItem(new VanpoolRidersVO(13, "Cro-magnon man", true,true,false,true));
      }
      public function updateData(id:Number,name:String):void {
      Alert.show("id=" + id + "| name="+name);
      }
      ]]>
      </mx:Script>

      <mx:Panel width="90%" layout="absolute" title="Ridership" height="450">
      <mx:VBox width="100%" horizontalAlign="center" verticalAlign="middle" height="400">
      <mx:HBox width="95%" horizontalAlign="left">
      <mx:Button x="290" y="408" label="Step 1" click="myViewStack.selectedChild=Step1;"/>
      <mx:Button x="363" y="408" label="Step 2" click="myViewStack.selectedChild=Step2;"/>
      <mx:Button label="Step 3" x="425" y="408" click="myViewStack.selectedChild=Step3;"/>
      </mx:HBox>
      <mx:ViewStack id="myViewStack" width="100%" height="330">
      <mx:VBox id="Step1" width="100%" horizontalAlign="center" verticalAlign="middle" height="330">
      <mx:HBox width="95%" horizontalAlign="left">

      <mx:Panel width="40%" height="300" layout="absolute" title="Step 1">
      </mx:Panel>

      <mx:DataGrid editable="true" id="MainGrd" selectionColor="#e2e2e2" dataProvider="{DriverData}" width="60%" height="300">
      <mx:columns>
      <mx:DataGridColumn editable="false" width="150" headerText="Name" dataField="name"/>

      <mx:DataGridColumn headerText="Driver AM" dataField="isAMdriver" paddingLeft="10">
      <mx:itemRenderer>
      <mx:Component>
      <mx:HBox horizontalAlign="center">
      <mx:CheckBox enabled="true" click="outerDocument.updateData(data.ID,data.name)" selected="{data.isAMdriver}"/>
      </mx:HBox>
      </mx:Component>
      </mx:itemRenderer>
      </mx:DataGridColumn>

      <mx:DataGridColumn headerText="Driver PM" dataField="isPMdriver" paddingLeft="10">
      <mx:itemRenderer>
      <mx:Component>
      <mx:HBox horizontalAlign="center">
      <mx:CheckBox paddingLeft="10" selected="{data.isPMdriver}"/>
      </mx:HBox>
      </mx:Component>
      </mx:itemRenderer>
      </mx:DataGridColumn>

      <mx:DataGridColumn headerText="Rider AM" dataField="isAMrider" paddingLeft="10">
      <mx:itemRenderer>
      <mx:Component>
      <mx:HBox horizontalAlign="center">
      <mx:CheckBox paddingLeft="10" selected="{data.isAMrider}"/>
      </mx:HBox>
      </mx:Component>
      </mx:itemRenderer>
      </mx:DataGridColumn>

      <mx:DataGridColumn headerText="Driver PM" dataField="isPMrider" paddingLeft="10">
      <mx:itemRenderer>
      <mx:Component>
      <mx:HBox horizontalAlign="center">
      <mx:CheckBox paddingLeft="10" selected="{data.isPMrider}"/>
      </mx:HBox>
      </mx:Component>
      </mx:itemRenderer>
      </mx:DataGridColumn>
      </mx:columns>
      </mx:DataGrid>
      </mx:HBox>
      </mx:VBox>
      <mx:HBox id="Step2" width="100%" horizontalAlign="center" verticalAlign="middle" height="330">
      <mx:Label text="Step 2" color="#000000"/>
      </mx:HBox>
      <mx:HBox id="Step3" width="100%" horizontalAlign="center" verticalAlign="middle" height="330">
      <mx:Label text="Step 3" color="#000000"/>
      </mx:HBox>
      </mx:ViewStack>
      <mx:HBox width="95%" horizontalAlign="right">
      <mx:Button x="290" y="408" label="Logout"/>
      <mx:Button x="363" y="408" label="Print"/>
      <mx:Button label="Something" x="425" y="408"/>
      </mx:HBox>
      </mx:VBox>
      </mx:Panel>
      </mx:Application>


      File 2) VanpoolRidersVO.as
      ================================================================================
      /*
      VanpoolRidersVO
      */
      package
      {
      public class VanpoolRidersVO
      {

      public var ID:int;
      public var name:String;
      public var isAMdriver:Boolean;
      public var isPMdriver:Boolean;
      public var isAMrider:Boolean;
      public var isPMrider:Boolean;

      public function VanpoolRidersVO(p_ID:int,p_name:String,p_isAMdriver:Boolean,p_isPMdriver:Boolean,p_isAMri der:Boolean,p_isPMrider:Boolean)
      {
      ID = p_ID;
      name = p_name;
      isAMdriver = p_isAMdriver;
      isPMdriver = p_isPMdriver;
      isAMrider = p_isAMrider;
      isPMrider = p_isPMrider;
      }

      public function clone():VanpoolRidersVO
      {
      return new VanpoolRidersVO(ID, name, isAMdriver, isPMdriver, isAMrider, isPMrider);
      }

      public function toString():String
      {
      var s:String = "[class VanpoolRidersVO ";
      s += "ID='" + ID + "' ";
      s += "name='" + name + "' ";
      s += "isAMdriver='" + isAMdriver + "'";
      s += "isPMdriver='" + isPMdriver + "'";
      s += "isAMrider='" + isAMrider + "'";
      s += "isPMrider='" + isPMrider + "'";
      s += "]";
      return s;
      }
      }
      }