Item renderer - accessing component properties

I have a component containing datagrid. Inside itemrenderer I
am aware of the data and listData object that are availlable. Is
there also a way to get at the properties of the component that
contains the datagrid.
For one of the columns I want to compare the passed data with
one of the properties (data maintained at component level) of the
component and use it to determine the contents to be
rendered.

I understand Application.application but let me clarify my
problem.
My application object has several flex components. Each
component has one or more datagrids. All Datagrids use a common
itemrender. Inside itemrenderer I can use Application.application
to get to parent object but then how do I know which component's
datagrid called the renderer.

Similar Messages

When to use Drop In Item renderer and InLine Item Renderers ??

Hi ,
I am getting confused in where to use Inline ItemRenderer and DropIn Item Renderer .
What i feel is that DROP in Item Renderer are easy to use , and those can satisfy any requirements .
What i read from tutorilas that we cant use Drop In because they say , The only drawback to using drop in is that them is that you cannot configure them
Please help me .

Hi Kiran,
Here is the detailed explanation you needed:
You can also refer the link below:
http://blog.flexdevelopers.com/2009/02/flex-basics-item-renderers.html
Drop-In Item Renderers
Drop-In Item Renderers are generic in nature and don't rely on specific data fields to render data. This allows them to be used with a wide range of data sets, hence, the term “drop-in”. Drop-In Item Renderers can be “dropped-in” to any list-based control regardless of the dataprovider’s data properties.
In our previous example, the employee photo property requires use of a custom Item Renderer to render properly in the UI. In this scenario the Image component satisfies our rendering needs out of the box. Implemented as a Drop-In Item Renderer, the Image component takes any data property regardless of name and uses it as the Image component's source property value. Assuming our employee photo property contains a valid image path, the Image Drop-In Item Renderer will work perfectly and resolve the image path as an image in the UI.

<mx:DataGridColumn dataField="photo"
 headerText="Employee Photo"
 itemRenderer="mx.controls.Image"/>
Drop-In Item Renderers are simple and easy to use and satisfy specific use cases nicely. However, they provide no flexibility whatsoever. If your needs are not satisfied by a Drop-In Item Renderer, you must create your own Item Renderer as an inline component or an external component.
Inline Item Renderers
Generally used for simple item rendering requiring minimal customization, inline Item Renderers are defined as a component nested within the MXML of your list-based control.
It is important to note that Item Renderers nested within the itemrender property of a list-based control occupy a different scope than the list-based control. Any attempt to reference members (properties or methods) of the parent component from the nested Item Renderer component will result in a compile-time error. However, references to the members of the parent component can be achieved by utilizing the outerDocument object.
<mx:DataGrid id="myGrid" dataProvider="{gridData}">
 <mx:columns>
 <mx:DataGridColumn headerText="Show Relevance">
 <mx:itemRenderer>
 <mx:Component>
 <mx:Image source="{'assets/images/indicator_' + data.showRelevance + '.png'}"
 toolTip="{(data.showRelevance == 1) ? 'On' : 'Off'}"
 click="outerDocument.toggle()" />
 </mx:Component>
 </mx:itemRenderer>
 </mx:DataGridColumn>
 </mx:columns>
</mx:DataGrid>
Remember, rules of encapsulation still apply. Mark all properties or methods public if you want them accessible by your inline Item Renderer. In the previous example, the toggle() method must have a public access modifier to expose itself to the inline Item Renderer.
public function toggle():void
Inline Item Renderers can also be reusable by creating a named component instance outside of the list-based control. This component must have an id property and contain the rendering logic of the Item Renderer. Using data bindings, the component is assigned to the itemrenderer property of one or more data properties of a list-based control.

<mx:Component id="ImageRenderer">
 <mx:VBox width="100%" height="140"
 horizontalAlign="center" verticalAlign="middle">
 <mx:Image source="{'assets/'+data.image}"/>
 <mx:Label text="{data.image}" />
 </mx:VBox>
</mx:Component>

<mx:DataGridColumn headerText="Image"
 dataField="image" width="150"
 itemRenderer="{ImageRenderer}"/>
In the previous example, note that the Item Renderer component contains 2 UI controls – Image and Label. When using multiple controls within an Item Renderer, a layout container is required. In this example, a VBox was used.
If this post answers your question or helps, please kindly mark it as such.
Thanks,
Bhasker Chari
Message was edited by: BhaskerChari

