DataGrid bzw. AdvancedDataGrid Detailansicht

[FlyingBo]

Hallo Leute,

mein Vorhaben: ein Grid nur eine Zeile groß zu machen, dann bei Klick zu vergrößern und Detailinformationen anzuzeigen.

Ich habe z.Z. ein Feld für ein Datum, eins für den Verfasser und eins für den meist mehrzeiligen Text.
Die Größe der Rows soll bei allen nur ausreichend für die Darstellung der ersten Textzeile bzw. einer festen Anzahl an Buchstaben sein. Beim Klick soll die Höhe dieser Zeile um x-Pixel vergrößert werden und der gesamte Text sichtbar sein.

Mein Ansatz bis jetzt war:
Zelle mit ItemRenderer und darin ein Label mit Höhe einer Zeile
dann bei Klick den ItemRenderer zu schnappen und eine Funktion aufrufen, um das Label zu vergrößern und den gesamten Text einzutragen.

Gibt es vielleicht eine andere Möglichkeit? Vielleicht sogar schon eine in Flex integrierte Lösung dafür?

Bei Ext-JS z.B. exisitiert eine solche Funktionalität.

Vielen Dank im Voraus und viele Grüße
Chris

[FlyingBo]

Also ich hab jetzt mal was probiert:

		<mx:AdvancedDataGrid itemClick="{onGridClick(event)}" alternatingItemColors="[#DFDFDF,#FFFFFF]" id="projectlog_grid" 
			height="100%" showHeaders="false" creationComplete="init()">
			<mx:columns>
<!--				<mx:AdvancedDataGridColumn id="ins_dat_col" headerText="verfasst am" 
					dataField="insert_date" labelFunction="renderLabel" />
				<mx:AdvancedDataGridColumn id="login_col" headerText="verfasst von"
					dataField="username" labelFunction="renderLabel"/> !-->
				<mx:AdvancedDataGridColumn id="txt_col" width="700" headerText="Logeintrag" dataField="blog_text">
					<mx:itemRenderer>
						<mx:Component>
						<mx:HBox width="100%" xmlns:mx="http://www.adobe.com/2006/mxml">
					    <mx:Script>
					        <![CDATA[
					        	import mx.controls.Label;
					        	import mx.formatters.DateFormatter;
					        	import mx.utils.XMLUtil;
					        	import mx.controls.Alert;
					    	
								[Bindable]
					            [Embed(source="images/sort_up.png")]
					            private var SortUp:Class;
					
								[Bindable]
					            [Embed(source="images/sort_down.png")]
					            private var SortDown:Class;
					            
					            [Bindable]
					            [Embed(source="images/mousecursor_circle.png")]
					            private var Mouse:Class;
					            
					            public var rendered:Boolean = false;
					        	public var lbl_txt:String;
					            public var clicked:Boolean = false;
					            public var oldheight:int;
					            
					            public function check(event:MouseEvent):void{
					              	if(!clicked){
					            		oldheight = lbl.height;
					            		lbl.height = lbl.textHeight*2;
					            		img.source = SortUp;
					            	}else{
					            		lbl.height = oldheight;
					            		img.source = SortDown;
					            	}	
					            	clicked = !clicked;
					            }            
					            
					            override public function set data(value:Object):void {
					            	super.data = value;
					            	if (value != null){                	
					                	var x:XML = new XML(value.toString());
										lbl_txt = x.blog_text;
										lbl.text = x.blog_text;
										Alert.show(lbl_txt);
										if(lbl_txt.indexOf("\n") == -1){
					              			img.visible = false;
					              		}
					              		rendered = true;
					              	}	
					            }
					    
					
					        ]]>
					    </mx:Script>
						<mx:Label height="20" id='lbl' width="96%" />
						<mx:Image click="check(event)" source="{SortDown}" id="img" useHandCursor="true" buttonMode="true"/>
					</mx:HBox>

						</mx:Component>
					</mx:itemRenderer>
				</mx:AdvancedDataGridColumn>
			</mx:columns>
		</mx:AdvancedDataGrid>

Problem ist allerdings, dass es beim ersten Aufruf funktioniert und dann beim neuladen (ausführen des HttpService) des Grids einfach die Symbole ausgeblendet werden.
Der Input durch den HttpService bleibt gleich!

