ItemRenderer in component

From FlexExamples March 8, I am trying to use the TileList
and custom itemRenderer. The only change I have made to the code is
change the "main" app too a component, as part of a View Stack. I
have imported the original code into my application and have the
same error: 1172: Definition CustomItemRenderer could not be found.
It is in the same location as the calling data, but does not
seem to work. This is the code from car.mxml and the following is
the view stack call from the main app.

Thanks for the response. I have not declared the namespace,
but since they are in the same location, do I need to? I have tried
several variations of declaring the namespace, but am not getting a
change in the error. Some examples of what I have tried:
xmlns:CustomItemRenderer="*"
xmlns="views.*"
xmlns="*"
xmlns:views="CustomItemRenderer"
xmlns="CustomItemRenderer"
xmlns="views.CustomItemRenderer"
xmlns="views.CustomItemRenderer.mxml"
xmlns:views="*"
xmlns.views="*.CustomItemRenderer"
xmlns:views="*.CustomItemRenderer"
The main app is called index.mxml and supporting components
are in the folder "views". In the index, I have declared a
namespace for views xmlns:v="views.*", hence my using "v". It seems
I am missing a very large and blatant point? Oh guru flex gods!
take pity on newbies and may all your future projects be bug free,
fun and profitable!

Similar Messages

Datagrid itemRenderer custom component formatting

OK, so this is my first attempt at an itenRenderer. This works below, but I have to imagine there is an easier way. There is also a problem with below, where the changed field (datafield=side) after the itemRenderer is applied, the text is all out of format, and there is a kind of selection on row one of that column. Obvisouly, though the translation is happening, I'm either overidding the wrong thing, or I'm doing something totally wrong.
Goal..... Show in the datagrid, the three colums below from date provided from elsewhere. (This all works), but in the 'side' data it comes in, in raw form as either an 'a' or 'b' or 'both', and I'm trying to display that as something more user friendly. So when both is read it changes it to 'No'.
Any help. This seems really easy, though I can't understanading hy my custom function screws with the cell selection, and formating?
---Main program---
<mx:DataGrid x="10" y="9" width="199" height="147" id="gdimmer_checkChannel" dataProvider="{ current_rack.getItemAt(0).rackLevels }"
change="dimmerCheckCurrentSelection(event);"
sortableColumns="false"
selectedIndex="{ current_rack.getItemAt(0).currentCheckIndex }" >
<mx:columns>
<mx:DataGridColumn headerText="UDN" dataField="udn"/>
<mx:DataGridColumn headerText="DD" dataField="side" editable="false" itemRenderer="renderers.DataGridDDSide"/>
<mx:DataGridColumn headerText="Circuit" dataField="circuit"/>
</mx:columns>
</mx:DataGrid>
--- Component Below ---
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        focusEnabled="true">
<s:Label id="lblData" text="{dataGridListData.label}" />
<fx:Script>
<![CDATA[
override public function set data(value:Object):void
    if (value.side == 'both') { lblData.text = " No" };
   if (value.side == 'a') { lblData.text = " a" };
   if (value.side == 'b') { lblData.text = " b" };
]]>
</fx:Script>
</s:MXDataGridItemRenderer>

See the latest post on my blog. You also need to set super.data in the data
setter.
Alex Harui
Flex SDK Team
Adobe System, Inc.
http://blogs.adobe.com/aharui

Why do list s:itemRenderer      in sdk 4.5 need a child   fx:Component

If I do this
<s:List>
<s:itemRenderer>
<fx:Component>
<s:HGroup >
<s:TextArea text="{data.comment}" height="40">
I get an error Access of undefined property data

however in an external file you can do this:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                autoDrawBackground="true">
    <fx:Script>
        <![CDATA[
            import utils.Formatters;
        ]]>
    </fx:Script>
    <s:HGroup width="100%" verticalAlign="middle" paddingRight="10" paddingLeft="10" paddingBottom="5" paddingTop="5">

Inline item mx:Image ... in mx:itemRenderer could not see the defination of method

