Thanks Tracy
Yes I have got stuck into it and have managed to use a custom component with a datagrid inside it. And I am able to get all my data in it too. Unfortunately it doesn 't look too pretty as there are a few scroll bars - I guess this is the variable height problem!! Thanks Paul From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Tracy Spratt Sent: 07 September 2007 18:07 To: [email protected] Subject: [SPAM] RE: [SPAM] RE: [flexcoders] Display item renderer in only some rows of a datagrid There are many ways to produce that UI look, but how to implement this best depends on several factors, chief of which is the structure of the data you are consuming. "put a datagrid inside the custom component - is this possible" Absolutely. You can put ANYTHING in a custom component. >From recent experience, the hardest part will be dealing with the variable heights. I do not have a simple solution and find the Flex layout process, combined with renderers, repeters and components to be rather hard to grasp. I think you will just have to get into it. Tracy _____ From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Paul Steven Sent: Friday, September 07, 2007 7:21 AM To: [email protected] Subject: RE: [SPAM] RE: [flexcoders] Display item renderer in only some rows of a datagrid I could do with some further advice on how to represent this data http://www.mediakitchen.co.uk/marksheet.jpg It was suggested to use a repeater and datagrid or a repeater and a custom component. If I use a custom component, I am unsure how to deal with a dynamic number of rows of data. Would I need to put a datagrid inside the custom component - is this possible? Basically I would appreciate a bit more detail on how people would suggest I represent this data. The 2 factors causing me most concern are: There will be varying number of rows for each subsection The drop down list needs to be centered vertically based on how many rows there are for each subsection. Thanks Paul From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Tracy Spratt Sent: 28 August 2007 15:13 To: [email protected] Subject: [SPAM] RE: [flexcoders] Display item renderer in only some rows of a datagrid Or Repeater and DataGrid. Tracy _____ From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Tracy Spratt Sent: Tuesday, August 28, 2007 9:54 AM To: [email protected] Subject: RE: [flexcoders] Display item renderer in only some rows of a datagrid I'd go with nested repeaters. If you have more than 5-10 items, consider not using scrollbars but limiting the number of repeater rows, setting recycleChildren="true", and implements a "page" based navigation (|<, <, >, >|) Use a custom component to be repeated. Here are some snippets. Tracy When working with Repeater, I advise creating a custom component that you will repeat, and pass it the entire "currentItem", In the component, implement a "setter" function to receive the currentItem data. Now, in the component, you can code normally, binding to the data as you wish, without the hard to read currentItem references. You also avoid the binding warnings without the cast/conversion because the binding source is a true XML object. And, you can dispatch events normally. In the event handler, you can reference the component via the event.target property, and thus get a direct reference to the dataProvider item. This is easier to write and read than having to use getRepeaterItem(). Here are some code snippets: In the main app or component (note how "clean" and readable this is): <mx:Application <mx:VBox ...> <mx:Repeater id="rp" dataProvider="{_xmlData}" ...> <mycomp:MyRepeatedComponent xmlItem="{rp.currentItem}" .../> </mx:Repeater </mx:VBox> And in the component, MyRepeatedComponent.mxml: <?xml version="1.0" encoding="utf-8"?> <mx:HBox ... <mx:Script><![CDATA[ [Bindable]private var _xmlItem:XML; public function set xmlData(xml:XML):void { _xmlItem = xml; //do any special, non-bound ui stuff you want }// ]]></mx:Script> <!-- Now declare the Item UI --> <mx:Text id="lbDescription" text="[EMAIL PROTECTED]" width="100%" height="100%" /> _____ From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Paul Steven Sent: Tuesday, August 28, 2007 3:24 AM To: [email protected] Subject: [flexcoders] Display item renderer in only some rows of a datagrid Thanks for the reply Tracy You suggest finding a different solution. I have included a screenshot here http://www.mediakitchen.co.uk/mark_sheet.jpg to illustrate what I am trying to achieve. Can you or anyone suggest what sort of component is best suited to represent this data structure? Thanks Paul From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Tracy Spratt Sent: 24 August 2007 12:04 To: [email protected] Subject: [SPAM] RE: [flexcoders] Display item renderer in only some rows of a datagrid You are attempting something the datagrid is not designed for. Renderers are column based and will apply to every row. You could probably make the renderer show a combobox in every 5 the row using a collection as the dataProvider, being sure to implement IdropInListItemRenderer to have access to listData, and using getItemIndex() with the modulus operator. But then you have the data issue. An interactive renderer should update the dataProvider item property, and should set its state based on that property, in the set data() method. How that would work with a combobox in every 5th row I can't imagine. You might be able to use some data structure that is external to the datagrid to support this. It is an interesting problem, but I'd consider trying to find a different solution. Tracy _____ From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Paul Steven Sent: Friday, August 24, 2007 2:59 AM To: [email protected] Subject: [flexcoders] Display item renderer in only some rows of a datagrid I need to display a combobox item renderer in my datagrid only in the first of every 5 rows. With the remaining 4 rows in this particular column empty. Then the pattern will repeat again. This is how I am currently creating the columns however with this approach the combobox itemrenderer is appearing in all rows <mx:columns> <mx:DataGridColumn headerText="No." dataField="assCriteriaNum" width="60" /> <mx:DataGridColumn headerText="Assessment Criteria" dataField="assCriteria" width="210"/> <mx:DataGridColumn headerText="Mark Range" dataField="markRange" width="50" /> <mx:DataGridColumn headerText="Mark" dataField="mark" width="70" > <mx:itemRenderer> <mx:Component> <mx:ComboBox> <mx:dataProvider> <mx:ArrayCollection> <mx:String>0</mx:String> <mx:String>1</mx:String> <mx:String>2</mx:String> <mx:String>3</mx:String> <mx:String>4</mx:String> <mx:String>5</mx:String> <mx:String>6</mx:String> <mx:String>7</mx:String> <mx:String>8</mx:String> <mx:String>9</mx:String> <mx:String>10</mx:String> </mx:ArrayCollection> </mx:dataProvider> </mx:ComboBox> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns>
