0 Replies Latest reply on Jul 14, 2011 12:27 PM by vincelavoie

    Tabbing in the AdvancedDataGrid

    vincelavoie

      Hello guys,

       

      I have an AdvancedDataGrid and I can't get the tabbing to work properly. My issues are:

       

      1- I can't get the headerRenderer cells (or its children) to get the focus (by mouse or tabbing).
      2- I can't get the row header cells (or its children) to get the focus if the cells are in read only mode.

       

      I tried to play with the following attributes of the UI components, but it doesn't seem to have changed anything:

       

      this.tabChildren = true;
      this.tabEnabled = true;
      this.tabFocusEnabled = true;
      this.enabled = true;
      this.focusEnabled = true;
      this.mouseFocusEnabled = true;

       

      Here is the architecture of my AdvancedDataGrid:

       

      ************************************
      **********  Columns   ************
      ************************************

       

      The columns of the grid are created like such:

       

      var col:AdvancedDataGridColumn = new AdvancedDataGridColumn(datafield);
      col.headerRenderer = new ClassFactory(LeadRowRenderer);

       

      if (isLead == true) {
          //Lead column: no custom item renderer required, only styling
          col.setStyle("backgroundColor", Constants.LEADCOL_COLOR);
          col.editable = false;
          col.itemRenderer = new ClassFactory(LeadCellRenderer);
          col.itemEditor = new ClassFactory(DataCellEditor);
      }else {
          //Non-editable data column: custom ItemRenderer & styling
          col.itemRenderer = new ClassFactory(DataCellRenderer);

       

          //Custom ItemEditor turns data Label into TextInput
          col.itemEditor = new ClassFactory(DataCellEditor);  
      }

       

      columns.push(col);

       

      ************************************
      ******  Types of cells   **********
      ************************************

       


      So we have 3 different sections in the table:

       

      1. Column Headers

       

      Each column has a header of type LeadRowRenderer (which extends class VBox). This class can have children of type LeadCellRenderer (which extends HBox) like such:

       

      override public function set data(value:Object) : void {
          var applDataManager:ApplDataManager = ApplDataManager.getInstance();
          this.removeAllChildren();
          super.setStyle("backgroundColor", Constants.LEADCOL_COLOR);

       

          firstDataField.data = applDataManager.getLeadRows().getItemAt(0);
          addChild( firstDataField );
                 
          for (var i:int= 1; i < applDataManager.getLeadRows().length; i++) {
              var line:HRule = new HRule();
              var dataField:LeadCellRenderer = new LeadCellRenderer();
                     
              line.percentWidth = 100;
              //line.setStyle("strokeColor", Constants.LINE_COLOR);
              line.setStyle("strokeHeight", "1");
              dataField.listData = listData;
              dataField.data = applDataManager.getLeadRows().getItemAt(i);
              addChild(line);
              addChild(dataField);
          }

       

          super.setStyle("verticalGap", "0");
          super.data = value;
      }

       


      2. Row headers

       

      The first cell of each row is of type LeadCellRenderer, which is the same class as mentioned in the column header previously.

       

      3. Data cells (all the other cells which are not row or column headers)

       

      The data cells have both an itemRenderer of type DataCellRenderer (which extends HBox) and and itemEditor of type DataCellEditor (which extends TextInput)

       


      ************************************
      ************ Children  ************
      ************************************

       


      Also, the LeadCellRenderer can have expand and collapse icons in the cells, for hierarchical data:

       

      override public function set data(value:Object) : void {
          removeAllChildren();
             
          if (listData != null) {
              var colId:int = listData.columnIndex + 1;
                     
              var level:int = value[Constants.HIERLEVEL_PARAM + colId];
              if (level != 0) {
                  levelSpacer = new Spacer();
                  levelSpacer.width = Constants.ICON_WIDTH * level;
                  addChild( levelSpacer );
              }
                     
              var graphicParam:String = value[Constants.GRAPHIC_PARAM + colId];
              if (graphicParam == Constants.COLLAPSED_ICON) {
                  hierIcon = new IMPIcon(Constants.COLLAPSE,value[Constants.ID_PARAM + colId]);
                  hierIcon.addEventListener(MouseEvent.CLICK, handleHierarchyClick );
                  addChild( hierIcon );
              } else if (graphicParam == Constants.EXPANDED_ICON) {
                  hierIcon = new IMPIcon(Constants.EXPAND,value[Constants.ID_PARAM + colId]);
                  hierIcon.addEventListener(MouseEvent.CLICK, handleHierarchyClick );
                  addChild( hierIcon );
              }
                     
              dataField.text = value[Constants.DATA_PARAM + colId];
              addChild( dataField );
          }

       

          //Propogate data to HBox parent setter
          super.data = value;
      }

       

      At the moment, the tabbing is only working on the DataCells (doesn't matter if they are read-only or not) and it will skip the column/row header cells.

       

      Anyone of you knows why this is happening and how I could get the tabbing to work? Would I need to override some methods? In my opinion, Flex4's AdvancedDataGrid should handle the tabbing for all

       

      UI components in the correct order without me having to manually modify the tabIndex of each component.

       

      Any help is greatly appreciated!

       

      Thanks in advance!

       

      Vincent