Using item renderer in datagrid
Hi there,
I am trying to pass boolean data from a VO into a selected property of a checkbox component. Any thoughts on how to do this?
<mx:DataGridColumn headerText="Active" width="60" dataField="active"> <--- need to pass this into the selected property
<mx:itemRenderer>
<mx:Component>
<mx:Box horizontalAlign="center">
<mx:CheckBox />
</mx:Box>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selected="{Number(data.active)==1?true:false}" click="data.active=data.active" textAlign="center"/>
</mx:Component>
</mx:itemRenderer>
The click event is present to prevent the user form changing the checkbox state. Hope this works for you.
Similar Messages
-
Multi-Use Item Renderer for DataGrid Column
I have a dataGrid where the first column of the grid displays
an icon for the 'type' of item in the row. I created a custom
itemRenderer component which I reference in its own namespace, and
everything works great. Since this is a pretty common concept, I'd
thought that I'd be able to re-use that itemRenderer throughout the
application, but everytime I try to call the itemRenderer in
another dataGrid, I get 2 errors saying "the inlineComponent could
not be found" and then because of that "Access of undefined
property".
It doesn't make sense for an itemRenderer to be only good for
one use, so I'm obviously missing some fundamental issue. Can
someone enlighten me?Hah, found it. It is an mxml example, and implements
IDropInListItemRenderer. It for an image renderer, but you will be
able to see what to do.
Tracy
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
horizontalAlign="center" verticalAlign="middle"
width="16" height="16"
implements="mx.controls.listClasses.IDropInListItemRenderer"
>
<mx:Script><![CDATA[
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.controls.listClasses.BaseListData;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.DataGrid;
[Bindable]
private var source:String;
private var _listData:BaseListData;
public function get listData():BaseListData
return _listData;
public function set listData(value:BaseListData):void
_listData = value;
invalidateProperties();
override protected function commitProperties():void
super.commitProperties();
if (_listData is DataGridListData)
var dgld:DataGridListData = _listData as DataGridListData;
source =
data[DataGrid(dgld.owner).columns[dgld.columnIndex].dataField];
]]></mx:Script>
<mx:Image source="{source}"/>
</mx:VBox> -
Problem with checkbox item renderer in datagrid
I have a data grid having check box as an item renderer. I have viewed many posts in this forum but nothing useful in my case. I am failed to bind my datagrid itemrenderer checkbox with the field of dataprovider i.e. listUnitMovement.CHECK_PATH. Then I have to traverse data provider to check which checkboxes are checked.
[Bindable]
var listUnitMovement:XMLList=null;
In a function call
public function init(event:ResultEvent):void
listUnitMovement=event.result.unitmovement;
<mx:DataGrid id="dg_country"
dataProvider="{listUnitMovement}"
enabled="true">
<mx:columns>
<mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selectedField="CHECK_PATH" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Latitude" dataField="NEW_LAT" visible="false"/>
<mx:DataGridColumn headerText="Longitude" dataField="NEW_LONG" visible="false"/>
<mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:Button label="Details"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>Hi,
Do you want to just check/uncheck the checkboxes based on the CHECK_PATH field.
Do you want something like this...
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;[
Bindable]
private var listUnitMovement:ArrayCollection = new ArrayCollection([{CHECK_PATH:true,NEW_LAT:109.233,NEW_LONG:232.22},{CHECK_PATH:true,NEW_LAT:109.233,NEW_LONG:232.22},{CHECK_PATH:false,NEW_LAT:133.233,NEW_LONG:702.22}]);]]>
</mx:Script>
<mx:DataGrid dataProvider="{listUnitMovement}">
<mx:columns>
<mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selectedField="CHECK_PATH" change="data.CHECK_PATH=selected" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="NEW_LAT"/>
<mx:DataGridColumn dataField="NEW_LONG"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
Please let me know clearly what's your problem...Do you want to just bind the check box based on XmlList or something else..?
Thanks,
Bhasker Chari.S -
Item renderer in datagrid with actionscript
Hi
I want to implement a datagrid similar to the one given int
the starting flex examples but in actionscript. I am having a
problem with the itemRenderer. I can't figure it out how I cam
create a imagerender in a datagridcolumn.
My code is:
var dataG:DataGrid = new DataGrid();
dataG.dataProvider = xmlList;
var coluna:DataGridColumn = new DataGridColumn();
coluna.dataField="nome";
coluna.headerText="Title";
var coluna2:DataGridColumn = new DataGridColumn();
coluna2.dataField="thumbnail";
coluna2.headerText="Title";
var imagem:Image = new Image();
imagem.height = 75;
imagem.source = "../tb/"+instrumentos.thumbnail+".jpg";
//HERE RELIES MY PROBLEM -HOW TO ASSOCIATE AN IMAGE TO THE
ITEM RENDERER
coluna2.itemRenderer = new ClassFactory(imagem);
var lalala:Array = new Array();
lalala.push(coluna);
lalala.push(coluna2);
dataG.columns = lalala;
thanks in advance"jahh_drum" <[email protected]> wrote in
message
news:ghcs5u$p2d$[email protected]..
> Hi
>
> I want to implement a datagrid similar to the one given
int the starting
> flex
> examples but in actionscript. I am having a problem with
the itemRenderer.
> I
> can't figure it out how I cam create a imagerender in a
datagridcolumn.
>
> My code is:
>
> var dataG:DataGrid = new DataGrid();
> dataG.dataProvider = xmlList;
>
> var coluna:DataGridColumn = new DataGridColumn();
> coluna.dataField="nome";
> coluna.headerText="Title";
>
> var coluna2:DataGridColumn = new DataGridColumn();
> coluna2.dataField="thumbnail";
> coluna2.headerText="Title";
>
>
> var imagem:Image = new Image();
> imagem.height = 75;
> imagem.source = "../tb/"+instrumentos.thumbnail+".jpg";
>
> //HERE RELIES MY PROBLEM -HOW TO ASSOCIATE AN IMAGE TO
THE ITEM
> RENDERER
> coluna2.itemRenderer = new ClassFactory(imagem);
>
> var lalala:Array = new Array();
> lalala.push(coluna);
> lalala.push(coluna2);
>
> dataG.columns = lalala;
ClassFactory takes a class, not an instance.
Try something like:
foo:ClassFactory = new ClassFactory(Image)
foo.properties= {height=75,
source:"../tb/"+instrumentos.thumbnail+".jpg"};
coluna2.itemRenderer = foo;
Note that using a ClassFactory this way will give you the
same image in
every renderer to start out with. However, I believe that
image
itemRenderers by default will take their source from the data
property when
that gets set.
HTH;
Amy -
I have a button component as a Item renderer in the column of
the datagrid .
I am not able to access the Itemrenderer component(which I
declared in other mxml file in the datagrid)
This is the data grid where I have the Itemrenderer:
<mx:DataGrid id="dgCondition1"
variableRowHeight="true" width="100%" height="150"
verticalScrollPolicy="auto" editable="true"
dataProvider="{initDataGrid_Create}" >
<mx:columns>
<mx:DataGridColumn headerText="" dataField="conditi"
/>
<mx:DataGridColumn headerText="Condition"
dataField="syntax" width="300" />
<mx:DataGridColumn headerText="1" dataField="value"
width="80" editable="false" itemRenderer="buttonRenderer"/>
<mx:DataGridColumn dataField="value" headerText="2"
itemRenderer="buttonRenderer" />
I created a new mxml component for this button component
.(buttonRenderer.mxml)
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="400" height="300">
<mx:Script source="..TableDataGridBtn.as" />
<mx:Button id="col1" label="" width="75"
click="getDetail(event,col1)" />
</mx:VBox>
The Problem is I am not able to access the buttonRenderer in
the datagrid itemRenderer tag .
It says "Access of Undefined Property buttonRenderer"."nash99" <[email protected]> wrote in
message
news:g7alc5$nkd$[email protected]..
> So
> Is it that I can Use this ItemRenderer tag in the
Application Tags only
> Is there any other way I can use them in mxml components
because I am
> using
> the same button in 16 datagrid columns , I dont wan't to
make the code
> look
> redundant.
http://www.adobe.com/livedocs/flex/3/html/help.html?content=intro_3.html -
Item renderer on DataGrid (not DataGridColumn)
It seems that all the published examples of using an item renderer on a DataGrid use the itemRenderer property of DataGridColumn.
I don't think I can do this because my columns are created at run time, depending on the contents of the data provider.
I have therefore tried to assign my item renderer (a subclass of Canvas) directly to the DataGrid.
1. This works in MXML when the renderer is inline.
2. It sees to work when the renderer is an Actionscript class assigned to the DataGrid's itemRenderer property.
3. It does NOT work when the renderer is Flex component assigned to the DataGrid's itemRenderer property. This compiler error is reported: Initializer for 'itemRenderer': cannot parse value of type mx.core.IFactory from text 'comp:CellRenderer'.
I prefer to use the last method. Is there a way to fix this error?
If not, is it possible to attach the item renderer to each DataGridColumn as it is created? DataGrid does not seem to have a suitable event that reports when a column is created.
Aplogies if this is elementary stuff. I am a real Flex newbie. I am using Flex Builder 3.0
Andy KirkhamA code example would be helpful here, but from your error message it
looks like you may be doing the following
<mx:DataGrid itemRenderer="comp:CellRenderer"/>
Instead of this, you need to use the fully qualified class name of
CellRenderer, eg.
com.renderers.CellRenderer
Look at the definition of 'comp' towards the top of your MXML file, it
will be something like:
xmlns:comp="blah.blah.blah.*"
Your itemRenderer property should then be set to:
blah.blah.blah.CellRenderer -
Inbuilt Item Rendering inside DataGrid .
Hi ,
Please find the screen shot attached with this Thread .
The data is been populated into the Datagrid from DataBase using ArrayCollection as DataProvider .
Now i want to have Radio Buttons displayed at the begning of the each row of Names Column .
When i tried to use , inbuilt itemRenderer as mx.controls.RadioButton , inside DataGridColumn of 'Names' Column of DataGrid , the Data appeared in such a way that all the Data inside the Names Column is repalced by showing only RadioButtons .
Please tell me if this is possible using Inbuilt Item Rendering itself??(As Custom Rendering seems tough for me rigjt now )
Or suggest me an easy approach , basically my requirement is that i want to get the Selected Value Object into a function for doing Upadate and Delete facility .
Please help
Thanks in advance .Thanks for the reply , sorry for th
late reply as i dont have Flex at my Work place .
This is my code :
<mx:DataGrid id="MyDG" height="100%" width="100%"
dataProvider="{flightList}" change="GetTheValue()">
<mx:columns>
<mx:DataGridColumn headerText="Names" dataField="uname">
<mx:itemRenderer>
mx.controls.RadioButton
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Pwds" dataField="pass" >
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
This is the screen shot earlier and now afeter adding Item Rendering , Any help .
Please find the screen shots attached -
Changing text color of item renderer in datagrid
Hi,
I have the following datagrid:
<mx:DataGridColumn field="name" ......... />
<mx:DataGridColumn itemRenderer="myRenderer" ...... />
In myRenderer, I extend from the TextInput class; with the
text color:WHITE
My question is:
When I do a mouse rollover/selection on any row of the
datagrid, how can I change the text color of my renderer?
If I add the rollover/selection event listener for my
renderer, it will only change the color when my mouse is over its
column.
I want it to change colour whenever the row is selected/
rollover.
Thank you very much.
Regards,
hyHi,
The rollOverColor and selectionColor style on the Datagrid
will only work for the normal columns.
Since my column extends from the TextInput, the rollOverColor
and selectionColor style does not seem to have any effect on the
itemrenderer.
hy -
Hi,
I have a simple datagrid in which one of the column is a
quantity field. The user can change the quantity for any row. So I
have something like:
<mx:DataGrid dataProvider="{arrTest}" width="100%"
height="100%" >
<mx:columns>
<mx:Array>
<mx:DataGridColumn dataField="Name" />
<mx:DataGridColumn
headerText="Quantity" dataField="Quantity"
itemRenderer="mx.controls.TextInput" />
</mx:Array>
</mx:columns>
</mx:DataGrid>
I am not exactly sure how should I get all the updated values
in the datagrid so that I can update the database.
Thanksyou wouldnt need an itemRenderer in this case. make the last
datagrid column Editable and listen to itemEdit event, or iterate
through the underlying arraycollection to get the modified data of
the datagrid. -
Item renderer using action script
Hi,
Can anybody tell me how to use item renderers using actions script,
I have a data grid and iam using item renderer in mxml works fine but it is causing memory issues >
So i want to know to use item renderers in action script to avoid memory issue.
Thank You,
Anuuse the ClassFactory
example:
<!-- MyCombo.mxml -->
<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml" >
</mx:ComboBox >
and in ActionScript
private var myComboFac:ClassFactory = new ClassFactory(MyCombo);
private function myFunction():void
colCombo.itemRenderer = myComboFac;
and in DataGrid
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:columns>
<mx:DataGridColumn id="colCombo" />
</mx:columns>
</mx:DataGrid>
regards
Leonardo França
Adobe Certified Expert Flex 3 with AIR
Adobe Certified Expert Rich Internet Application Specialist v1.0
Adobe Certified Expert Flash CS3 Professional
Certified Professional Adobe Flex 2 Developer
Adobe Certified Professional Flash MX 2004 Developer
http://www.leonardofranca.com
http://twitter/leofederal
Manager AUGDF - Adobe User Group do Distrito Federal
http://www.augdf.com.br
http://twitter/augdf
anu3000 escreveu:
Hi,
Can anybody tell me how to use item renderers using actions script,
I have a data grid and iam using item renderer in mxml works fine but it is causing memory issues >
So i want to know to use item renderers in action script to avoid memory issue.
Thank You,
Anu
> -
Datagrid item renderer destroys on mouse over
Hi,
I used Flex 3.5 datagrid. I used item renderes in my datagrid. and i set 'rendererIsEditor = true'.
Everything is very smooth and good. But somtimes my datagrid acting badly. When i put cursor on itemRenderer, It open-up for
editing. When i move mouse, item renderer destroyed.
Once it happens it is the default behaviour of my datagrid. No editing can be performed.
But i can not reproduce it always. sometimes it a happens.
please help me. anybody know about this?Simplify your test case. Try using a simple TextInput as the renderer and
see if you have the same problem. -
Spark datagrid item renderer - adjust height
I am using a textinput as an item renderer for DataGrid:
<s:GridColumn dataField="Comment" headerText="Comment"
itemRenderer="DataGridRenderer">
</s:GridColumn>
// Renderer
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:gridEditorClasses="spark.components.gridEditorClasses.*"
xmlns:ns="library://commons.stoneriver.com"
>
<fx:Script>
<![CDATA[
override public function prepare(hasBeenRecycled:Boolean):void
super.prepare(hasBeenRecycled);
if (data)
if(data.FormCode == "")
Comment.text = data[column.dataField];
Comment.setStyle("backgroundColor", 0xFFFFFF);
else
Comment.text = "";
Comment.setStyle("backgroundColor", 0xB1CCF0);
]]>
</fx:Script>
<!--- The renderer's visual component. -->
<s:TextInput id="Comment" width="100%" borderVisible="false" fontSize="{column.grid.dataGrid.getStyle('fontSize')}"/>
</s:GridItemRenderer>
How can I adjust a height of this renderer to fill the whole cell? Right now it comes out with a smaller height than a row height.
ThanksI actually got word wrapping working with RichEditableText . But now when I specify height=100% all rows have the same extremely large height.
-
Using a bitmap object as a item renderer in a datagrid
I have a UIComponent grabbed has a bitmap, and stored in an
array collection.
I want to display a thumbnail in a datagrid, I can make a
itemRenderer for an image with a local or remote file as a source.
But how do I use the bitmap in the array collection in an item
renderer.
Thanks
DeanHere is an example with a HorizontalList:
<?xml version="1.0" ?>
<!-- itemRenderers\htlist\myComponents\Thumbnail.mxml
-->
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
horizontalAlign="center"
verticalGap="0" borderStyle="none" backgroundColor="white"
>
<mx:Image id="image" width="60" height="60"
source="{data.image}"/>
<mx:Label text="{data.name}" width="120"
textAlign="center"/>
<mx:Label text="${data.price}" fontWeight="bold"/>
</mx:VBox>
<?xml version="1.0"?>
<!-- itemRenderers\htlistMainlistThumbnailRenderer.mxml
-->
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml">
<mx:Model id="catalog" source="catalog.xml"/>
<mx:HorizontalList id="myList"
columnWidth="125"
rowHeight="125"
columnCount="4"
dataProvider="{catalog.product}"
itemRenderer="myComponents.Thumbnail"/>
<mx:LinkButton label="Product images courtesy of Lavish"
click="navigateToURL(new URLRequest('
http://www.shoplavish.com'),
'_blank')"/>
</mx:Application>
<?xml version="1.0"?>
<catalog>
<product id="1">
<name>USB Watch</name>
<price>129.99</price>
<image>assets/products/usbwatch.jpg</image>
<thumbnail>assets/products/usbwatch_sm.jpg</thumbnail>
</product>
<product id="2">
<name>007 Digital Camera</name>
<price>99.99</price>
<image>assets/products/007camera.jpg</image>
<thumbnail>assets/products/007camera_sm.jpg</thumbnail>
</product>
<product id="3">
<name>2-Way Radio Watch</name>
<price>49.99</price>
<image>assets/products/radiowatch.jpg</image>
<thumbnail>assets/products/radiowatch_sm.jpg</thumbnail>
</product>
<product id="4">
<name>USB Desk Fan</name>
<price>19.99</price>
<image>assets/products/usbfan.jpg</image>
<thumbnail>assets/products/usbfan_sm.jpg</thumbnail>
</product>
<product id="5">
<name>Caffeinated Soap</name>
<price>19.99</price>
<image>assets/products/soap.jpg</image>
<thumbnail>assets/products/soap_sm.jpg</thumbnail>
</product>
<product id="6">
<name>Desktop Rovers</name>
<price>49.99</price>
<image>assets/products/rover.jpg</image>
<thumbnail>assets/products/rover_sm.jpg</thumbnail>
</product>
</catalog> -
DataGrid Using an item renderer that spans an entire row
Anyone know how can I do this using DataGrid?
I dont understand how Can I do it. Below I have a source code that I'm working with this case. I have 2 columns and I would like when i click in combobox my item renderer fill all rows.
Look I have this code (Main Application and Renderer):
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Resize target="{this}"/>
</mx:Transition>
</mx:transitions>
<mx:states>
<mx:State name="normal"/>
<mx:State name="expanded"/>
</mx:states>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var ac:ArrayCollection;
private function changeState(event:Event) : void {
if( event.target.selected )
currentState = "expanded";
else
currentState = "normal";
override public function set data(value:Object) : void {
super.data = value;
ac = new ArrayCollection(value.models);
]]>
</fx:Script>
<mx:CheckBox label="{data.title}" click="changeState(event)"/>
<mx:List dataProvider="{ac}" y="20" width="100%" includeIn="expanded"/>
</mx:Canvas>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:ct="*"
height="100%" width="100%">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var dp:ArrayCollection = new ArrayCollection([
{title:"Ford", style: 'Modern', models:["Fusion","Taurus","Mustang"]},
{title:"Volkswagen", style: 'Normal', models:["Passat","Jetta","Beetle", "Golf", "GTI"]},
{title:"Infiniti", style: 'Modern', models:["FX35","GX35","Q45","M35"]},
{title:"Audi", style: 'Esport', models:["A3","A4","A6"]}
]]>
</fx:Script>
<mx:DataGrid dataProvider="{dp}" variableRowHeight="true" height="100%" width="100%">
<mx:columns>
<mx:DataGridColumn dataField="title" headerText="title" itemRenderer="DetailItem"/>
<mx:DataGridColumn dataField="style" headerText="style" />
</mx:columns>
</mx:DataGrid>
</s:Application> -
How to dispatch custom events from an item renderer used for Datagrid Column
Hi,
I am using an Item Renderer for a Data Grid Column and in that mxml, I am dispatching a custom event with data.
But the main mxml which has the DataGrid is not able to resolve the event. How can I solve this?
ThanksHi,
This is the constructor for Event.
public function Event(type:String, bubbles:Boolean = false, cancelable:Boolean = false)
When you created your custom event after extending from Event, for the parent container receives the event, the bubbles property must be set to true.
Please check if you have done so. That should solve the problem. Let me know if it doesn't.
Nishad
Maybe you are looking for
-
Google searches throw Javascript error "Debug Error: Exception...."
I went away for a week. Everything fine. Since I got back (May 6 2010) when I click on any Google search result a pop-up box appears (sometimes when the search results page first appears before clicking anything) with this message: "Debug Error:Excep
-
please suggest me how to customise/configure commision agent in SAP.
-
How to view thumbnails of open files in elements 12?
For some reason i cannot figure out how to see my open files as thumbs when editing in elements 12. I am sure it is something i am overlooking. thanks for the help.
-
I need to get my photos off my iphone but all I get is the apple sign and nothing else? Help!
I dropped my iphone in a cup of coffee and it turned on for a short amount of time and now all it will do is show me the apple symbol for about 10 seconds and isnt recognised on my laptop please help!
-
Dear All, While posting Invoice verification through Tcode: MIR7 or MIRO & filling up the field BusPlace/ Section code. The same is not getting updated for the line items of TDS after the document is posted. In this case J1INCHLN cannot be processed.