*EDIT* Was mir noch aufgefallen ist: Das Alert in set data wird beim neuladen des Grids 2 mal aufgerufen mit dem selben Wert

Wäre nett, wenn einer Rat wüsste

Danke schonmal und Gruß
Chris

[FlyingBo]

gelöst

falls jemand interesse hat, einfach melden oder in den thread schreiben.

gruß chris

[Omega Psi]

Magst du vielleicht die Lösung gleich hier posten?

[FlyingBo]

klar kann ich natürlich auch ;-) dachte nur, da ich so wenig darüber gefunden habe, wäre für die meisten nicht wichtig...

also ich weiß nicht, ob es die schönste lösung ist aber für mich funktioniert sie.

			public var dStore:XMLListCollection;
			private var dummyStore:XMLListCollection = new XMLListCollection(); 
			private var clickedRows:ArrayCollection;

			private function onGridClick(event:ListEvent):void{				
				var tmp:XMLListCollection = projectlog_grid.dataProvider as XMLListCollection;
				var index:int = projectlog_grid.selectedIndex;
				if(clickedRows.getItemAt(index) == null || clickedRows.getItemAt(index) == false){
					clickedRows.setItemAt(true,index);
					tmp.setItemAt(dStore.getItemAt(index),index);
					projectlog_grid.dataProvider = tmp;
					projectlog_grid.selectedIndex = index;
				}else{
					tmp.setItemAt(dummyStore.getItemAt(index),index);
					clickedRows.setItemAt(false,index);
					projectlog_grid.dataProvider = tmp;
					projectlog_grid.selectedIndex = index;
				}				
			}
			public function gridDataChange(dp:XMLListCollection):void{				
				dStore = dp;
				dummyStore.removeAll();
				for each (var item:XML in dp){
					var tmp:XML = new XML(item.toString());
					var x:String = item.blog_text;
					tmp.blog_text = x.substr(0,(x.indexOf("\n"))) + '...';
					dummyStore.addItem(tmp);
				}	
				projectlog_grid.dataProvider = new XMLListCollection(dummyStore.copy());
				clickedRows = new ArrayCollection(new Array(dummyStore.length));
			}

		<mx:AdvancedDataGrid itemClick="{onGridClick(event)}" alternatingItemColors="[#DFDFDF,#FFFFFF]" id="projectlog_grid" 
			height="100%" sort="onGridSort(event)" showHeaders="true" wordWrap="true" creationComplete="init()" variableRowHeight="true">
			<mx:columns>
				<mx:AdvancedDataGridColumn id="ins_dat_col" headerText="verfasst am" 
					dataField="insert_date" labelFunction="renderLabel" />
				<mx:AdvancedDataGridColumn id="login_col" headerText="verfasst von"
					dataField="username" labelFunction="renderLabel"/> 
				<mx:AdvancedDataGridColumn id="txt_col" width="700" headerText="Logeintrag" dataField="blog_text"/>			
			</mx:columns>
		</mx:AdvancedDataGrid>

Zur Erklärung:
Die per HttpService geladenen XML-Daten werden per gridDataChange(...) gesetzt. Hier wird einmal eine XMLListCollection mit den vollständigen Daten und einmal eine XMLListCollection mit dem verkürzten Text.
Der eigentliche Dataprovider wird dann nach einem Klick entweder mit dem verkürzten oder dem ausgeschriebenen Objekt gefüllt.

Einziges Problem ist jetzt noch, dass bei einer Sortierung des Grids die Ersetzungslisten nicht mit sortiert werden und somit die Ersetzung der Objekte falsch ist.
WICHTIG: variableRowHeight="true" im AdvancedDataGrid angeben

1. Ansatz: Ich kann natürlich die anderen Listen mitsortieren
2. Ansatz: Hierbei könnte ich noch ein bissl Hilfe gebrauchen: Ich habe gesehen, dass man einer XMLListCollection ein sort-Objekt zuordnen kann. Allerdings wie komme ich an das sort-Objekt des Grids?!

Bin leider noch ziemlich neu in Flex und Actionscript, also falls es einfacher geht, bin ich für Verbesserungen offen

Gruß
Christian

[FlyingBo]

noch eine Frage

Das rowCount-Attribut gibt doch die Anzahl der sichtbaren Rows im Grid an oder?

[theremin]

mit rowCount bekommst du alle angezeigten Zeilen des Grids, auch die , in denen keine Werte stehen.