0 Replies Latest reply on Feb 17, 2012 6:54 AM by tomexxus

    Array to grid works but need some help. Please help the beginner...

    tomexxus Level 1

      Hi,

      I'm very green at this...
      I've been trying to display a two-dimmensional array on a dataGrid and finally found some code that I was able to modify to my needs.

       

      However couple things I don't understand.

       

      1. Do I need the <s:itemRenderer>...</s:itemRenderer> section to display the data? Can this be simplified?

         I don't need to change the default look of the columns etc. However it looks like the grid will not populate without that prepare() function.

         Why isn't this sufficient to populate the grid? -> dataGrid.dataProvider = new ArrayCollection(dataArray);

       

      2. The number of columns is hardcoded (3) and their headings are as well (N1, N2, N3).
         Can I show/hide columns at runtime based on number of columns in my array?
         Can I rename the column's headings at runtime?

       

      Thanks,
      Tom

       

      here's the code:
      ---------------------------------------------------------------------------------------

      <?xml version="1.0" encoding="utf-8"?>
      <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">

       

          <fx:Script>
              <![CDATA[
                  import mx.collections.ArrayCollection;
                  import spark.components.gridClasses.CellPosition;
                  import spark.components.gridClasses.CellRegion;
        
                  // Create a dataProvider whose items are arrays of 6 random numbers. 
                  // The DataGrid's item renderer will display item[columnIndex].

                  private function initializeDataProvider():void
                  { 
                      const nRows:int = 10;
                      const nCols:int = 3;

                      const dataArray:Array = new Array(nRows);

                      for (var row:int = 0; row < dataArray.length; row++)
                      {
                          var values:Array = new Array(nCols);
          
                          for (var col:int = 0; col < values.length; col++)
                          {
                              values[col] = Math.round(Math.random() * 10);
                          }

                          dataArray[row] = values;
                      }

                      dataGrid.dataProvider = new ArrayCollection(dataArray);
                  }
              ]]>
          </fx:Script>


          <s:DataGrid id="dataGrid" selectionMode="singleRow" initialize="initializeDataProvider()">

              <s:itemRenderer>
                  <fx:Component>
                      <s:DefaultGridItemRenderer>
                          <fx:Script>
                              <![CDATA[
                                     override public function prepare(hasBeenRecycled:Boolean):void
                                 {
                                     label = data[columnIndex];
                                 }
                              ]]>
                          </fx:Script>
                      </s:DefaultGridItemRenderer>
                  </fx:Component>
              </s:itemRenderer>
       
              <s:columns>

                  <s:ArrayList>

                      <s:GridColumn headerText="N1" width="50"/>
                      <s:GridColumn headerText="N2" width="50"/>   
                      <s:GridColumn headerText="N3" width="50"/>   
            
                  </s:ArrayList>

              </s:columns>

          </s:DataGrid>

          <s:Button id="cmd" x="128" y="502" width="122" label="Button" click="initializeDataProvider()"/>

      </s:View>