manewcActionscript Snippets

DataGrid Styles

1 comment so far

I recently had an inquiry about the ability to change the row font color of the datagrid component on rollover - with this in mind, I wanted to explore more with the styling of the component. So far, we have the ability to change the background color on rollover, but not the font color - still looking for a solution for this.

The CustomRowColors.as file grabbed from: http://blogs.adobe.com/pdehaan/2007/06/setting_a_flash_data_grids_bac_1.html

You change fonts by setting a custom text format using a TextFormat object, and the setStyle() or setRendererStyle() methods. If you want to set the text format for a DataGrid component’s header, use the setStyle() method along with the headerTextFormat style. If you want to set the text format for each row in the DataGrid component, use the setRendererStyle() method along with the textFormat style. Here is the updated DataGridExample.as file:

package
{
	import flash.display.MovieClip;
	import fl.controls.DataGrid;
	import fl.data.DataProvider;
	import flash.text.TextFormat;
	import flash.events.MouseEvent;

	public class DataGridExample extends MovieClip
	{

		private var myDataGrid:DataGrid;
		private var myDP:DataProvider;

		public function DataGridExample()
		{
			var tfh:TextFormat = new TextFormat();
			tfh.color = 0xff0000;

			var tf:TextFormat = new TextFormat();
			tf.font = "Times New Roman";

			var myDP:DataProvider = new DataProvider();
			myDP.addItem({ID:"01", Name:"Morgan", Email:"Morgan@blah.com", Web:"manewc.com", rowColor:"green"});
			myDP.addItem({ID:"02", Name:"Ashley", Email:"Ashley@blah.com", Web:"google.com", rowColor:"red"});
			myDP.addItem({ID:"03", Name:"Michael", Email:"Michael@blah.com", Web:"yahoo.com", rowColor:"green"});

			var myDataGrid:DataGrid = new DataGrid();
			myDataGrid.setStyle("headerTextFormat", tfh); // for the headers
			myDataGrid.setRendererStyle("textFormat", tf); // for each row

			myDataGrid.setStyle("cellRenderer", CustomRowColors);
			myDataGrid.addColumn("ID");
			myDataGrid.addColumn("Name");
			myDataGrid.addColumn("Email");
			myDataGrid.addColumn("Web");
			myDataGrid.dataProvider = myDP;
			myDataGrid.width = 680;
			myDataGrid.move(10, 10);
			addChild(myDataGrid);
		}

	}
}

and the CustomRowColors.as file:

// found: http://blogs.adobe.com/pdehaan/2007/06/setting_a_flash_data_grids_bac_1.html
package {

    // Import the required component classes.
    import fl.controls.listClasses.CellRenderer;
    import fl.controls.listClasses.ICellRenderer;

	/**
	* This class sets the upSkin style based on the current item's rowColor value
	* in the data provider.
	* Make sure the class is marked "public" and in the case of our custom cell renderer,
	* extends the CellRenderer class and implements the ICellRenderer interface.
	*/
	public class CustomRowColors extends CellRenderer implements ICellRenderer
	{
		/**
		* Constructor.
		*/
		public function CustomRowColors():void {
			super();
		}

		/**
		* This method returns the style definition object from the CellRenderer class.
		*/
		public static function getStyleDefinition():Object
		{
			return CellRenderer.getStyleDefinition();
		}

		/**
		* This method overrides the inherited drawBackground() method and sets the renderer's
		* upSkin style based on the row's rowColor value in the data provider. For example,
		* if the item's rowColor value is "green", the upSkin style is set to the
		* CellRenderer_upSkinGreen linkage in the library. If the rowColor value is "red", the
		* upSkin style is set to the CellRenderer_upSkinRed linkage in the library.
		*/
		override protected function drawBackground():void
		{
			switch (data.rowColor)
			{
				case "green":
					setStyle("upSkin", CellRenderer_upSkinGreen);
					setStyle("overSkin", CellRenderer_upSkinWhite);
					break;
				case "red":
					setStyle("upSkin", CellRenderer_upSkinRed);
					setStyle("overSkin", CellRenderer_upSkinWhite);
					break;
				default:
					break;
			}

			super.drawBackground();
		}
	}
}

Monday, July 14th, 2008 at 9:59 am and is filed under Actionscript 3, Flash Components. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.