Accessing S:List Checkbox Item Renderer Outside the Renderer

Hi All,
I have an S:List, with a checkbox item renderer. I was to be able to access the selected portion of the renderer to create a new function that at the press of a button this will delect all the current selected items in the list.
Doco states that i should be able to do this just by setting the selectedIndex to -1. But not sure if this is specific to 4.5?? But it is not working for me.
Below is my current list. Outside of this list flashbuilder does not know about chkList, or even selected. How can i get access to this to deslect all?
<s:List
id="ltattributes">
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<fx:Script>
<![CDATA[
import mx.events.ItemClickEvent;
protected function chkList_changeHandler(event:Event):void
var e:ItemClickEvent = new ItemClickEvent(ItemClickEvent.ITEM_CLICK, true);
data.selected = event.currentTarget.selected;
e.item = data;
e.index = itemIndex;
dispatchEvent(e);
]]>
</fx:Script>
<s:CheckBox id="chkList" selected="false" label="{data.displayname}" change="chkList_changeHandler(event)"/>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
Thanks

Try: dataGroup.getElementAt().
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui

Range component in custom item renderer

Hi,
I am trying to put a spark Range component into the labelItemRenderer for flex mobile. Everytime I add it I get the error: "Skin for (long directory name for my range component) cannot be found". The custom item renderer is an actionscipt class because I read this is the best way to make them for mobile. I'll put the error in the bottom of the post.
If anyone has any idea why this could be happening or if anyone knows a possible way around this it would be extremely helpful. I basicaly just need a list where each item has a label on side and then a progress bar on the other side.
Thanks.
Here is the full error, ill put a star on the line where the addChild method gets called in my item renderer for the range component.
Error: Skin for HoosFit0.TabbedViewNavigatorApplicationSkin5.tabbedNavigator.TabbedViewNavigatorSkin7.con tentGroup.ViewNavigator1.ViewNavigatorSkin12.contentGroup.
FCfacilities139.SkinnableContainerSkin141.contentGroup.Group143.facilityList.ListSkin145.S croller147.ScrollerSkin148.DataGroup146.FCfacilitiesInnerClass0_157.Range154 cannot be found.
          at spark.components.supportClasses::SkinnableComponent/attachSkin()[E:\dev\4.y\frameworks\pr ojects\spark\src\spark\components\supportClasses\SkinnableComponent.as:698]
          at spark.components.supportClasses::SkinnableComponent/validateSkinChange()[E:\dev\4.y\frame works\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:443]
          at spark.components.supportClasses::SkinnableComponent/createChildren()[E:\dev\4.y\framework s\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:406]
          at mx.core::UIComponent/initialize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UI Component.as:7634]
          at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:7495]
          at mx.core::UIComponent/addChild()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UICo mponent.as:7176]
*** at views::itemRenderer2/set data()[/Users/evan/Documents/Adobe Flash Builder 4.6/HoosFit/src/views/itemRenderer2.as:73]
          at spark.components::SkinnableDataContainer/updateRenderer()[E:\dev\4.y\frameworks\projects\ spark\src\spark\components\SkinnableDataContainer.as:606]
          at spark.components.supportClasses::ListBase/updateRenderer()[E:\dev\4.y\frameworks\projects \spark\src\spark\components\supportClasses\ListBase.as:1106]
          at spark.components::DataGroup/setUpItemRenderer()[E:\dev\4.y\frameworks\projects\spark\src\ spark\components\DataGroup.as:1157]
          at spark.components::DataGroup/initializeTypicalItem()[E:\dev\4.y\frameworks\projects\spark\ src\spark\components\DataGroup.as:327]
          at spark.components::DataGroup/ensureTypicalLayoutElement()[E:\dev\4.y\frameworks\projects\s park\src\spark\components\DataGroup.as:384]
          at spark.components::DataGroup/measure()[E:\dev\4.y\frameworks\projects\spark\src\spark\comp onents\DataGroup.as:1467]
          at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::measureSizes()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:8506]
          at mx.core::UIComponent/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\ UIComponent.as:8430]
          at mx.managers::LayoutManager/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx \managers\LayoutManager.as:665]
          at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.y\frameworks\projects\framewo rk\src\mx\managers\LayoutManager.as:816]
          at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.y\frameworks\projects \framework\src\mx\managers\LayoutManager.as:1180]

