DataGrid z pogrubioną zawartością wierszy

Podczas pracy nad pewną funkcjonalnością musiałem pogrubić zawartość wybranych wierszy w datagrid-zie. „Decyzja” o pogrubieniu zawartości danego wiersza miała być zawarta w każdym pojedyńczym obiekcie dostarczonym do datagrid-a w postaci tablicy (Array). Wewnątrz takiego obiektu zawarta zostanie właściwość „mówiąca” o pogrubieniu.

Przykładowa klasa zawierająca informację każdego wiersza w datagrid-zie mogła by wyglądać następnująco (właściwość „isSpecial” decyduję o pogrubieniu):

public dynamic class PersonVo
{
		public var name:String;
		public var surname:String;
		public var email:String;

  /**
		 * If this property is true, row in DataGrid is bold
		 *
		 * @var Boolean
		 * */
		public var isSpecial:Boolean;

		private var _date:Date;

		/**
		 * Get formatted date
		 *
		 * @retrun String
		 * */
		public function get dateStr():String
		{
			var dateFormatter:DateFormatter = new DateFormatter();
			dateFormatter.formatString = "DD-MM-YYYY";

			return dateFormatter.format(_date);
		}

		public function set dateStr(value:String):void
		{
			_date = DateFormatter.parseDateString(value);
		}

		public function PersonVo(name:String = null, surname:String = null,
					date:Date = null, email:String = null, isSpecial:Boolean = false)
		{
			this.name = name;
			this.surname = surname;
			this._date = date;
			this.email = email;
			this.isSpecial = isSpecial;
		}
}

Następnie należy utworzyć DataGrid-a wraz z kolumnami wyświetlającymi informację, którymi jesteśmy zainteresowani oraz itemrenderer w którym obsłużone zostanie pogrubienie poszczególnych wierszy. Kod mojego przykładowego datagrid-a zawiera kolumnę „Imię i nazwisko” łączącą dwie właściwości z klasy PersonVo za pomocą funkcji anonimowej, email oraz sformatowaną datę urodzenia.

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
				 xmlns:s="library://ns.adobe.com/flex/spark"
				 xmlns:mx="library://ns.adobe.com/flex/mx"
				 itemRenderer="{new ClassFactory(DGItemRenderer)}">
	<mx:columns>
		<!--This simple anonymous function in DataGridColumn concatenates two string: name and surname from value object-->
		<mx:DataGridColumn headerText="Imię i Nazwisko"
		labelFunction="{function(personVo:PersonVo,
									dgColumn:DataGridColumn):String
						{return personVo.name + ' ' + personVo.surname; }}"
						   width="200"/>
		<mx:DataGridColumn headerText="Email"
						   dataField="email"
						   width="250"/>
		<mx:DataGridColumn headerText="Data urodzenia"
						   dataField="dateStr"
						   width="120"/>
	</mx:columns>
	<fx:Script>
		<![CDATA[
			import dataGridItermRenderers.DGItemRenderer;
			import vo.PersonVo;
		]]>
	</fx:Script>
</mx:DataGrid>

Najważniejsza część całej zabawy-jest klasa itemrenderera zawierająca przesłoniętą właściwość „data”. W jej wnętrzu sprawdzany jest typ dostarczonej wartości ponieważ podczas tworzenia DataGrida przekazywane są do niej obiekty poszczególnych kolumn, którymi nie byłem zainteresowany. W dalszej kolejności właściwość wykonuję się przy wypełnieniu każdej komórki poszczególnych kolumn co jak widać daję możliwość sterowania wyglądem ich zawartości poprzez ręczne ustawienie styli.

public class DGItemRenderer extends DataGridItemRenderer
{
		public function DGItemRenderer()
		{
			super();
		}

		/**
		 * Property is execute on each column in each row
		 *
		 * @param PersonVo|Object value Object using in item renderer
		 */
		override public function set data(value:Object):void
		{
			if (value is PersonVo && value)
			{
				//In this property i check if PersonVo is special
				//When isSpecial == true i bold cell in this column
				var boldValue:String = (PersonVo)(value).isSpecial == true ? "bold" : "normal";
				setStyle("fontWeight", boldValue);
			}
			super.data = value;
		}
}

Wynikiem tych zabiegów są oczekiwane pogrubione zawartości wierszy w DataGridzie. link

  1. Na razie brak komentarzy.

  1. Na razie brak trackbacków