DataGrid used as Tree Item Renderer

Has anyone out there used a DataGrid as an itemRenderer for
the leaf nodes in a tree? I am attempting to do so by extending the
TreeItemRenderer class. Do I have to make a DataGrid custom
component to use?

Renderers of word-wrapping text must set their measuredHeight based on
explicitWidth of the renderer.
See
http://blogs.adobe.com/aharui/2010/10/mx-datagrid-list-and-variablerowheight
.html
It applies to Tree as well.

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

Flex SDK 3.4 Tree Item Renderer Root Folder displays Tooltip for Child

I have a Flex Tree that uses a custom item renderer. The item renderer extends Tree Item Renderer and I add my button in commit properties (since the data is dynamic) and I use update displaylist to move it to the right position. I set the button to be visible on rollover and make the icon invisible. On rollout I reverse that logic.
When I have my item renderer add the button, it causes only one problem and it seems to be under certain conditions:
- Single root folder for the tree
- Upon opening the tree, the root folder displays the tool tip for the last child in the tree
Any idea why the tooltip comes up?
public function AssetTreeItemRenderer ()
            super();
            addEventListener(MouseEvent.ROLL_OVER, onItemRollover);
            addEventListener(MouseEvent.ROLL_OUT, onItemRollout);
            addEventListener(ToolTipEvent.TOOL_TIP_SHOWN, toolTipShown);
            addEventListener(ToolTipEvent.TOOL_TIP_CREATE, onCreateToolTip);
        // OVERRIDEN FUNCTIONS
         * override createChildren
        override protected function commitProperties():void {
            super.commitProperties();
            if(data is IAsset) {
                if(playBtn === null) {
                    playBtn = new Button();
                    playBtn.styleName = "previewPlayButton";
                    playBtn.toolTip = "Play";
                    playBtn.width = icon.width + 2;
                    playBtn.height = icon.height + 2;
                    playBtn.visible = false;
                    playBtn.addEventListener(MouseEvent.CLICK, onPlayBtnClick);
                    addChild(playBtn);
            } else {
                if(playBtn !== null) {
                    removeChild(playBtn);
                    playBtn = null;
         * override updateDisplayList
         * @param Number unscaledWidth
         * @param Number unscaledHeight
        override protected function updateDisplayList(unscaledWidth:Number,
                                                      unscaledHeight:Number):void
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            //Move our play button to the correct place
            if(super.data && playBtn !== null)
                playBtn.x = icon.x;
                playBtn.y = icon.y;

You are not clearing tooltip if data is not IAsset

How to overlap datagrid colums line with item renderer

Hello guys I been stuck for a few days now and I'm wondering if there is a better way to do this.
I put an item renderer on a column of the datagrid. The renderer basically expands the column height and shows some controls.
Im using a border container as the container that is holding the items in the grid. However what I would like to do is make the border container as big as the grid with a plus sign button. and then basically hide that rows vertical grid lines.
i tried setting the depth eventhought i understant this is not a spark grid i though it should work but it does not. Any tip or direction would be greatly appreciated.
Miguel

ok i answered my own question. what i need to do is use the advance datagrid. Then set these properties.
<mx:AdvancedDataGrid defaultLeafIcon="{null}"
                         folderClosedIcon="{null}"
                         folderOpenIcon="{null}"
                         disclosureClosedIcon="@Embed(source='assets/plusSign.png')"
                         disclosureOpenIcon="@Embed(source='assets/plusSign.png')">
Message was edited by: miguel8312

I am going to make a ADG with around 7 columns 6 of which I am going to use checkboxes as Item renderer

I am going to make a ADG with around 7 columns 6 of which I am going to use checkboxes as Item renderers. Each of these 6 checkboxes renderers will be define in separate actionscript files as they will be updating different parts of the ADG data provider. Does this sound like the best option?

Well the only difference is that each checkbox effects a different attribute of the dataprovider of the ADG:
for example this renderer effects the isSelected attribute. I may want to set a different one , hope this explains it better
package
import flash.display.DisplayObject;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.text.TextField;
import mx.controls.CheckBox;
import mx.controls.advancedDataGridClasses.AdvancedDataGridListData;
import mx.controls.listClasses.ListBase;
* The Renderer.
public class CheckBoxRenderer extends CheckBox
    public function CheckBoxRenderer()
        focusEnabled = false;
     override public function set data(value:Object):void
        super.data = value;
        if(super.data.isSelected == null){
            data.isSelected = false;
        data.isSelected = this.selected;
        invalidateProperties();
    override protected function commitProperties():void
        super.commitProperties();
        if (owner is ListBase)
            selected = ListBase(owner).isItemSelected(data);
    override protected function keyDownHandler(event:KeyboardEvent):void
    override protected function keyUpHandler(event:KeyboardEvent):void
    override protected function clickHandler(event:MouseEvent):void
          super.clickHandler(event);
        if(!data.isSelected){
            data.isSelected = true;
        }else{
            data.isSelected = false;
    override protected function updateDisplayList(w:Number, h:Number):void
        super.updateDisplayList(w, h);
        if (listData is AdvancedDataGridListData)
            var n:int = numChildren;
            for (var i:int = 0; i < n; i++)
                var c:DisplayObject = getChildAt(i);
                if (!(c is TextField))
                    c.x = (w - c.width) / 2;
                    c.y = 0;

Using multiple data points in an item renderer?

I have a datagrid, bound to data from an XML file. My XML has
multiple items,such as:
<book>
<title></title>
<author></author>
<description></description>
<cover>someimage.jpg</cover>
</book>
I need to display each book as a unit, something like:
[image] Moby Dick
Herman Melville
A long book about a whale.
How would I accomplish this? Obviously, I can easily display
the discrete info in columns, but I'd like to lay it out as one
unit.
Thanks.

Use a list control instead of a datagrid. Then use a custom
item renderer based on HBox or VBox depending on your preference
for horizontal or vertical layout... possibly even just a Box
control so you can change it at your whim.

How to make a variable in main application available in item renderer

I have a variable in my main applicaton.
public var accessLevel:String;
I have a spark list that uses a custom item renderer. How do i access the value of accessLevel in my item renderer?

You can use outerDocument/parentDocument or FlexGlobals.topLevelApplication

Checkbox item renderer populated with data from 2 sources

I have a list object that has a check box and a label (using an inline item renderer). The list itself is populated with an array of objects and whether the checkbox is selected takes those objects and adds them to another list (for outbound purposes). Since the selected list can change elsewhere in my app how do I keep the binding of selections consistent? The dataprovider for my checkbox list is the first array of objects and is binded, but the second one (selected array) is not. What would be the best way to provide that binding to make sure the selected is consistent when the second array changes. Some of the code is below to better show...
<cms:HilightList
     id = "distributorList"
     width = "100%"
     height = "100%"
     drawHighlight="{ViewUtils.drawHighlightIndicator}"
     drawSelection="{ViewUtils.drawHighlightIndicator}"
     dataProvider="{pmDistributors.distributors}">
     <mx:itemRenderer>
          <mx:Component>
               <mx:HBox>
                    <mx:CheckBox
                                       selected = "{outerDocument.isSelected(data)}"
                           change = "{outerDocument.handleSelectedChange(event)}"/>
                    <mx:Label text="{data.name}"/>
               </mx:HBox>
          </mx:Component>
     </mx:itemRenderer>
</cms:HilightList>
public function isSelected(item:Object):Boolean
     var partner:Partner = item as Partner;
     var selected:Boolean = false;
     for each(var schedPartner:Partner in scheduleAssets.partners)
          if(schedPartner.id == partner.id)
               selected = true;
     return selected;
public function handleSelectedChange(event:Event):void
     var partner:Partner = event.currentTarget.parent.data as Partner;
          if(event.currentTarget.selected)
               addPartnerEvent(partner);
          } else {
               removePartnerEvent(partner);

Hi Aakcse,
In this condition, you need to make use of both the Precedence Constraint between Control Flow Tasks and the Conditional Split Transformation. Supposing you get the value in the flat file and store it in a variable via Script Task, you can create two Data
Flow Tasks, and connect the Script Task to the two DFTs.
For the Precedence Constraint between the Script Task and the Data Flow Task 1, set the “Expression and Constraint” expression to @[User::vEntryStatus]=="Y". And for the Precedence Constraint between the Script Task and the Data Flow Task 2, set the “Expression
and Constraint” expression to @[User::vEntryStatus]=="N".
In Data Flow Task 1, add a Conditional Split Transformation with this expression [Entry]==”YES”, and direct this output to the destination component. In Data Flow Task 2, also add a Conditional Split Transformation with expression [Entry]==”NO”, and direct
the output to the destination component.
Regards,
Mike Yin
If you have any feedback on our support, please click here
Mike Yin
TechNet Community Support

Drag and Drop in Item Renderer

I created an item renderer for use in a TileList. This item
renderer shows a thumbnail, name, and a few buttons. I want to
enable drag but only for the image. I know it is easy to enable
drag for Tile List items as a whole, but how do I do that for just
part of an item, which was rendered using my custom item renderer?
Thanks for any help!

Have you tried to turn off drag for TileList and enable it
only for the thumbnail? It should work.
ATTA

I need my label to remember the value of the previous number in item renderer

I have a label used as an item renderer and the dataprovider frequently changes. I need my label to remember the value of the previous number it was assigned to {data.ask} but am having trouble doing this.
Any ideas how to do this?

You could override the data setter on the item renderer or listen for dataChange and store the value somewhere at that time. This post demonstrates how to override the data setter or listen for dataChange:
http://flexponential.com/2009/11/11/binding-warnings-when-using-object-in-a-list-dataprovi der/

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
Dean

Here is an example with a HorizontalList:
<?xml version="1.0" ?>

<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"?>

<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>

Flex Using Tree Control in item renderer(Url Navigate)?

HI All.,
Iam Using flex 3 using tree control in item renderer to click haschildren label to be navigate url is possible ?.
Any one help me.....
Thanks in Advance......

You can do this by writing the item's tag to the ActiveItemTag property, the column number you're intersted in to the ActiveColNum property and reading the Cell String Property.
Mike....
PS: If anybody at NI is listening, that interface really, really, REALLY needs to get rewritten...
Certified Professional Instructor
Certified LabVIEW Architect
LabVIEW Champion
"... after all, He's not a tame lion..."
Be thinking ahead and mark your dance card for NI Week 2015 now: TS 6139 - Object Oriented First Steps
Attachments:
tree_properties.vi ‏9 KB

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?
Thanks

Hi,
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

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

DataGrid used as Tree Item Renderer

Similar Messages

Maybe you are looking for