Hi,
I am trying to put a spark Range component into the labelItemRenderer for flex mobile. Everytime I add it I get the error: "Skin for (long directory name for my range component) cannot be found". The custom item renderer is an actionscipt class because I read this is the best way to make them for mobile. I'll put the error in the bottom of the post.
If anyone has any idea why this could be happening or if anyone knows a possible way around this it would be extremely helpful. I basicaly just need a list where each item has a label on side and then a progress bar on the other side.
Thanks.
Here is the full error, ill put a star on the line where the addChild method gets called in my item renderer for the range component.
Error: Skin for HoosFit0.TabbedViewNavigatorApplicationSkin5.tabbedNavigator.TabbedViewNavigatorSkin7.con tentGroup.ViewNavigator1.ViewNavigatorSkin12.contentGroup.
FCfacilities139.SkinnableContainerSkin141.contentGroup.Group143.facilityList.ListSkin145.S croller147.ScrollerSkin148.DataGroup146.FCfacilitiesInnerClass0_157.Range154 cannot be found.
          at spark.components.supportClasses::SkinnableComponent/attachSkin()[E:\dev\4.y\frameworks\pr ojects\spark\src\spark\components\supportClasses\SkinnableComponent.as:698]
          at spark.components.supportClasses::SkinnableComponent/validateSkinChange()[E:\dev\4.y\frame works\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:443]
          at spark.components.supportClasses::SkinnableComponent/createChildren()[E:\dev\4.y\framework s\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:406]
          at mx.core::UIComponent/initialize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UI Component.as:7634]
          at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:7495]
          at mx.core::UIComponent/addChild()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UICo mponent.as:7176]
*** at views::itemRenderer2/set data()[/Users/evan/Documents/Adobe Flash Builder 4.6/HoosFit/src/views/itemRenderer2.as:73]
          at spark.components::SkinnableDataContainer/updateRenderer()[E:\dev\4.y\frameworks\projects\ spark\src\spark\components\SkinnableDataContainer.as:606]
          at spark.components.supportClasses::ListBase/updateRenderer()[E:\dev\4.y\frameworks\projects \spark\src\spark\components\supportClasses\ListBase.as:1106]
          at spark.components::DataGroup/setUpItemRenderer()[E:\dev\4.y\frameworks\projects\spark\src\ spark\components\DataGroup.as:1157]
          at spark.components::DataGroup/initializeTypicalItem()[E:\dev\4.y\frameworks\projects\spark\ src\spark\components\DataGroup.as:327]
          at spark.components::DataGroup/ensureTypicalLayoutElement()[E:\dev\4.y\frameworks\projects\s park\src\spark\components\DataGroup.as:384]
          at spark.components::DataGroup/measure()[E:\dev\4.y\frameworks\projects\spark\src\spark\comp onents\DataGroup.as:1467]
          at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::measureSizes()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:8506]
          at mx.core::UIComponent/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\ UIComponent.as:8430]
          at mx.managers::LayoutManager/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx \managers\LayoutManager.as:665]
          at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.y\frameworks\projects\framewo rk\src\mx\managers\LayoutManager.as:816]
          at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.y\frameworks\projects \framework\src\mx\managers\LayoutManager.as:1180]

How to access item renderer from main mxml?