I have following code and got a compilation error ("possiblely called an undefined function") because the <mx:Image ...> in the <mx:itemRenderer > could not see the defination of "aMethod" method:
<mx:Form ....>
<mx:Script><![CDATA[
private function aMethod(evt:Event):void {
           // code...
]]></mx:Script>
<mx:Canvas label="Tile View" width="100%" height="100%" >
          <mx:TileList id="photosTileList" dataProvider="{this.photoDP}" width="100%" height="100%" >
                    <mx:itemRenderer >
                        <mx:Component>
                            <mx:Image horizontalAlign="center" source="{data.url.text()}"
                                toolTip="{data.caption.text()}" width="55" height="38" complete="aMethod(event)"/> 
                        </mx:Component>
                    </mx:itemRenderer>
         </mx:TileList>
         <mx:Image .... complete="aMethod(event)"/> 
</mx:Canvas>
</mx:Form>
I do not know why the inline <mx:Image> inside <mx:itemRenderer> can not see the "aMethod" function defination in the same mxml file.
Any suggestions?

You need outerDocument, and the method cannot be private, it should be public:
complete="outerDocument.aMethod(event)"
If this post answers your question or helps, please mark it as such.
Greg Lafrance - Flex 2 and 3 ACE certified
www.ChikaraDev.com
Flex / AIR Development, Training, and Support Services

Using a custom itemrenderer in datagrid to update value in the same row but different column/cell

Here's what I have so far. I have one datagrid (dg1) with enable drag and another datagrid (dg2) with dropenabled. Column3 (col3) of dg2 also has a custom intemrenderer that's just a hslider.
When an item from dg1 is dropped on dg2, a custom popup appears that asks you to use the slider in the popup to set a stress level. Click ok and dg2 is populated with dg1's item as well as the value you selected from the popup window. I was also setting a sliderTemp variable that was bound to the itemrender slider to set it but that's obviously causing issues as well where all the itemrenderer sliders will change to the latest value and I don't want that.
What is needed from this setup is when you click ok from the popup window, the value you choose from the slider goes into dg2 (that's working) AND the intemrenderer slider needs to be set to that value as well. Then, if you used the intemrenderer slider you can change the numeric value in the adjacent column (col2).   I just dont know how to hook up the itemrenderer slider to correspond with that numeric value (thatds be in col2 on that row);
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"
                    xmlns:viewStackEffects="org.efflex.mx.viewStackEffects.*" backgroundColor="#FFFFFF" creationComplete="init(event)"
                    xmlns:components="components.*" xmlns:local="*">
     <mx:Script>
          <![CDATA[
               import mx.binding.utils.ChangeWatcher;
               import mx.collections.ArrayCollection;
               import mx.controls.Alert;
               import mx.controls.TextInput;
               import mx.core.DragSource;
               import mx.core.IUIComponent;
               import mx.events.CloseEvent;
               import mx.events.DataGridEvent;
               import mx.events.DragEvent;
               import mx.events.FlexEvent;
               import mx.events.ListEvent;
               import mx.events.SliderEvent;
               import mx.events.SliderEventClickTarget;
               import mx.managers.DragManager;
               import mx.managers.PopUpManager;
               import mx.utils.ObjectUtil;
               [Bindable]private var myDP1:ArrayCollection;
               [Bindable]private var myDP2:ArrayCollection;
               [Bindable]public var temp:String;
               [Bindable]public var slideTemp:Number;
               private var win:Dialog;
               protected function init(event:FlexEvent):void{
                    myDP1 = new ArrayCollection([{col1:'Separation from friends and family due to deployment'},{col1:'Combat'},{col1:'Divorce'},{col1:'Marriage'},
                         {col1:'Loss of job'},{col1:'Death of a comrade'},{col1:'Retirement'},{col1:'Pregnancey'},
                         {col1:'Becoming a parent'},{col1:'Injury from an attack'},{col1:'Death of a loved one'},{col1:'Marital separation'},
                         {col1:'Unwanted sexual experience'},{col1:'Other personal injury or illness'}])
                    myDP2 = new ArrayCollection()
               protected function button1_clickHandler(event:MouseEvent):void
                    event.preventDefault();
                    if(txt.text != "")
                         Alert.yesLabel = "ok";
                         Alert.show("", "Enter Stress Level", 3, this,txtClickHandler);
               private function image_dragEnter(evt:DragEvent):void {
                    var obj:IUIComponent = IUIComponent(evt.currentTarget);
                    DragManager.acceptDragDrop(obj);
               private function image_dragDrop(evt:DragEvent):void {
                    var item:Object = dg2.selectedItem;
                    var idx:int = myDP2.getItemIndex(item);
                    myDP2.removeItemAt(idx);
               protected function dg1_changeHandler(event:ListEvent):void
                    temp=event.itemRenderer.data.col1;
               protected function dg2_dragDropHandler(event:DragEvent):void
                    event.preventDefault();
                    dg2.hideDropFeedback(event as DragEvent)
                    var win:Dialog = PopUpManager.createPopUp(this, Dialog, true) as Dialog;
                    win.btn.addEventListener(MouseEvent.CLICK, addIt);
                    PopUpManager.centerPopUp(win);
                    win.mySlide.addEventListener(Event.CHANGE, slideIt);
               private function txtClickHandler(event:CloseEvent):void {
                    trace("alert");
                    if (event.detail==Alert.YES){
                         myDP2.addItem({label:temp});
               private function addIt(event:MouseEvent):void{
                    myDP2.addItem({col1:temp, col2:slideTemp})
               private function slideIt(event:SliderEvent):void{
                    slideTemp = event.target.value;
          ]]>
     </mx:Script>
               <mx:Panel x="10" y="10" width="906" height="481" layout="absolute">
                    <mx:Image x="812" y="367" source="assets/woofie.png" width="64" height="64" dragDrop="image_dragDrop(event);" dragEnter="image_dragEnter(event);"/>
                    <mx:DataGrid x="14" y="81" width="307" height="251" dragEnabled="true" id="dg1" dataProvider="{myDP1}" wordWrap="true" variableRowHeight="true" change="dg1_changeHandler(event)">
                         <mx:columns>
                              <mx:DataGridColumn headerText="Examples of Life Events" dataField="col1"/>
                         </mx:columns>
                    </mx:DataGrid>
                    <mx:DataGrid x="329" y="81" height="351" width="475" dragEnabled="true" dropEnabled="true" id="dg2"
                                    wordWrap="true" variableRowHeight="true" dataProvider="{myDP2}" editable="true"
                                    dragDrop="dg2_dragDropHandler(event)" rowHeight="50" verticalGridLines="false" horizontalGridLines="true" >
                         <mx:columns>
                              <mx:DataGridColumn headerText="Stressor" dataField="col1" width="300" wordWrap="true" editable="false">
                              </mx:DataGridColumn>
                              <mx:DataGridColumn headerText="Stress Level" dataField="col2" width="82" editable="false"/>
                              <mx:DataGridColumn headerText="Indicator" dataField="col3" width="175" paddingLeft="0" paddingRight="0" wordWrap="true" editable="false">
                                   <mx:itemRenderer>
                                        <mx:Component>
                                             <components:Compslide/>
                                        </mx:Component>
                                   </mx:itemRenderer>
                              </mx:DataGridColumn>
                         </mx:columns>
                    </mx:DataGrid>
                    <mx:Text x="14" y="10" text="The first category of underlying stressors is called Life Events. The list includes both positive and negative changes that individuals experience. Both can be stressful. For example, becoming a parent is usually viewed as a positive thing, but it also involves many new responsibilities that can cause stress. " width="581" height="73" fontSize="12"/>
                    <mx:TextInput x="10" y="380" width="311" id="txt"/>
                    <mx:Text x="10" y="335" text="Add events to your list that are not represented in the example list. Type and click "Add to List"
" width="311" height="51" fontSize="12"/>
                    <mx:Button x="234" y="410" label="Add to List" click="button1_clickHandler(event)"/>
               </mx:Panel>
</mx:Application>

how do i go about doing that? do i put a change event function in the itemrenderer? and how would i eventually reference data.col2?

Problem with Checkbox ItemRenderer in a DataGrid

Hello Everyone,
I'm using a datagrid with two columns, which is used as a data entry grid. The first column has a simple text input field and the 2nd column has a checkbox as an itemrenderer. On creationComplete event, I'm passing an arraycollection as the dataprovider for this datagrid. The arraycollection:
<mx:ArrayCollection id="psAC">
        <mx:source>
            <mx:Array>
                <mx:Object PaText="line1" PaCheckbox="0" />
                <mx:Object PaText="line2" PaCheckbox="0" />
                <mx:Object PaText="line3" PaCheckbox="1" />
                <mx:Object PaText="line4" PaCheckbox="0" />
                <mx:Object PaText="line5" PaCheckbox="0" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>
There is a datagrid (dGa) in the main application. On click of this, a pop up window comes up which has the same datagrid layout(i.e, 2 columns). And this is where the data is entered. Here, if the user checks the check box, I have assigned a value of '1' for the 2nd column of the arraycollection. THis code(below) works fine.
<datagrid in pop up window>
<mx:DataGridColumn headerText="Best Possible Action?" textAlign="center" width="200" editable="false">
                            <mx:itemRenderer>
                                <mx:Component>
                                   <mx:CheckBox>
                                        <mx:Script>
                                                <![CDATA[
                                                     override public function set data(value:Object):void{
                                                         if(value.PaCheckbox == 1){
                                                            this.selected = true;
                                                        }else{
                                                            this.selected = false;
                                                ]]>
                                            </mx:Script>
                                        
                                    </mx:CheckBox>
                                </mx:Component>
                            </mx:itemRenderer>
                        </mx:DataGridColumn>
But I would also need to set the PaCheckbox value to 0 or 1, based on teh check condition of the check box. I tried using change event (commented in the code above). But there I get an error: Cannot access a property or method of a null object reference. I checekd in debug mode, there the data object is null! Can you please help me on how to pass back the values(0 o 1) to my arraycollection, based on the checkbox's status?
Cheers,
Deepak

heyo,
I solved it.....
i was missing this line of code super.data = value; in the ovverriden function...Once we have this line, the data object will have teh field names and their values in it, which can be accessed on the change event...

How to access variables declared in main mxml in itemrenderer files

Hi,
I have a main mxml which has a cutomRenderer that defines two
mxml components
namely raidobutton and textinput.
Now in this TextInput.as i need to access variable defined in
main mxml.
Please suggest a way.
Thanks,
Lucky

Lets say you have a public property in your application like
public var name:String = "John Smith";
to access this using an inline item renderer:
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<mx:TextInput text={outerDocument.name} />
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
To access variables of the applicaton you can use
Application.application.name (for example) to reference "global"
variables, so you might also use this technique. With an inline
item renderer, the outerDocument property will refer to the
component which contains the renderer.

Changing states from within a component

Let's say that I have a TileList that is rendering data in a
VBox. Eventually the TileList fills up and starts scrolling. I want
to change states when clicking on item in the TileList.
I don't want to place the click-attribute in the TileList,
because it will change states when I am scrolling the list without
actually selecting anything.
I want to say click="currentState='state2'" inside the VBox,
but that does not work because state2 is at the root level, and I
don't know how to get to the root-level (in lack of a better word)
from withing the component.
This is not the proper syntax, so misunderstand me the right
way here... Is there an equivallence to
click="currentState='_root.state2'" in mxml?
Thanks for any suggestions or best practices. I want the easy
way out.
This is the general structure...
<mx:Application>
<mx:states>
<mx:State id="state1"/>
<mx:State id="state2"/>
<mx:State id="state3"/>
</mx:states>
<mx:TileList dataprovider="{...}">
<mx:itemRenderer>
<mx:component>
<mx:VBox id="ClickThisBoxToChangeStates">
<mx:Image/>
<mx:Label/>
</mx:Vbox>
</mx:component>
</mx:itemRenderer>
</mx:TileList>
</mx:Application>

Your assumption is right.
It doesn't work because there is no state2-state defined
within the mx:component.
In the documentation about changing states it says that I can
go from application level and change states within a component;
like this: click="currentState='mycomponent.anotherstate'" but not
how I can change a state at application level from within a state.
When I try, it says (at runtime) that the state is not defined.
So I don't know why <mx:VBox
click="currentState='state2'"/> doesn't work.
I apprechiate your expertese a lot.

How do I make a Custom DataTip with Custom ItemRenderer

I can't seem to find any documentation or examples of
displaying a dataTip (similar to those used with charting) with my
custom itemRenderer (mxml component). This is for use in a
dataGridColumn. I Could someone give me an example? The closest
I've been able to find is
http://www.mail-archive.com/[email protected]/msg61624.html,
which doesn't say how to do it.
Thanks!

http://blog.bigfatstogie.com/?p=42
run the example towards the end of the page

Could not resolve to a component implementation error

I am using the SuperImage component from
http://www.quietlyscheming.com/blog/2007/01/23/some-thoughts-on-doubt-on-flex-as-the-best- option-orhow-i-made-my-flex-images-stop-dancing/
The problem I am having is that when I try to use this
component in a TileList ItemRenderer, I recieve the error Could not
resolve <qs:SuperImage> to a component implementation.
In my Application tag, I use xmlns:qs="qs.controls.*" which
allows me to use the SuperImage component anywhere else, but the
error occurs when I use it in a Component.
I have searched for an answer but could not find anything
that worked. Can anyone help me figure out what is wrong? Below is
the code where the error occurs.
<mx:TileList>
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<qs:SuperImage/>
<mx:Label/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
Thank you for any help.

Why would Component not be able to find the package, but
everywhere else in the same file can?
If I add <qs:SuperImage/> right before the TileList, it
works correctly. Is there a way to specify the classpath for
Component specifically? I wasn't able to find a way to do
that.

Problem with the click property in an embeded component

The following code snipit causes the -- 1180: Call to a possibly undefined method myLink. -- compile time error. I've tried making the method public and that doesn't help, so can anyone tell me what's going wrong?
<mx:TileList x="148" y="10" width="411" height="302" rowHeight="140" columnWidth="190"
     dataProvider="{clientsList}" backgroundColor="#E9EEF0" rollOverColor="#b1b5b6" click="myLink('{data.link}')">
      <mx:itemRenderer>
          <mx:Component>
               <mx:VBox horizontalAlign="center" verticalAlign="middle" height="140" width="200" horizontalScrollPolicy="off" verticalScrollPolicy="off">
                    <mx:Image source = "{data.image}" width="120" height="100" toolTip="{data.text}" click="myLink('{data.link}')"/>
                    <mx:Text width="100%" text="{data.name}" textAlign="center" height="18" fontSize="12" fontFamily="Myriad Pro"/>
               </mx:VBox>
          </mx:Component>
     </mx:itemRenderer>
</mx:TileList>

Here tis:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
    <![CDATA[
      public function myLink(url:String):void{
        navigateToURL(new URLRequest('http://www.' + url), '_blank');
    ]]>
</mx:Script>
<mx:XML xmlns="" id="clientsList">
    <items>
      <item>
        <name>Google's Headquarters</name>
        <image>google.png</image>
        <link>google.com</link>
        <text>A picture of Google's headquarters.</text>
      </item>
      <item>
        <name>Yahoo's Headquarters</name>
        <image>yahoo.png</image>
        <link>yahoo.com</link>
        <text>A picture of Yahoo's headquarters.</text>
      </item>
    </items>
</mx:XML>
<mx:TileList x="148" y="10" width="411" height="302"
    rowHeight="140" columnWidth="190" dataProvider="{clientsList..item}"
    backgroundColor="#E9EEF0" rollOverColor="#b1b5b6">
    <mx:itemRenderer>
      <mx:Component>
        <mx:VBox horizontalAlign="center" verticalAlign="middle"
          height="140" width="200" horizontalScrollPolicy="off"
          verticalScrollPolicy="off">
          <mx:Image source = "{data.image}" width="120" height="100"
            toolTip="{data.text}" click="outerDocument.myLink(String(data.link));"/>
          <mx:Text width="100%" text="{data.name}" textAlign="center"
            height="18" fontSize="12" fontFamily="Myriad Pro"/>
        </mx:VBox>
      </mx:Component>
    </mx:itemRenderer>
</mx:TileList>
</mx:Application>

How to get the index for itemrenders

I have an itemrender with a button. I'd like to disable the button for the first and last object in my itemrenderer (list). Can any provide a simple example how to accomplish this task?
Thanks for your assistance.

Hi madhooper,
You can try this way..make use of Boolean variable..
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
    <mx:Script>
        <![CDATA[
          import mx.collections.ArrayCollection;
          [Bindable]
          private var initDG:ArrayCollection = new ArrayCollection([
            {Artist:'Pavement1', Album:'Slanted and Enchanted', Price:11.99, IsEnabled:false},
            {Artist:'Pavement2', Album:'Brighten the Corners', Price:178.99, IsEnabled:true},
            {Artist:'Pavement3', Album:'Enlighten the Corners', Price:174.99, IsEnabled:true},
            {Artist:'Pavement4', Album:'Borade the Corners', Price:431.99, IsEnabled:true},
            {Artist:'Pavement5', Album:'Corners of Edges', Price:221.99, IsEnabled:true},
            {Artist:'Pavement6', Album:'Maniacal Palace', Price:32.99, IsEnabled:false}
        ]]>
    </mx:Script>
    <mx:Panel paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10">
        <mx:DataGrid id="myGrid" dataProvider="{initDG}"
            width="100%" editable="true">
            <mx:columns>
                <mx:DataGridColumn dataField="Artist" resizable="true"/>
                <mx:DataGridColumn dataField="Album" resizable="true"/>
                <mx:DataGridColumn dataField="Price" resizable="true"/>
                <mx:DataGridColumn editable="false">
                 <mx:itemRenderer>
                  <mx:Component>
                   <mx:Button enabled="{data.IsEnabled}" label="Edit" />
                  </mx:Component>
                 </mx:itemRenderer>
                </mx:DataGridColumn>
            </mx:columns>
        </mx:DataGrid>
    </mx:Panel>
</mx:Application>
Thanks,
Bhasker

Dynamic datagrid rowHeight and itemRenderer problem

Hi guys,
Long time listener; first time caller....
I have had a look around the forums here and i can see there are a lot of similar issues to the one i'm currently having but not so many solutions. Not sure if i'll have any better luck with my question but here goes...
My issue is to do with the row height of a datagrid row not matching up properly with the height of the custom iterm renderer used on a column.
The item renderer consists of an HBox containing an image and a textArea. The image will not always be present and the text area can contain a couple of words or many lines of text.
I have overridden the measure function of the item render in which i am manually setting the HBox's height and measuredHeight.
Problem is that i have to find some way of triggering a redraw of the datagrid AFTER if have set the item renderers height, but i dont seem to be able to directly access the in-line renderer from the parent class.
If anyone could throw any suggestions my way it would be greatly appreciated!
thanks '
Dave

Ok so here's the sample code...
****Renderer*****
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox
horizontalAlign="
left" verticalAlign="
middle" horizontalGap="
0"verticalGap="
0"xmlns:mx="
http://www.adobe.com/2006/mxml" horizontalScrollPolicy="
off"verticalScrollPolicy="
off"width="
100%" height="
100%"resize="measure()"
borderColor="
green"borderStyle="
solid"
>
<mx:Metadata>[
Event(name="gridRowHeightChange", type="flash.events.Event")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import mx.events.ResizeEvent;
import flash.events.Event;
Bindable] public var showLocalPartImage:Boolean = false;
override public function set data(value:Object):void
     super.data = value;
     lblPartNum.text = data.label;}
override protected function measure():void
     super.measure();
     if(lblPartNum.text != "" && lblPartNum.width > 0)     {
          lblPartNum.validateNow();          lblPartNum.mx_internal::getTextField().autoSize = TextFieldAutoSize.LEFT;
          lblPartNum.height =
          this.height = measuredHeight = lblPartNum.mx_internal::getTextField().height;
          dispatchEvent(
new Event("gridRowHeightChange"));     }
]]>
</mx:Script>
<mx:Image id="imgLocal" horizontalAlign="center" verticalAlign="middle" visible="false" width="{0}"/>
<mx:TextArea id="lblPartNum" width="{this.width - imgLocal.width - 4}" height="100%" editable="false" verticalScrollPolicy="off" />
</mx:HBox>
****EndRenderer*****
****DataGrid****
public function measureGrid(event:Event):void{
shoppingCart.removeEventListener(DataGridEvent.COLUMN_STRETCH, measureGrid);
shoppingCart.invalidateList();
shoppingCart.addEventListener(DataGridEvent.COLUMN_STRETCH, measureGrid);
<mx:DataGrid id="shoppingCart"width="
100%" height="100%"dataProvider="
{_order.orderItems}"allowMultipleSelection="
true"sortableColumns="
true"variableRowHeight="
true"doubleClickEnabled="
true"doubleClick="selectPartHandler(event)"
paddingRight="
5"editable="
false"
>
<mx:columns>
<mx:DataGridColumn width="22" minWidth="20" sortable="false" editable="false"/>
<mx:DataGridColumn width="22" minWidth="20" sortable="false" editable="false"/>
<mx:DataGridColumn minWidth="240" width="270" dataTipField="description" dataField="description" headerText="Description"editable="
false" wordWrap="true">
<mx:itemRenderer>
<mx:Component>
<controls:DescriptionShoppingCartRenderer showLocalPartImage="
{!(outerDocument.displayUnderline)}" gridRowHeightChange="{outerDocument.measureGrid(event)}">
</controls:DescriptionShoppingCartRenderer>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
****EndDataGrid****
Unfortunately the whole code is much too large to fit in here, but here are the main working parts.
I hope this helps.
What i am getting when running this is strange. When i run the first time and when i resize a column, the row height is incorrect, but then when i just click the 'column stretch' arrow (ie the space between the column headers) and dont actually resize at all, the row heights re-calculate and they fit perfectly.
This makes me think that i need to trigger this event manually AFTER the itemRenderer has been calculated.
EDIT: forgot to add the measureGrid function

Facing problem with Itemrenderer in Datagrid...

Hi,
Any idea how the following code using Action script..
<mx:DataGridColumn headerText="Online"
dataField="online">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox id="chkBox"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
As it is in actionscript....
I dont want to create seperate component... everything i want
to write in single file.
something like...
var dgc:DataGridColumn=new DataGridColumn();
var chkBox:CheckBox=new CheckBox();
Here how to add chkBox to dgc using Itemrenderer??? any
idea??
Is its possible???

I am having the exact same issue! All my components are
DYNAMICALLY generated with AS3 here is my post:
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid =1344455&enterthread=y
ALL examples I find or are given involve static components
which I cannot have!
I hope someone helps us out.

Wrap long lines in a Spark List component?

I have a Spark List.
The text for each entry is on one line, and is too long to fit.
Can I get it to break to as many lines as needed without a custom item renderer?

If you define an explicit width on the SimpleText in the DefaultItemRenderer you can get this behavior.
Here is an example of this using an inline ItemRenderer:
<s:Application
     xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:List width="50" height="200">
        <s:ArrayList>
            <fx:String>a</fx:String>
            <fx:String>b</fx:String>
            <fx:String>c c c c c c c c c c c c</fx:String>
            <fx:String>d</fx:String>
            <fx:String>e</fx:String>
        </s:ArrayList>
        
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer focusEnabled="false">
                    <fx:Script>
                        <![CDATA[
                            override public function set label(value:String):void
                                super.label = value;
                                labelDisplay.text = label;
                        ]]>
                    </fx:Script>
                    <s:states>
                        <s:State name="normal" />
                        <s:State name="hovered" />
                        <s:State name="selected" />
                        <s:State name="normalAndShowsCaret"/>
                        <s:State name="hoveredAndShowsCaret"/>
                        <s:State name="selectedAndShowsCaret"/>
                    </s:states>
                    <s:Rect left="0" right="0" top="0" bottom="0">
                        <s:stroke.normalAndShowsCaret>
                            <s:SolidColorStroke
                                color="{selectionColor}"
                                weight="1"/>
                        </s:stroke.normalAndShowsCaret>
                        <s:stroke.hoveredAndShowsCaret>
                            <s:SolidColorStroke
                                color="{selectionColor}"
                                weight="1"/>
                        </s:stroke.hoveredAndShowsCaret>
                        <s:stroke.selectedAndShowsCaret>
                            <s:SolidColorStroke
                                color="{selectionColor}"
                                weight="1"/>
                        </s:stroke.selectedAndShowsCaret>
                        <s:fill>
                            <s:SolidColor
                                color.normal="{contentBackgroundColor}"
                                color.normalAndShowsCaret="{contentBackgroundColor}"
                                color.hovered="{rollOverColor}"
                                color.hoveredAndShowsCaret="{rollOverColor}"
                                color.selected="{selectionColor}"
                                color.selectedAndShowsCaret="{selectionColor}"
                                />
                        </s:fill>
                    </s:Rect>
                    
                    <s:SimpleText id="labelDisplay" verticalCenter="0" width="48" top="6" bottom="4"/>
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>
    </s:List>
</s:Application>

ItemRenderer in component

Similar Messages

Maybe you are looking for