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.
Related
I have a flex datagrid (an advancedDatagrid precisely) due different columns.
The fourth and fifth columns have an editor which display a maskedtextinput for enabling the field editing.
The adjacent column (6th) is clickable (rendered though a linkbutton).
the issue is that if the fifth column shows the textinput after user interaction (after clicking/selecting text/typing) moving the mouse over the linkbutton doesn0't shows the hand cursor, and clicking is not working.
Enlarging the column size makes this issue disappear and the hand cursor is correctly displayed, so I guess it's something related to default width of the textinput used in the fifth column.
Those 2 imageds shows the issue before and after enlarging the column:
This is the editor code for the textinput column, I tried to reduce the width manually costraining it to the real size of the column.
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"
xmlns:components="it.sabacom.generale.view.components.*"
focusIn="mxadvanceddatagriditemrenderer1_focusInHandler(event)"
focusEnabled="true">
<mx:VBox width="50" horizontalAlign="center">
<controls:MaskedTextInput id="smOraFine" inputMask="##:##" change="error10=true;"
width="50" text="{data.hhFine} "/>
</mx:VBox>
I even tried to set mouseChildren="false" useHandCursor="true" buttonMode="true" on the clickable column, with no result.
I have a Flex DataGrid where one individual cell needs to be rendered in a different way from others. Specifically, for one row of the grid, one of its cells should be hidden.
The DataGridColumn is set out like this in my .mxml file:
<mx:DataGridColumn editable="false" dataField="interactive" headerText="Select?" width="45">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selectedField="isInteractive"
click="data.isInteractive=!data.isInteractive; this.parent.parent.dispatchEvent(new Event('interactive_changed'));"
paddingLeft="5"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
My initial thought was to add the condition to mx:CheckBox like this:
<mx:CheckBox visible="{!data.isBackground}" ...
but that doesn't work - in fact it messes up the display in a rather entertaining fashion (one of the other cells in the row gets an extra checkbox... go figure).
I suspect it may be possible by using a custom ItemRenderer class but that seems like a lot of code overhead for a fairly simple case. Any thoughts?
(I'm using Flex 3.5 if it's relevant.)
In Flex 3.5 you need a custom itemRenderer.
The way I'd do it is I'd have two states. Normal and "checkbox" and then when you override the data setter in the itemRenderer change your state accordingly.
In Flex 4+ there's an "itemRendererFunction" property on the Spark datagrid where you can programmatically select the itemRenderer which is pretty cool.
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 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%.