Hi,
I have a datagrid which has item renderer. Code looks like this:
<mx:DataGrid id="newsfeedgrid" width="100%" height="100%" visible="true" verticalScrollPolicy="auto"
 verticalGridLines="false" horizontalGridLines="true" horizontalGridLineColor="#E5F0F3" showHeaders="false"
 rowHeight="70" wordWrap="true" resizableColumns="false">
 <mx:columns>
 <mx:DataGridColumn headerText="Image Name" dataField="imgname" width="100">
 <mx:itemRenderer>
 <mx:Component>
 <mx:VBox height="100%" width="100%">
 
 <local:SmoothImage source="{'http://localhost/musicbook/attachdoc/'+data.imgname}" height="100%" width="100%"/>
 <mx:Text text="{data.fname+' '+data.lname}" fontSize="10" fontWeight="bold" fontFamily="Verdana" color="#3D3636"/>
 </mx:VBox>
 </mx:Component>
 </mx:itemRenderer>
 </mx:DataGridColumn>
 <mx:DataGridColumn headerText="Messages" dataField="mymsg" wordWrap="true" resizable="true"
 >
 <mx:itemRenderer>
 <mx:Component>
 <mx:VBox verticalScrollPolicy="off" creationComplete="lbl_initialize()">
 
 <mx:Text id="lbl" width="100%"
 selectable="true"
 link="lbl_link(event);" />
 
 <mx:Spacer height="50%"/>
 <mx:HBox width="100%">
 <mx:Text text="{data.datetime}" fontSize="7" color="#8B9698"/>
 </mx:HBox>
 <mx:Script>
 <![CDATA[
 import mx.controls.Alert;
 public var tempsecuname:String;
 private function lbl_initialize():void {
 /* if(lbl.text=="Pratik is good")
 lbl.htmlText="<a href='event:flex.org'>Good</a> is Pratik";
 //lbl.htmlText = "For more information on Flex, see <a href='event:flex.org'>http://www.flex.org/</a>.";
 if(data.secuname==null)
 tempsecuname = "";
 else
 tempsecuname=data.secuname;
 lbl.htmlText="<a href='event:flex.org'>"+data.uname+"</a>"+data.actmsg+"<a href='event:flex.org'>"+tempsecuname+"</a>";
 private function lbl_link(evt:TextEvent):void {
 Alert.show(evt.toString(), evt.text);
 switch (evt.text) {
 case "flex.org":
 // You clicked the flex.org link.
 break;
 ]]>
 </mx:Script>
 </mx:VBox>
 </mx:Component>
 </mx:itemRenderer>
 </mx:DataGridColumn>
 </mx:columns>
 </mx:DataGrid>
Problem currently is since lbl_initialize() function is called on creationComplete of Vbox, output displayed is not expected and when ever i navigate to grid page output gets changed and it is not proper.
I wanted to use text ,lbl, in my main.mxml so that i can assign the value when i am setting data provider.
Please help!!!

Thanks for your reply.. overriding set data in fact is a better approach and my half problem is solved but i am still facing some issues. Please find my code below:
<mx:DataGridColumn headerText="Messages" dataField="mymsg" wordWrap="true" resizable="true"
 >
 <mx:itemRenderer>
 <mx:Component>
 <mx:VBox verticalScrollPolicy="off" >
 <mx:Text id="lbl" width="100%"
 selectable="true"
 link="lbl_link(event);" />
 
 <mx:Spacer height="50%"/>
 <mx:HBox width="100%">
 <mx:Text text="{data.datetime}" fontSize="7" color="#8B9698"/>
 </mx:HBox>
 <mx:Script>
 <![CDATA[
 import mx.core.Application;
 import mx.controls.Alert;
 public var tempsecuname:String;
 public var tempmsg:String="";
 override public function set data( value:Object ) : void {
 super.data = value;
 lbl.htmlText="<a href='event:data.uname'>"+data.uname+"</a>"+tempmsg;
 if(data.datetime>Application.application.lastlogout)
 Alert.show(Application.application.lastlogout);
 lbl.setStyle("fontWeight","bold");
 private function lbl_link(evt:TextEvent):void {
 ]]>
 </mx:Script>
 </mx:VBox>
 </mx:Component>
 </mx:itemRenderer>
 </mx:DataGridColumn>
Now my text is coming properly with link like how i wanted. I have added here another functionality where I am checking the last logouttime of user and the msg time and if msgtime is greater than last logout time then i am showing it in bold.
override public function set data( value:Object ) : void {
 super.data = value;
 lbl.htmlText="<a href='event:data.uname'>"+data.uname+"</a>"+tempmsg;
 if(data.datetime>Application.application.lastlogout)
 Alert.show(Application.application.lastlogout);
 lbl.setStyle("fontWeight","bold");
First time is shows properly but if i scroll then some random row is also appearing in bold, also when ever this set data function is getting called some random rows are coming in bold.
Please let me know your input

Item Rendering component

In my datagrid I used Inline item rendering to create text link. code is given
<mx:DataGridColumn headerText="Nomenclature">
 <mx:itemRenderer>
 <mx:Component>
 <mx:Label htmlText="{data.NOMENCLATURE}" color="blue" click="newBrowserWindow(data.CALL_URL);" >
 <mx:Script>
 <![CDATA[
 private function newBrowserWindow(url:String):void{
 var urlRequest:URLRequest = new URLRequest(url);
 navigateToURL(urlRequest,"_blank");
 ]]>
 </mx:Script>
 </mx:Label>
 </mx:Component>
 </mx:itemRenderer>
</mx:DataGridColumn>
I have to replicate this functionality in multiple datagrids in multiple applications, I am trying to create component for it and use that component in datagrid column. How can i do this?

I have achieved this. but my issue is
if someother datagrid has field data.EMPLOYEE_NAME instead of data.NOMENCLATURE, then how can i achive this. the component should be reuseable for any other datagrid having different field names.
<mx:DataGridColumn headerText="Nomenclature">
 <mx:itemRenderer>
 <mx:Component>
 <mx:Label >
 <mx:Script>
 <![CDATA[
 override public function set data(value:Object):void
 super.data = value;
 if (value.hasOwnProperty("NOMENCLATURE"))
 // your code here like add click listener.
 else if (value.hasOwnProperty("EMPLOYEE_NAME"))
 // your code here like showing the employee name etc
 ]]>
 </mx:Script>
 </mx:Label>
 </mx:Component>
 </mx:itemRenderer>
</mx:DataGridColumn>
Is this what you required ?

Changing values in custom item renderer

I have an xml feed that I am using to populate a List control. The list control has it's itemRenderer property set to CustomListItem which a custom component built by me to display various pieces of data from the xml along with an icon. At certain points I would like to ba able to tell one of the fields in CustomListItem to change from displaying xml.firstData to xml.secondData depending on a radio button selection but I can't find a way to access the properties of CustomListItem from main.mxml (which is where the radio buttons are).
At the moment the values in CustomListItem are set using functions within it to parse the 'data' property.
Sorry if this is a bit of a sketchy explanation of my problem Any suggestions would be great.
Cheers

I hope this code represents your situation, but at least I hope it helps you!
----------------------- main app ----------------------------
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"
height="100%" creationComplete="dataRequest.send();"
xmlns:comp="*" horizontalAlign="left">
<mx:Script>
 <![CDATA[
 import mx.rpc.events.ResultEvent;
 import MyListItems;
 import mx.collections.XMLListCollection;
 [Bindable] private var xmllist:XMLList;
 [Bindable] private var xlc:XMLListCollection;
 private function resultHandler(evt:ResultEvent):void{
 xmllist = evt.result.item;
 xlc = new XMLListCollection(xmllist.firstData);
 private function changeData(evt:Event):void{
 if(evt.currentTarget.label == "First Data"){
 xlc = new XMLListCollection(xmllist..firstData);
 }else{
 xlc = new XMLListCollection(xmllist.secondData);
 ]]>
</mx:Script>
<mx:HTTPService id="dataRequest" useProxy="false" url="data.xml"
 resultFormat="e4x" result="resultHandler(event)"/>
<mx:RadioButtonGroup id="items"/>
<mx:RadioButton group="{items}" label="First Data" change="changeData(event)"
 selected="true"/>
<mx:RadioButton group="{items}" label="Second Data" change="changeData(event)"/>
<mx:List width="100" height="150" itemRenderer="MyListItems"
 dataProvider="{xlc}"/>
</mx:Application>
----------------------- item renderer --------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Text text="{data}"/>
</mx:HBox>
------------------------------- data.xml ---------------------------
<?xml version="1.0" encoding="utf-8"?>
<mydata>
<item>
 <firstData>apples</firstData>
 <secondData>oranges</secondData>
</item>
<item>
 <firstData>beef</firstData>
 <secondData>chicken</secondData>
</item>
<item>
 <firstData>milk</firstData>
 <secondData>juice</secondData>
</item>
<item>
 <firstData>carrot</firstData>
 <secondData>tomato</secondData>
</item>
</mydata>

Component properties don't exist anymore.

I have an component called: Event.cfc
Long story short, I init() it by issuing a command like:
<cfset eventObject = new 'com.Event'() />
This component has 2 properties: data (a structure) and name (a string).
The init() method calls a private method:
<cfset VARIABLES.setName( VARIABLES.getAttribute( 'event' ) ) />
The setName() method is implicit, ColdFusion builds it based on the name attribute. I manually created the getAttribute() method which works with the data property. In the getAttribute() method, I have a command that reads:
<cfset LOCAL.retVar = VARIABLES.data[ ARGUMENTS.attributeName ] />
Well, CF keeps saying that 'data' does not exist in VARIABLES. But I thought that properties that were defined in a component were put into the VARIABLES scope. So how can this variable NOT exist when I have it defined at the top of the Event.cfc component as a <cfproperty>?


 
 Name: Event object component.
 File: Event.cfc
 Desc: Handles View-initiated Event objects.
 Version: 1.0.0 (2013-10-10T12:00:00-0500)
 Todo: [none]
 
 
--->
<cfcomponent
 output = "false"
 accessors = "true">
 
 
 
 
 
 
 <cfproperty
 required = "true"
 type = "struct"
 name = "data"
 getter = "false"
 setter = "false" />
 <cfproperty
 required = "true"
 type = "string"
 name = "name" />
 
 
 
 <cffunction
 access = "public"
 returntype = "Event"
 name = "init"
 output = "false">
 
 
 
 <cfargument
 required = "true"
 type = "struct"
 name = "constructorData"
 default = "#{ 'event' = '' }#" />
 
 
 
 <cfset LOCAL.attributeName = '' />
 
 
 
 <cfset VARIABLES.setName( VARIABLES.getAttribute( 'event' ) ) />
 <cfif structCount( ARGUMENTS.constructorData )>
 <cfloop collection="#ARGUMENTS.constructorData#" item="LOCAL.attributeName">
 <cfset VARIABLES.setAttribute( LOCAL.attributeName, ARGUMENTS.constructorData[ LOCAL.attributeName ] ) />
 </cfloop>
 </cfif>
 
 
 
 <cfreturn THIS />
 
 
 </cffunction>
 
 
 
 <cffunction
 access = "private"
 returntype = "any"
 name = "getAttribute"
 output = "false">
 
 
 
 <cfargument
 required = "true"
 type = "string"
 name = "attributeName" />
 
 
 
 <cfset LOCAL.retVar = '' />
 
 
 
 <cfset LOCAL.retVar = VARIABLES.data[ ARGUMENTS.attributeName ] />
 
 
 
 <cfreturn LOCAL.retVar />
 
 
 </cffunction>
 
 
 
 <cffunction
 access = "private"
 returntype = "void"
 name = "setAttribute"
 output = "false">
 
 
 
 <cfargument
 required = "true"
 type = "string"
 name = "attributeName" />
 <cfargument
 required = "true"
 type = "any"
 name = "attributeValue" />
 
 
 
 <cfset structInsert( VARIABLES.data, ARGUMENTS.attributeName, ARGUMENTS.attributeValue, true ) />
 
 
 
 <cfreturn />
 
 
 </cffunction>
 
 
</cfcomponent>

Item Renderer in a Datagrid

I'm struggling with how to make a check mark ( image ) show
up or not based on the value of some data in each datagrid line
item. I'm using an item renderer but I'm missing something. Any
help would be greatly appreciated.
thanks,
STeveR

The following is my entire itemrenderer...please excuse any
bad style as this is a WIProgress..
Its probably easier to quote the adobe docs on listdata...If
a component implements the IDropInListItemRenderer interface, you
can use its listData property to obtain information about the data
passed to the component when you use the component in an item
renderer or item editor..I made sure the component implements the
interface as you can see in the code at the top of component. Then
add the couple of required functions regarding listdata, then you
can access the listdata in your own functions in the renderer, like
i do in set data function.
this.BTN_***_mark.label =
value[DataGridListData(listData).dataField];
this line assigns the value from my datagrid to the renderers
button label. (this renderer is a button that the user can press)
so i want the buttons label to show the value coming in from the
datagrid. So listdata is just a way to
explicitly get the column name where the current data is
being sourced from in your datagrid.As the grid is being rendered,
it renders row by row. In each row it goes thru your columns . SO
initially it for row 1 it would begin rendering firstname, surname,
mark, average...etc etc. If i put an alert in on
value[DataGridListData(listData).dataField
I would see these column names popping up as they are getting
rendered in the DGrid.
Hope this helps...

<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete="init()" width="74" height="30"
horizontalAlign="center" verticalAlign="middle"
implements="mx.core.IFactory,mx.controls.listClasses.IDropInListItemRenderer">
<mx:Metadata>
</mx:Metadata>
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.controls.DataGrid;
import mx.utils.ArrayUtil;
import mx.collections.ArrayCollection;
import mx.collections.IViewCursor;
import mx.controls.Alert;
import mx.events.*;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.containers.TitleWindow;
private var panel:AssessmentMarkPopup = new
AssessmentMarkPopup();
var the_val = 0;
var col_index:int;
private var _listData:BaseListData;
public function get listData() : BaseListData
return _listData;
public function set listData( value:BaseListData ) : void
_listData = value;
private function showLoginForm():void {
var pop:AssessmentMarkPopup =
AssessmentMarkPopup(PopUpManager.createPopUp(this,AssessmentMarkPopup,true));
pop.addEventListener("closepopup",onClose);
pop.TXT_***_mark.text = this.BTN_***_mark.label;
var row:int =
this.parentApplication.DG_class_students.selectedIndex;
pop.student_name =
this.parentApplication.DG_class_students.selectedItem.firstname + "
" + this.parentApplication.DG_class_students.selectedItem.lastname;
private function onClose(e:MyClosePopupEvent):void{
this.BTN_***_mark.label = e.data.mark;
public function newInstance():*
return new MarkEntry();
public override function get data():Object
return super.data;
override public function set data(value:Object):void {
var dg:DataGrid = (listData) ? DataGrid(listData.owner) :
null;
var column:DataGridColumn = (dg) ?
dg.columns[listData.columnIndex] as DataGridColumn : null;
col_index = listData.columnIndex;
var str:String = String(column.dataField);
this.BTN_***_mark.label =
value[DataGridListData(listData).dataField];
]]>
</mx:Script>
<mx:Button click="showLoginForm()" id="BTN_***_mark"
width="52"/>
</mx:VBox>

Item Renderer for DataGrid

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

Datagrid item renderer delete button

I have a datagrid with an item renderer. In the item renderer
is a delete button img. Onclick it will remove the item from the
datagrid with the exception of the first item. I am using outer
document to call my function but when I do I get an error that says
Attempt access of inaccessible method deleteContact through a
reference with static type myTitleWindowContact?
private function deleteContact(event:Event,data:*):void{
if (contactData.selectedIndex >= 1) {
caseVO.acCont.removeItemAt(contactData.selectedIndex);
<mx:DataGrid dataProvider="{model.currentVO.acCont}"
id="contactData"
width="651"
height="117"
click="showForm()" >
<mx:columns>
<mx:DataGridColumn editable="false" width="5">
<mx:itemRenderer>
<mx:Component>
<mx:HBox width="100%" height="15"
horizontalAlign="center" verticalAlign="middle">
<mx:Button
icon="@Embed(source='/com/serg/reportingTool/assets/images/delete.png')"
click="outerDocument.deleteContact(event,data)"
label="D"
toolTip="Delete"
width="15"
height="15"
/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

That fixed that issue Thanks so much! One other question
though. Is it possible to have my delete button appear on all items
in the datagrid except for the first item??

Zoom item renderer out of scroller boundaries

Hi everyone, hoping someone has the easy Answer. I want to have an item renderer that can zoomIn and display outside the scroller boundaries for which it resides in.
I have
Scroller set depth property =1
|
Datagroup (tile layout) depth=2
|
custom zoomable LabelItemRenderer depth=3 (depth=4 when zooming in so it overlaps the other renderers in the datagroup) ....these tiles, when zoomed, will increase in size by 50%.
So in other words, the datagroup is wrapped in a scroller, and I extended the LIR to zoom.
If I take the scroller out of the picture, everything works great...if I zoom on an IR(tile) that is on the very border of the datagroups boundaries, it will display over the DG's boundaries so that the whole zoomed tile is shown.
Now if I wrap the DG in a scroller, the IRs will zoom, but any tiles on the boundary will get clipped by the boundary, like it is underneath the scroller.
I want a zoomed tile to display completely, even if that means overlapping the boundaries of the scroller. Like I said, works great when the DG doesn't have a scroller wrapped around it.
Is this possible?
I should add its a 4.6 mobile project.

I don't use jbuilder
This is what apears at the commandpromt:
Exception occurred during event dispatching:
java.lang.OutOfMemoryError
 <<no stack trace available>>
Exception occurred during event dispatching:
java.lang.OutOfMemoryError
 <<no stack trace available>>
java.lang.OutOfMemoryError
 <<no stack trace available>>
java.lang.OutOfMemoryError
 <<no stack trace available>>This is the version of java i use (I use the compiler that comes with it it does not answer to -version itself)
java version "1.3.1"
Java(TM) 2 Runtime Environment, Standard Edition (build 1.3.1-b24)
Java HotSpot(TM) Client VM (build 1.3.1-b24, mixed mode)This is my ListCell renderers get method:
 public Component getListCellRendererComponent(JList list,Object value,int index,boolean isSelected,boolean cellHasFocus)
 String[] ss=((arrayjanus) value).getArray();
 JPanel p=new JPanel();
 p.setLayout(new BoxLayout(p,BoxLayout.X_AXIS));
 for(int i=0;i<lenghts.length;i++)
 JTextField jt=new JTextField(lenghts);
 jt.setText(ss[i]);
 jt.setCaretPosition(0);
 p.add(jt);
 return p;
I run in the same problem if i switch of the DB access and on a selection do nothing but System.out.println the count of selections (I get it after ~ 800 clicks in rapid succession under theese circumstances)
I am having about 50 items in the list.

No Padding when Extending ButtonBar as Item Renderer in AdvancedDataGrid

I am using an ActionScript Class to extend the ButtonBar
component as my Item Renderer in an AdvancedDataGrid. However, when
I set the styles and properties of the ButtonBar in the
constructor, it shifts the ButtonBar all the way to the left of the
Column, with no padding to the left. Any thoughts? Here is my
constructor function:
public class SavedReportsButtonBar extends ButtonBar
public function SavedReportsButtonBar()
super();
setStyle("horizontalAlign", "left");
width=450;
percentHeight=100;
Any help is greatly appreciated - I'm really trying to grasp
and use the whole OO programming idea.

2) You do not set an item editor only an item renderer.
<mx:AdvancedDataGridRendererProvider columnIndex="0"
columnSpan="1" depth="1" renderer="mx.controls.CheckBox">
3) You do not have rendererIsEditor on any columns that I can
see.
<mx:AdvancedDataGridColumn dataField="@sel"
headerText=" " width="25" rendererIsEditor="true"
editable="true" editorDataField="selected"/>
If I use the itemrender for that column, i am gettting the
check box for all the rows. Which i dont want . I want check box
only for the folder node. so i am using renderer provider
I want only one column to be editable

Any Help ? My Item Renderer fails with Reference Error: Error #1069:

So I have a basic inline dropdownbox itemrenderer as shown below, But after I click it and select a value I get an error "ReferenceError: Error #1069: Property TELEPH_USE_TYPE_DESC not found". I am guessing I am referencing something incorrectly. Any Ideas
Code
<mx:AdvancedDataGridColumn dataField="TELEPH_USE_TYPE_DESC" editorDataField="TELEPH_USE_TYPE_DESC">
 <mx:itemEditor>
 <fx:Component> <s:MXAdvancedDataGridItemRenderer focusEnabled="true" height="22">
 <s:DropDownList id="dd"
 top="5"
 left="5"
 labelField="TELEPH_USE_TYPE_DESC" selectedItem="{data.TELEPH_USE_TYPE_DESC}" dataProvider="{parentDocument.tpUseAc}" /> </s:MXAdvancedDataGridItemRenderer> </fx:Component>
 </mx:itemEditor></mx:AdvancedDataGridColumn>

TELEPH_USE_TYPE_DESC is a field on the data object, but not a property on the item renderer which is defined within the mx:itemEditor tag.
You could add something like
<mx:Script>
<![CDATA[
 public function get newValue():Object
 return dd.selectedItem.TELEPH_USE_TYPE_DESC;
\]\]\>
</mx:Script>
And change the editorDataField to “newValue”

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 - accessing component properties

Similar Messages

Maybe you are looking for