I have a DataGrid,
<mx:DataGrid styleName="alternateColor"
verticalScrollBarStyleName="verticalScrollStyle"
headerSeparatorSkin="uiExtensions.DataGridHeaderSeparators"
width="100%" height="100%" editable="false" color="#000000"
verticalGridLines="false" variableRowHeight="true"
itemEditEnd="processData(event);" sortableColumns="false">
<mx:columns>
<mx:DataGridColumn wordWrap="true" dataField="Name">
<mx:itemRenderer>
<mx:Component>
<mx:Box>
<mx:Text id="tbName" selectable="false"
width="100%" fontSize="12" text="{data.Name}"/>
<mx:Text id="tbcontact" selectable="false"
width="100%" text="{data.Contact}"/>
</mx:Box>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
The datagrid does not scroll down after i've added 2 text components in a datagridcolumn.
The scrollbar scrolls back up on pulling it down.
Appreciate any help.
Thanks.
Scrolling is enabled in a DataGrid when the height of the grid is not enough to display all the items in its data provider; not when you add more controls to its columns. You have just defined a data grid with a single column that has two Text controls. Assign a big enough data to the dataProvider of the grid and it will work.
Btw, why are you using the Box control instead of HBox or VBox?
Issue Solved,
I used a VBox and Label instead of the Box and Text tags in the code posted above.
My code now looks like this...
<mx:Component>
<mx:VBox horizontalGap="0" verticalGap="0">
<mx:Label id="tbclassified" selectable="true" width="100%" fontSize="11" text="{data.Classified}"/>
<mx:HBox horizontalGap="0" verticalGap="0">
<mx:Label id="tbcategory" textAlign="left" selectable="true" width="100%" fontStyle="italic" color="#9F2200" text="{data.ClassifiedCategory}"/>
<mx:Label id="tbcontact" textAlign="right" selectable="true" width="100%" text="{data.Name} - {data.Contact}"/>
</mx:HBox>
</mx:VBox>
</mx:Component>
Related
<mx:List columnCount="5" rowCount="11" width="100%" height="100%" dataProvider="{parentDocument.crewPositionsAC}" useRollOver="false" alternatingItemColors="[0xffffff, 0xe5e5e5]" borderStyle="none">
<mx:itemRenderer>
<mx:Component>
<mx:Text text="{data}" color="#840021" selectable="false" />
<mx:ComboBox id="studentType">
<mx:ArrayCollection>
<mx:String>BFA1</mx:String>
<mx:String>BFA2</mx:String>
<mx:String>BFA3</mx:String>
<mx:String>MFA1</mx:String>
<mx:String>MFA2</mx:String>
<mx:String>MFA3</mx:String>
<mx:String>MFAw1</mx:String>
<mx:String>MFAw2</mx:String>
<mx:String>MFAw3</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
When I try to save it, I get the error:
Parse error at '<mx:ComboBox>'.
Anybody able to see what's causing the error?
You can only have a single component defined as an in-line itemRenderer. You have two defined, a Text and a ComboBox. The solution is to wrap them up in a container. I used an HBox for the purposes of demonstration.
<mx:List columnCount="5" rowCount="11" width="100%" height="100%" dataProvider="{parentDocument.crewPositionsAC}" useRollOver="false" alternatingItemColors="[0xffffff, 0xe5e5e5]" borderStyle="none">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Text text="{data}" color="#840021" selectable="false" />
<mx:ComboBox id="studentType">
<mx:ArrayCollection>
<mx:String>BFA1</mx:String>
<mx:String>BFA2</mx:String>
<mx:String>BFA3</mx:String>
<mx:String>MFA1</mx:String>
<mx:String>MFA2</mx:String>
<mx:String>MFA3</mx:String>
<mx:String>MFAw1</mx:String>
<mx:String>MFAw2</mx:String>
<mx:String>MFAw3</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
In Flex3, I could center a checkbox within a datagrid column using this:
<mx:DataGridColumn textAlign="center" itemRenderer="mx.controls.CheckBox"/>
That is, the centering is specified on the column. In Flex4, that doesn't work. I have to put the centering on the renderer rather than on the column.
<mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox textAlign="center"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
Does anyone know if this change from Flex3 to Flex4 was intentional?
You need to put the checkbox inside a canvas:
<mx:Component>
<mx:Canvas width="100%" height="100%">
<mx:CheckBox textAlign="center"/>
</mx:Canvas>
</mx:Component>
I have an ArrayCollection named authors with lot of texts of different size. I would like to list all info about authors in a way that each item has a size according to the text. Here is the code:
<mx:List dataProvider="{authors}">
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="100%">
<mx:Text text="{data.name}"/>
<mx:Text text="{data.about}" width="100%"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
I have tried many different things but nothing helped. Any ideas? Thx
Try something like this:
<mx:List dataProvider="{authors}" height="300" variableRowHeight="true" width="200">
<mx:itemRenderer>
<mx:Component>
<mx:VBox paddingLeft="0" paddingRight="0">
<mx:Text text="{data.name}" />
<mx:Text text="{data.about}" width="{explicitWidth}" />
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
Have you tried using the fontSize attribute?
<mx:List dataProvider="{authors}">
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="100%">
<mx:Text text="{data.name}" fontSize='30'/>
<mx:Text text="{data.about}" width="100%"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
Alternatively, using the htmlText property will allow you to format the text with HTML: http://livedocs.adobe.com/flex/3/html/help.html?content=textcontrols_04.html
i want to populate a horizontalList component from a xml file, the width value will be inside the xml file as well with all the data.
actually i have this code:
<mx:Model id="epg" source="epg.xml" />
<mx:Component id="customRend">
<mx:Label text="{data.description}" width="{data.width}"/>
</mx:Component>
<mx:HBox x="82" y="104" width="1203" height="113" verticalAlign="middle">
<mx:HorizontalList width="100%" dataProvider="{epg.channel.program}"
itemRenderer="{customRend}" horizontalScrollPolicy="off">
</mx:HorizontalList>
</mx:HBox>
but it sets same width for all elements in the list.
Do you know how to do this?
Thanks a lot.
Br
Two ways to do this:
Set label.width = data.width on creationComplete
Wrap Label in Canvas
The creationComplete way (probably because an itemRenderer should be a Container?):
<mx:HorizontalList width="100%" dataProvider="{epg.channel.program}" horizontalScrollPolicy="off">
<mx:itemRenderer>
<mx:Component id="customRend">
<mx:Label text="{data.description}" creationComplete="this.width = data.width"/>
</mx:Component>
</mx:itemRenderer>
</mx:HorizontalList>
... or wrapped in Canvas:
<mx:HorizontalList width="100%" dataProvider="{epg.channel.program}" horizontalScrollPolicy="off">
<mx:itemRenderer>
<mx:Component id="customRend">
<mx:Canvas horizontalScrollPolicy="off">
<mx:Label text="{data.description}" width="{data.width}"/>
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:HorizontalList>
Hope that helps,
Lance
i want show a image onmouse over inside data grid to each row,so if i click on that image,some function should call(as per my requirement).
how can i do this ?
<mx:DataGrid width="320" height="624" verticalScrollPolicy="on" dataProvider="{blocked_Usernames}" editable="true">
<mx:columns>
<mx:DataGridColumn headerText="Blocked User Name" dataField="blockedUsernames" editorDataField="value"/>
<mx:DataGridColumn width="20" editable="false">
<mx:itemRenderer >
<mx:Component >
<mx:Image source="#Embed('assets/image/Close.png')" width="10" height="10" autoLoad="false"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
You have to create a new MXML Component (a HBox with a Label and an Image will do the trick) and use it as an itemRenderer.
You can check this example from the Adobe website.