13 Replies Latest reply on Sep 9, 2010 11:40 AM by Flex harUI

    How to center a checkbox in an extended DataGrid

    Devtron Level 3

      Hello,

       

      I have added a checkbox to a column in my extended datagrid. it works fine but I am unable to vertically or horizontally align the checkbox inside the datagrid.

       

      Here is my grid MXML:

                  <dataGridFilters:FilterDatagrid headerHeight="85" id="dg"
                                                  draggableColumns="false"
                                                  sortableColumns="false"
                                                  width="100%" height="100%"
                                                  dataProvider="{deviceDataColl}"
                                                  click="dg_clickHandler(event)"
                                                  borderStyle="solid" resizableColumns="false" editable="false"
                                                  rowCount="{deviceDataColl.length}"
                                                  allowMultipleSelection="true"
                                                  horizontalScrollPolicy="auto"
                                                  verticalScrollPolicy="auto"
                                                  creationComplete="assignListener()"
                                                  verticalAlign="middle"
                                             
                                                  >
                      <dataGridFilters:columns>
                                         
                          <dataGridFilters:DataGridFilterColumn headerText="&#13;Select" width="75" textAlign="center">
                              <dataGridFilters:itemRenderer>
                                  <fx:Component>
                                      <dataGridFilters:GridCheckBox>
                                          <fx:Script>
                                              <![CDATA[
                                                  import filters.ColumnSelectedEvent;
                                                 
                                                  protected function sendClick(event:MouseEvent):void
                                                  {
                                                      var event2:ColumnSelectedEvent = new ColumnSelectedEvent( ColumnSelectedEvent.COLUMN_SELECTED, this.listData.columnIndex, this.selected ); 
                                                      dispatchEvent( event2 );
                                                  }
                                              ]]>
                                          </fx:Script>                                   
                                      </dataGridFilters:GridCheckBox>
                                  </fx:Component>
                              </dataGridFilters:itemRenderer>
                          </dataGridFilters:DataGridFilterColumn>
                             
                          <dataGridFilters:DataGridFilterColumn dataField="xxxx" headerText="&#13;Group 1" width="75" textAlign="center" />
                         
                      </dataGridFilters:columns>
                  </dataGridFilters:FilterDatagrid>

       

       

       

       

      In my GridCheckbox class file, in my constructor I have tried this:

          import mx.controls.CheckBox;

       

          public class GridCheckBox extends CheckBox
          {
              public function GridCheckBox() {
                  this.setStyle('verticalAlign','middle');
                  this.setStyle('horizontalAlign','center');
                  super();
              }
                 
             
              override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
              {
                  super.updateDisplayList(unscaledWidth, unscaledHeight);
                  textField.styleName = 'InputCheckBoxLabel';
                  textField.y = 3;
              }       
             
          }

       

       

       

      when I "setStyle" it does not seem to work and I cannot figure out a way to make it happen.

       

      Any suggestions?