0 Replies Latest reply on May 8, 2008 12:17 PM by Tikis_Mikis

    Urgent Help with DataGrid Itemrenderer

    Tikis_Mikis
      Hello I need some help. I am creating a custom DataGrid in which I pass it an indexed array with sample values:

      $columns = array(

      0 => array('id' => 'customer', 'orderBy' => 'customers.last_name,customers.first_name', 'title' => 'Customer', 'type' => 'get', 'url'=> null),
      1 => array('id' => 'name', 'orderBy' => null, 'title' => 'Order Name', 'type' => 'get', 'url'=> null),
      2 => array('id' => 'edit', 'orderBy' => null, 'title' => 'Edit', 'type' => null, 'url'=> 'orders/edit'),
      3 => array('id' => 'delete', 'orderBy' => null, 'title' => 'Delete', 'type' => null, 'url'=> 'orders/delete')

      );

      I pass this array to a function that dynamically creates a custom DataGrid:

      newPagedDataGrid = new PagedDataGrid(cols, columnDataArray, gridWidth, gridHeight, gridRowCount);

      Here is my custom DataGrid code:

      package com.plugins.PagedDataGridPlugin.CustomComponents
      {
      /**
      * PagedDataGrid class extends DataGrid component and just sets default data so that such
      * parameters are not set for each instance of PagedDataGrid in the main application
      *
      */

      import mx.controls.Alert;
      import mx.controls.DataGrid;
      import mx.events.FlexEvent;

      public class PagedDataGrid extends DataGrid
      {
      /**
      * constructor sets the default parameter data for the DataGrid component
      *
      */
      public function PagedDataGrid(gridColumns:Array, columnDataArray:*, gridWidth:Number, gridHeight:Number, gridRowCount:Number)
      {
      super();

      this.id = 'pagedDataGrid';
      this.dataProvider = columnDataArray;
      this.width = gridWidth;
      this.height = gridHeight;
      this.verticalScrollPolicy = "off";
      this.horizontalScrollPolicy = "off";
      this.resizableColumns = false;
      this.draggableColumns = false;
      this.liveScrolling = true;
      this.rowCount = gridRowCount;
      this.columns = gridColumns;
      this.sortableColumns = false;
      }
      }
      }

      Where columnDataArray is data from PHP with the rows for the DataGrid and cols is an array of DataGridColumns constructed in this manner:


      var cols:Array = new Array();

      // create the columns array and format it to pass the data to the custom DataGrid, PagedDataGrid
      for (var key:Object in gridColumns) {

      // create a new DataGridColumn and set the title
      var newColumn:DataGridColumn = new DataGridColumn();
      newColumn.setStyle("horizontalAlign", "center");
      newColumn.headerText = gridColumns[key]['title'];

      if (gridColumns[key]['type'] == 'get') {
      newColumn.headerRenderer = new ClassFactory(ColumnHeaderRenderer);
      newColumn.dataField = gridColumns[key]['id'];
      }

      // if the column is not null and is edit or type then set its width to 60px
      if (gridColumns[key]['type'] == null) {

      // give it a width of 60
      newColumn.width = 60;

      //Alert.show("gg || " + gridColumns[key]['id']);
      newColumn.itemRenderer = new ClassFactory(UrlLinkRenderer);
      newColumn.dataField = gridColumns[key]['id'];
      //Alert.show("fir: " + newColumn.dataField);
      }

      // add the column to the cols array
      cols.push(newColumn);
      }

      Notice how where I test
      if (gridColumns[key]['type'] == 'get')

      that I set:
      newColumn.headerRenderer = new ClassFactory(ColumnHeaderRenderer);
      newColumn.dataField = gridColumns[key]['id'];


      Where gridColumns[key]['type'] and gridColumns[key]['id'] corresponds to the 'type' and 'id' index in the sample array above. From within the headerRenderer I am able to access the dataField value just fine.

      The problem comes when I attempt to use the itemrenderer for a row. I think perhaps I am not doing this the correct way.

      if (gridColumns[key]['type'] == null) {

      // give it a width of 60
      newColumn.width = 60;

      //Alert.show("gg || " + gridColumns[key]['id']);
      newColumn.itemRenderer = new ClassFactory(UrlLinkRenderer);
      newColumn.dataField = gridColumns[key]['id'];
      //Alert.show("fir: " + newColumn.dataField);
      }

      I DONT know how to let the itemrenderer know what label to use (according to sample array above and to the logic above, an LinkButto itemrenderer is created when the 'type' == null) and so that would correspond to the 'edit' and 'delete' indexed rows inthe array. I tried to set the dataField just like I did for the headerRenderer but the itemrenderer says its 'undefined'

      Here is my itemrenderer code:

      package com.plugins.PagedDataGridPlugin.ItemRenderers
      {

      import mx.controls.Alert;
      import mx.controls.Label;
      import mx.controls.LinkButton;
      import mx.controls.dataGridClasses.DataGridListData;

      public class UrlLinkRenderer extends LinkButton
      {
      private var newUrlLink:Label;
      private var orderByFilter:String;

      public function UrlLinkRenderer()
      {
      super();

      // Create label instance for label
      newUrlLink = new Label();
      // Add label to canvas
      this.addChild(newUrlLink);
      }

      /**
      * Override the set method for the data property. function also sets the data for the
      * container instance and sets member variables newId, newLabel, and newCheckBox.selected value
      *
      */
      override public function set data(value:Object):void
      {
      super.data = value;

      // Make sure there is data
      if (value != null) {

      //Alert.show("test");
      var str:String = "";
      for (var i:Object in value) {
      str += i + " || " + value + "\n";
      }

      newUrlLink.text = value.dataField;

      }
      }

      }
      }

      Any help is GREATLY appreciated! I've been trying to do this for a couple of hours.....