Sort- and styleable dataGrid component for Adobe FLEX
- Posted on October 28th, 2008
- Category: Nerd stuff
- Write comment
Since I started developing FLEX applications, I continously had problems with the dataGrid component.
First, I got into trouble trying to sort formated date strings, which can’t be handled by the dataGrid’s default sorting algorithm so easily, especially if it comes up to (German) date formats. While searching for a solution, I found the dataGridSortable component which extends the dataGrid class and provides a method to define own search functions.
In later development I had to face the necessarity of styling the content of specific rows bold. The problem here was that the function setPropertyAt(rowNum:int, style:String) was deprecated. I still don’t get the idea why Adobe took out this method since it exactly did what I wanted.
However, I had to find a workaround somehow since dataGrid also does not offer anything that look like getRow(number:int) and return me a damn row object to style it via setStyle(…).
After not getting any further with google, I started to make a topic on adobe’s developer forum where some members, especially Amy Blankenship (Thanks again for the help!), helped me out and suggested using her dataGrid_withStyle component. The problem here was that I already had a component which extended dataGrid, so we came up with the idea of simply let Amy’s dataGrid_withStyle component extend the dataGridSortable and tadaa, it worked.
So, for all of you who seek for a sort- and styleable dataGrid component for FLEX, this little example might help you:
Download the example and the source files for the component here.
Hallo,
I want use the AS class files, but I have an error in the file (datagrid_withstyle.as) in line 138 “Code:1020″. It seems that there is problem with “override”.
What could it be?
Thanks for your help.
je
Hm, sounds strange.
What did you do and what is the exact errormessage you get?
yes, I have a german errormessage, but in english it could be:
1020: With ‘ override’ marked methods must set another method repealed.
Paste doch einfach mal die deutsche Fehlermeldung hin
ach, das macht die Sache natürlich einfacher!
“1020: Mit ‘override’ markierte Methoden müssen eine andere Methode außer Kraft setzen.”
Hä, das ist aber merkwürdig.
Schonmal versucht, das Wort “override” wegzumachen? Was passiert denn dann?
ja, das dachte ich mir auch.
also, wenn ich es weg nehme entstehen zwei neue Fehler:
(1) in Zeile 143: var item:IListItemRenderer = super.setupColumnItemRenderer(c, contentHolder, rowNum, colNum, data, uid);
Fehler-Code 1061: Nicht definierte Methode.
(2) in Zeile 92: column = columns[ir.listData.columnIndex];
Fehler-Code 1119: Access of possibly undefined property columnIndex through a reference with static type mx.controls.listClasses:BaseListData.
Habe ich vielleicht irgendetwas vergessen einzubetten oder Ähnliches?
Arbeitest du mit Flex 2 oder 3? Könnte das einen Unterschied machen? Ich arbeite übrigens mit Flex 2.
Oha, da liegt das Problem vermutlich:
Das Schlüsselwort “override” sorgt halt für das Überschreiben der Methode setupColumnItemRenderer(…) der Klasse DataGrid. Es kann sein, dass die Methode in Flex2 einfach noch nicht vorhanden ist. Daher die Fehlermeldung, dass er die Methode nicht überschreiben kann.
Das heißt, du kannst meine Klasse, so wie sie jetzt ist nicht nutzen. Im Prinzip bleiben dir 3 Möglichkeiten:
- Upgrade auf Flex3 (Würde ich empfehlen)
- Die fehlende Methode selbst implementieren (Stelle ich mir nicht so einfach vor)
- In Flex2 gibt es eine Methode in der DataGrid-Klasse mit der du dir eine best. Zeile aus dem Grid rauslassen kannst. Diese kannst du dann mit .setStyle(…) stylen. Das sortieren wird dann allerdings wieder etwas schwer. Da musst du wahrscheinlich von der Klasse dataGrid erben und die halt etwas umschreiben.
Ich habe mich für die das Upgrade auf Flex 3 entschieden.
Alles funktioniert einwandfrei!
Vielen Dank für deine Hilfe.
Viele Grüße
No problem, monsieur