I have a datagrid column that I am using an itemRenderer. Something like this
<mx:itemRenderer>
<mx:Component>
<mx:HBox width="100%" verticalAlign="middle" horizontalGap="0" horizontalScrollPolicy="off" height="22">
...
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
The row heights are fine if the datagrid has any entities. However if there are not entries the rows height is no longer 22. Is there anyway to fix this?
(I have two datagrids beside each other. One is always populated so it has the right height. It looks really bad when the second one is not populated and the rows do not align).
Set the rowHeight property of your DataGrid to 22 (or whatever value you prefer). Then just set the height of the HBox in the itemRenderer to 100%.
Related
Is there a Flex layout class that wraps to the next line and does not size all the items the same size?
I've tried using TileLayout but the problem with that is that all the items are sized to the largest item. I want to set the gap between each to be consistent. Basically a variableColumnWidth type of feature.
<s:List id="exampleList"
selectedIndex="0"
width="100%"
dataProvider="{examplesCollection}"
change="exampleList_changeHandler(event)"
height="250"
>
<s:layout>
<s:TileLayout verticalGap="0" horizontalGap="0" />
</s:layout>
</s:List>
I'm using Apache Flex 4.12.
I think that the quickest way would be to implement an item renderer, like this example. The other option is to implement your own layout which you can adapt to what you need, for this you need to understand very well how layouts work.
I have an Advanceddatagrid that has its variableRowHeight property set to true. I need this AdvancedDataGrid to have its verticalScrollBarPolicy "off" also.
How can I show all rows in that AdvancedADataGrid? (Need to set its height in a so manner that it will be visible all its rows).
Thanks.
Assuming the container your DataGrid is in is tall enough to fit all of the rows, you can set the rowCount property to the number of records in your dataProvider. This will show all of the returned rows with no scroll bar.
<mx:DataGrid dataProvider="{myDataProvider}" rowCount="{myDataProvider.length}">
<mx:columns>
Your columns go here...
</mx:columns>
</mx:DataGrid>
I am using the following code to insert a DataGrid object into a basic Panel:
<mx:DataGrid borderThickness="0"
height="120" dataProvider="{collection}"
rowHeight="12" fontSize="9"
showHeaders="false" verticalGridLines="false">
<mx:columns>
<mx:DataGridColumn dataField="field1" headerText="Field 1"/>
<mx:DataGridColumn dataField="field2" headerText="Field 2"/>
</mx:columns>
</mx:DataGrid>
My point for setting both rowHeight and fontSize properties is that I need the DataGrid to be compact, with very little space between each row. But with this code I end up with most of the text "truncated": only the upper part of the symbols appears on each row, and the rest is cut by some empty space.
This I guess is due to the default margins inside DataGrid cells, that take priority over the text itself when displaying.
Is there a way to fix this problem? And is there any reason why Adobe did not let the margin property be set?
Thanks for your help.
I would suggest you make a custom item renderer based on mx:label ( if the case for you is text only ) and then set the styles you need. Eg. paddingTop/ left/right/bottom.
You can read about ItemRenderers here: Using an item renderer with an MX DataGrid control
I am using Advanced DataGrid of Flex 3 with hierarchical data
and also i added tile list as a item renderer in another column
in that tile list i added radiobutton as item renderer
if i change the radio selected value the hierarchical tree sould expand
if the scroll bar will come the radio button value is changing
<mx:AdvancedDataGrid contextMenu="{cm}" backgroundAlpha="0" styleName="TreeUser" dataProvider="{modelInstance._treeUserXml}"
id="treeAdg" width="100%" height="100%" showHeaders="false" doubleClick="treeDoubleClick(event)" doubleClickEnabled="true"
displayItemsExpanded="false" click="onItemClick(event)" borderStyle="none" rowHeight="25">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="name"/>
<mx:AdvancedDataGridColumn id="treeItem" itemRenderer="com.Frontend.views.TreeUser.TreeStructureTileList"/>
</mx:columns>
this is advanced data grid adding hierarchical data as a data provider
<containers:TileListEx id="tileList" width="100%" height="100%" textAlign="left"
horizontalScrollPolicy="off" verticalScrollPolicy="off" direction="horizontal"
dataProvider="{data.driver}" itemClick="tileItemClick(event)"
backgroundAlpha="0" borderStyle="none" paddingLeft="0" paddingTop="0"
useRollOver="false" rowHeight="25" itemRenderer="com.Frontend.views.TreeUser.tieListRenderer">
</containers:TileListEx>
and this is the tile list where i added data.driver as a dataprovider<mx:RadioButton id="radio" label="{data.name}" click="checkClick(event)" width="100%"/>
if i click the radio button value its changing but if scroll will come the value will changing randomly because of itemrenderer help me to resolve this problem
The problem you're facing is simply that the components created as instances of itemRenderer are reusable across your TileList. So if let's say you click RadioButton that is itemRenderer of first item of the List and then you scroll down, the clicked RadioButton (that dissapeared due to scrolling) will be used as itemRenderer of one of the items that appeared. What you have to do is make your itemRenderer somehow dependent on 'data' property, like adding 'selected' property to it for example and displaying RadioButton as checked if data.selected==true. You also need to set selected to appropriate value in your RadioButton click handler.
I need to display a horizontal list of images using Flex. I can't use a horizontal TileList because the tiles all end up the size of the first item. Is there a flex control that will allow me to have items with different sizes?
Edit: The list of items would ideally come from a data provider. Unfortunately the control in Chetan Sastry's answer only supports data providers if the items have a fixed width.
Here's a code segment where I do what I think you're describing. The images are various sizes, but this displays them in a squared-up grid. The trick (at least for my requirements) is to set the height and minWidth for the container that goes into each cell.
<mx:TileList id="imgTiles" width="100%" height="100%"
paddingTop="2" paddingBottom="2" paddingLeft="2" paddingRight="2"
itemClick="eTilesClick(event)">
<mx:itemRenderer>
<mx:Component>
<mx:VBox horizontalAlign="center"
height="250" minWidth="150"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
borderColor="#D2D2D2" borderThickness="1"
borderStyle="solid">
<mx:Label text="{data.imageCaption}" height="15" fontSize="10" fontWeight="bold"/>
<mx:Image source="{data.thumbnailUrl}" width="100%"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
How about an HBox with a Repeater for your images?