DataGridColumn/Wordwrap problem

I have been attempting to get my data grid to properly word
wrap. The problem seem to be that the height of the row with the is
set for all rows by the first occurrence and not row by row. Is
this correct? Is it possible to make each row size to the contents?
I am currently using an itemRenderer as follows:
<mx:DataGridColumn headerText="Feature" dataField="@name"
wordWrap="true">
<mx:itemRenderer>
<mx:Component>
<mx:Text text="{data.@name}" selectable="false"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
Thanks

Set the DataGrid property variableRowHeight ="true"
Vygo

Similar Messages

  • Wordwrap problem

    Im trying to draw two string on two different possotions. But only the last String will be drawn (out[1])... Why is that? The code i based on this wordwraper
    http://cvs.sourceforge.net/viewcvs.py/kobjects/utils4me/src/org/kobjects/lcdui/WordWrap.java?rev=HEAD&content-type=text/vnd.viewcvs-markup
    import javax.microedition.midlet.*;
    import javax.microedition.lcdui.*;
    public class HelloCanvas extends MIDlet implements CommandListener{
         Display display;
         Command exit;
         SubCanvas myCanvas;
         public HelloCanvas() {}
         public void startApp () {
              display = Display.getDisplay(this);
              myCanvas = new SubCanvas();
              exit = new Command("Exit", Command.EXIT, 1);
              myCanvas.addCommand(exit);
              myCanvas.setCommandListener(this);
              display.setCurrent(myCanvas);
         public void pauseApp () {}
         public void destroyApp (boolean unconditional) {}
         // inre klass
         class SubCanvas extends Canvas {
              Font myFont;
              WordWrap wp;
              String myText;
              String[] out;
              int Y;
              private boolean testbool;
              public SubCanvas() {
                   myFont = Font.getFont(Font.FACE_SYSTEM,Font.STYLE_PLAIN,Font.SIZE_MEDIUM);
                   Y = 5;
                   myText="";
                   out = new String[2];
                   out[0] = "This is text one, it should be long enough to have some new lines in it";
                   out[1] = "This is text two, it should be long enough to have some new lines in it";
              protected void keyPressed(int keyCode) {
                   if (keyCode == KEY_NUM3) {
                        myText = out[0];
                        wp = new WordWrap(myFont,myText,155);
                        repaint();
                        Y=5;
                        myText = out[1];
                        wp = new WordWrap(myFont,myText,155);
                        repaint();
              public void paint(Graphics g) {
                   System.out.println("This should be displayed 3times");
                   int start = 0, next = 0;
                   if (wp != null) {
                        while ((next = wp.next()) != -1) {
                             g.setFont(myFont);
                             g.drawString(myText.substring(start,next),5,Y,Graphics.TOP|Graphics.LEFT);
                             start = next;
                             Y += myFont.getHeight();
         public void commandAction(Command c, Displayable d) {
              if(c == exit) {
                   notifyDestroyed();
    }

    true, but he also shouldn't be trying to do multiple repaints in the keypressed method either, as one of the guidlines is that a properly behaved canvas should draw every pixel for each paint call.

  • DataGridColumn labelFunction Problem

    I am trying to get the DataGrid to behave normally, as most
    DataGrids do. Here's the setup....
    For example:
    ColumnA: Qty. (default value: 0)
    ColumnB: Price (default value: 9.99)
    ColumnC: (ColumnA * ColumnB)
    In this case I'm using a labelFunction to calculate ColumnC.
    When I run the program and select ColumnA (Qty.) and I change the
    value from 0 to 1 and I hit the "ENTER" key, the calculation is
    executed and ColumnC is updated as expected. But, if I hit the
    "TAB" key instead, it moves the focus to the next editable cell on
    that row, but it does not execute the calculation (labelFunction).
    This to me seems like it should be a given, since most DataGrids in
    most development platforms support this type of behavior (execute
    on lostfocus/leavecell, etc). But, it looks like it's not built
    into Flex 2.0's DataGrid.
    My other thought, was to try to capture the "Leave Cell"
    event....I was unable to find a "Leave Cell" event.
    Any thoughts, ideas or suggestions would be greatly
    appreciated!
    - Mike

    Well, my solution works only if you're not using any other
    controls (as I just found out). Basically, this solution prevents
    the user from ever moving the focus out to any other control.
    So far, my experience with the implementation of the Datagrid
    in Flex has been filled with frustration. There are a bunch of
    "common" scenarios that are proving very difficult to implement.
    For example:
    1) It would be nice to be able to have a calculated column
    that works. (I set up a labelfunction, but this doesn't update
    until I leave the row, rather than leave a cell, also it doesn't
    trigger when using the tab key...see #3).
    2) It would be nice to be able to add a combobox to a
    datagrid column (I know Flex can do this, but not easily, or
    intuitively).
    3) It would be nice to be able to control the tabbing
    behavior in the datagrid, it's doesn't work as one would expect it
    to. (I set focus to cell in code, then when I hit the tab key, it
    moves the tab out of the datagrid. When I click back into the
    datagrid and hit the tab key again...it works as I would expect.
    But, when I update data in a column and tab off it doesn't trigger
    the itemEditEnd event...and unfortunately there is no cell edit end
    event).
    I could go on, but those are my Top 3 problems right now. If
    anyone has suggestions, ideas or solutions I would love to hear
    them.
    Thanks,
    - Mike

  • WordWrap property on an item in a datagridcolumn

    Hi,
    I coded it this way:
    <mx:DataGridColumn wordWrap="true" width="200"
    headerText="Comments" dataField="comments">
    The text value doesn't wrap around though. It gets clipped.
    What am i missing?
    Thanks in advanced.

    Hi Peter,
    Thanks for the quick response. I poked around a little bit
    more in the online help and stumbled into the 'itemrenderer'
    property of the datagridcolumn component ... tried it out and
    managed to get the result that I was looking for. Here's how I
    coded it:
    <mx:DataGridColumn width="320" headerText="Comments"
    dataField="comments">
    <mx:itemRenderer>
    <mx:Component>
    <mx:Text text="{data.comments}" selectable="false"/>
    </mx:Component>
    </mx:itemRenderer>
    </mx:DataGridColumn>
    Again, thanks for taking the time looking into it.
    I'm having a great time learning Flex! The sample apps are
    such great starters!
    later,
    pixelflip

  • Dynamic accordion with dynamic datagrid

    I’m trying to create a dynamic accordion with embedded
    datagrids in each accordion area. I have the base working but have
    2 problems I can’t seem to figure out.
    Bases; the accordion uses a repeater and vbox with a custom
    component from a webservice result set to create the accordion. The
    custom component has another webservice that gets a value from the
    repeater to pass it to the custom component.
    My 2 problems:
    1. how do I prevent the custom component from running the
    webservice until the accordion item is clicked or the area is
    visible? Otherwise I end up will a bunch of queries hitting the DB
    and if there is several items for the accordion and many items from
    the datagrid its slower.
    2. how can I get the datagrid query to refresh when the
    accordion item is clicked? Because the data may change I am not
    able to see the updated data unless I reload the entire
    application.
    1 thing I did try. With the tab control you can use the
    show() event and the data will refresh just fine, but with the
    accordion, the show() event does not seem to fire. Its as if they
    are all visible.
    Any help here would be much appreciated, I’ve been
    racking my brain for days now and I sure it is something simple
    that I am missing. Thanks in advance.
    See the example code below.
    the application code:
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="
    http://www.adobe.com/2006/mxml"
    layout="absolute"
    width="100%"
    height="100%"
    initialize="ws.getMethod1.send()"
    xmlns:output="com.comp.*">
    <mx:Script>
    <![CDATA[
    import mx.controls.Alert;
    [Bindable]
    public var thisWsdl:String = '
    http://localhost/webservice/service.cfc?wsdl';
    ]]>
    </mx:Script>
    <mx:WebService id="ws"
    wsdl="{thisWsdl}"
    useProxy="false"
    showBusyCursor="true"
    fault="Alert.show(event.fault.faultString, 'Error');"
    concurrency="multiple" requestTimeout="30">
    <mx:operation name="getMethod1">
    <mx:request>
    <param1>{param1data}</param1>
    <param2>{param2data}</param2>
    <param3>{param3data}</param3>
    </mx:request>
    </mx:operation>
    </mx:WebService>
    <mx:Accordion width="100%" height="100%"
    fillColors="[#808080, #808080]">
    <mx:Repeater id="rp"
    dataProvider="{ws.getMethod1.lastResult}">
    <mx:VBox label="{String(rp.currentItem.catname)}"
    backgroundColor="#C0C0C0" width="100%" height="100%"
    paddingRight="10">
    <output:comp catid="{rp.currentItem.catid}"/>
    </mx:VBox>
    </mx:Repeater>
    </mx:Accordion>
    </mx:Application>
    the component code:
    <?xml version="1.0" encoding="utf-8"?>
    <mx:VBox xmlns:mx="
    http://www.adobe.com/2006/mxml"
    width="100%"
    height="100%"
    focusIn="ws.getMethod.send()"
    horizontalAlign="center"
    backgroundColor="#FFFFFF">
    <mx:Script>
    <![CDATA[
    import mx.controls.Alert;
    [Bindable]
    public var thisWsdl:String = '
    http://localhost/webservice/service.cfc?wsdl';
    [Bindable]
    public var catid:int;
    ]]>
    </mx:Script>
    <mx:WebService id="ws"
    wsdl="{thisWsdl}"
    useProxy="false"
    showBusyCursor="true"
    fault="Alert.show(event.fault.faultString, 'Error');"
    concurrency="multiple" requestTimeout="30">
    <mx:operation name="getMethod2">
    <mx:request>
    <catid>{catid}</catid>
    </mx:request>
    </mx:operation>
    </mx:WebService>
    <mx:DataGrid id="itemGrid"
    dataProvider="{ws.getMethod2.lastResult}" width="700"
    height="250">
    <mx:columns>
    <mx:DataGridColumn width="100" dataField="itemid"
    headerText="Item Id"/>
    <mx:DataGridColumn wordWrap="true" dataField="itemname"
    headerText="Item Name"/>
    </mx:columns>
    </mx:DataGrid>
    </mx:VBox>

    Perhaps you could use the change event of the accordion, or
    the show event of the child containers?
    Tracy

  • Radio Button binding to XML

    Based on the examples
    here
    and
    here
    I have a datagrid which uses an XML object as its dataprovider. The
    xml goes like this:
    <questions>
    <question>
    <prompt>What are your heroes?</prompt>
    <answers>
    <answer>
    <correct>true</correct>
    <text>Luther Higgs</text>
    </answer>
    <answer>
    <correct>false</correct>
    <text>Barney Fife</text>
    </answer>
    </answers>
    </question>
    </questions>
    Well formed (if a bit confusing) xml. In my datagrid I have
    two columns. The second column binds to
    questions.question.answers.answer.text and works just fine. The
    datagrid's editable property is set to true, and I'm able to click
    on the second colum and type and it saves the answer back into the
    xml object just fine. The problem lies in my first column. The mxml
    looks like this:
    <mx:DataGridColumn headerText="Correct">
    <mx:itemRenderer>
    <mx:Component>
    <mx:VBox horizontalAlign="center">
    <mx:RadioButton id="myRadioButton"
    buttonMode="true" useHandCursor="true"
    group="{outerDocument.myRadioButtonGroup}"
    selected="{data.correct}"/>
    </mx:VBox>
    </mx:Component>
    </mx:itemRenderer>
    </mx:DataGridColumn>
    The problem is that the radio buttons' selected properties
    aren't bound to the xml, that is the one that is true doesn't
    display as selected. If I set the datagridcolumn's editable
    property to false, clicking on the radio button doesn't affect the
    xml at all either. If I leave the editable property of the
    datagridcolumn as the inherited default of true (based on the
    parent datagrid's editable property) when I click on the radio
    button the default itemEditor appears (a text input box) which
    contains the following text:
    </answer>
    and when I leave the editor (click outside or hit enter) the
    xml then looks like this:
    <answers>
    <answer>
    <correct>true</correct>
    <text>Luther Higgs</text>
    </answer>
    <answer>
    <correct>false</correct>
    <text>Barney Fife</text>
    <null>&lt;answer&gt;
    &lt;correct&gt;false&lt;/correct&gt;
    &lt;text&gt;Barney Fife&lt;/text&gt;
    &lt;/answer&gt;</null>
    </answer>
    </answers>
    I have seen controls that don't have the xml path written
    correctly display the entire xml node rather than just the
    contained data, but I can think of no reason anything should Ever
    reference just the closing tag. To me this looks like a bug in the
    data bindings between the radio button and the xml object.
    Just to clear the air to avoid suggestions that will work but
    not meet the design requirements, what I need is a datagrid that
    has a radio button group (only one correct answer out of the group)
    in the first column and strings in the second column which need to
    be editable. I suppose I could write some hairy event listener code
    and manually hack things together, but aside from avoiding that
    headache, I'd love to use data bindings for what they were intended
    for - I just need to know why it doesn't appear to be working
    right. Much thanks in advance for any and all help.

    Searching the LiveDocs revealed the answer. Under the topic
    "Using an E4X expression in an <mx:Binding> tag" I found that
    if instead of
    <mx:RadioButton id="myRadioButton"
    buttonMode="true" useHandCursor="true"
    group="{outerDocument.myRadioButtonGroup}"
    selected="{data.correct}"/>
    I have
    <mx:RadioButton id="myRadioButton"
    buttonMode="true" useHandCursor="true"
    group="{outerDocument.myRadioButtonGroup}"/>
    <mx:Binding source="myRadioButton.selected"
    destination="data.correct" />
    It works just perfectly.
    Apparently binding between XML and the selected property of a
    radio button (which is of type boolean) needs the <mx:Binding
    /> rather than the in-tag curly brace notation.
    P.S. The link on livedocs is here:
    http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Live Docs_Book_Parts&file=databinding_091_05.html#177459

  • String overlapping problem in mx:List caused by wordWrap

    I'm using mx:List to display String items. The dataProvider is XMLListCollection. Some of the String is long so it takes more than one rows. I use the wordWrap to display the long String in more than one rows. The problem is that the next String item will overlapping with the long String. The mx:List can not adjust the vertical space for the Strings that needs more than one rows dynamically. Any suggections?

    Here is solution: variableRowHeight="true"

  • Problems with DataGrid and WordWrap

    Hi all,
    I have some problem with the headerText property of the
    mx:DataGridColumn, when the text is longer than the column width.
    Even if I set headerWordWrap property to true, sometimes the text
    shown in the header is truncated.
    The behaviour is strange: if you change the column width
    moving the mouse, sometimes the text is truncated and other times
    it isn't.
    Can somebody help me or confirm that it is a Flex bug, please
    thanks
    cheers,
    ennio

    Had you installed Flex 2 Hotfix 1? This fix fixes many bugs
    when columns are resized.

  • 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

  • DataGrid rendering problem

    I have an ApplicationControlBar above a data grid.  The data grid has widths specified and is bound to a data source that is populated by a service call.  The mark up below causes the description column to disappear and the header row is about 10 times taller than it should be.  If I put an empty label inside  the application bar it all loads as expected.  I tried putting an updateComplete handler on the grid but I found two problems.  Adding a trace to the method handler showed that it just kept firing over and over.  It also prevented resize of the grid columns.
    <mx:VBox 
    height="100%" width="80%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
    <mx:ApplicationControlBar width="100%" horizontalGap="0" id="docsAppBar">
    <mx:Button click="browseForDocs()"                  id="
    docsTabUploadButton"                  label="
    Upload Document"                  enabled="
    {MediaManagerModel.activateUploadButton}"/>
    </mx:ApplicationControlBar>       
    <mx:HBox width="100%" height="100%">
    <mx:DataGrid dataProvider="{tabMediaList}"                  id="
    docGrid"                   width="
    100%"                   height="
    100%"                  verticalGridLines="
    true"                   variableRowHeight="
    true"                   wordWrap="
    true"                   sortableColumns="
    false"                  editable="
    false"                  allowDragSelection="
    true"                   dragEnabled="
    true"                   dragMoveEnabled="
    true"                   dropEnabled="
    true"                  dragComplete="updateRowPositions()"
                      itemClick="updateCurrentMediaObject()"
    >
    <mx:columns>
    <mx:DataGridColumn width = "20" id="displayOrderCol" headerText="#"  dataField="displayOrder" labelFunction="MediaManagerModel.getMediaDisplayOrder"/>
    <mx:DataGridColumn width = "250" id="mediaNameCol" headerText="File Name" dataField="mediaName" />
    <mx:DataGridColumn width = "120" id="mediaTypeCol" headerText="Type"  dataField="mediaType" labelFunction="MediaManagerModel.getMediaTypeDisplay"/>
    <mx:DataGridColumn width = "60" id="buyerCol" headerText="Public" dataField="buyer" labelFunction="MediaManagerModel.getPublicDisplay" textAlign="center"/>
    <mx:DataGridColumn width = "50" id="mediaSizeCol" headerText="Size" dataField="mediaSize" labelFunction="MediaManagerModel.getMediaSizeDisplay" textAlign="center"/>
                           <mx:DataGridColumn width = "90" id="inputDateCol" headerText="Date Added" dataField="inputDate" labelFunction="MediaManagerModel.getMediaInputDateDisplay" textAlign="center"/>
                           <mx:DataGridColumn width= "240" id="mediaDescrCol" headerText="Description" dataField="mediaDescr" />                          
    </mx:columns>
               </mx:DataGrid>
         </mx:HBox>
         </mx:VBox> 
    If I add <mx:Label/> inside the ApplicationControlBar everything renders fine.  Any ideas? 

    How are you re-assigning the dataProvider from the
    RemoteObject result?
    Tracy

  • Datagrid refresh problem?

    fileListArray.refresh();
    dg_curtainmanager.invalidateList();
    dg_curtainmanager.invalidateDisplayList();
    <mx:DataGrid id="dg_curtainmanager" showHeaders="true"  editable="true"  includeInLayout="false" dataProvider="{fileListArray}"  creationComplete=""  variableRowHeight="true"   wordWrap="true"  rowCount="{fileListArray.length}"  width="100%"  >
    <mx:DataGridColumn  headerText="Parent Folder"  sortable="true"  editable="false"   width="250" minWidth="65" wordWrap="true" >
                            <mx:itemRenderer>
                                <fx:Component>
                                    <mx:HBox width="100%"
                                             horizontalAlign="left" verticalAlign="middle">
                              <mx:Image source="@Embed(source='images/edit_16.gif')"  toolTip="Select Starting Folder" buttonMode="true" click="outerDocument.parentfolderimagclick()" />
                                        <mx:Label text="{data.document_folder_name}" color="black" />   
                                    </mx:HBox>
                                </fx:Component>
                            </mx:itemRenderer>
                            </mx:DataGridColumn>
    </mx:DataGrid>

    @welcomecan,
    What refresh problem you are facing.. in DataGrid? When you change your DataProvider for your grid the values are not being changed or somethingelse..??
    Please always be clear in explaining your problem in order to get it resolved..
    Thanks,
    Bhasker

  • Problem with DataGrid/AdvancedDataGrid using variableRowHeight

    I need a column with more that an information for example(title and description of a movie in the same cel)
    and for that I created a custorm renderer to hold the information togeter. Following the code for the renderer..
    <?xml version="1.0" encoding="utf-8"?>
    <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"
                  verticalScrollPolicy="off" horizontalScrollPolicy="off"
                  paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">
           <mx:HBox horizontalGap="0">
                 <mx:Label text="Title:"/>
                 <mx:Label text="{data.title}"/>
           </mx:HBox>
           <mx:HBox horizontalGap="0" paddingLeft="3" paddingRight="3">
                 <mx:Label id="descLbl" text="Description:"/>
                 <mx:Text text="{data.description}" width="{width-6-descLbl.width}"/>
           </mx:HBox>
    </mx:VBox>
    Because I don't need something special when the data is get or set I didn't override that functions.
    Since the Text control need explicit width to wordWrap the text I binded that value to the available space instead of use "100%".
    Of course not all the descriptions has the same length and the description could take 1, 2, 3 or more rows so I set the valiableRowHeight of the grid to "true".
    When load everything works, mistakes comes when you try to enlarge the column to make a description to take less row (example row #1 before sesizig the description need 3 rows of text and after the resizing the descriotion need only 2 rows) as soon as you resized the column you notice that the text of the description effectly refreshed and takes only 2 rows but the height of the row could countain the 3rd row of the description that no more exists.
    If you do another resize operation the row height refresh correctly (example click on the column separator)
    I also tried to do table.validateNow(); on the mouse up event of the table.
    Following the code of a simple application.
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
           <mx:Script>
                 <![CDATA[                 
                        import mx.collections.ArrayCollection;
                        import mx.controls.Alert;
                        import mx.core.UIComponent;
                        import mx.events.FlexEvent;
                        [Bindable]
                        public var dp:ArrayCollection = new ArrayCollection([
                               {title:"Ghost Rider: Spirito di vendetta", description:"Johnny Blaze, funambolo del motociclista " +
                                                                                                                             "trasformato in spirito della vendetta dal " +
                                                                                                                             "demonio in virtù di un patto firmato con il " +
                                                                                                                             "sangue per la salvezza del padre, vive " +
                                                                                                                             "ritirato, rifiuta il proprio status e la " +
                                                                                                                             "propria missione. A richiamarlo in attività " +
                                                                                                                             "è la Chiesa, in Romania infatti il diavolo " +
                                                                                                                             "si è palesato di nuovo per sguinzagliare " +
                                                                                                                             "nuovi sgherri alla ricerca di un bambino " +
                                                                                                                             "a cui tiene in maniera preoccupante."},
                               {title:"La furia dei titani", description:"Gli uomini non pregano più, se ne sono " +
                                                                                                                             "disamorati dei loro dei, e come conseguenza " +
                                                                                                                             "questi stanno a poco a poco perdendo i " +
                                                                                                                             "propri poteri, compresa quell'immortalità " +
                                                                                                                             "che li rende sempre giovani. Alcuni sono " +
                                                                                                                             "anche morti. Intimoriti da quel che sta " +
                                                                                                                             "accadendo alcuni superstiti pianificano " +
                                                                                                                             "di riportare in vita Chronos dal Tartaro, " +
                                                                                                                             "spodestare Zeus e spazzare via il mondo. " +
                                                                                                                             "Per evitare il disastro viene richiamato " +
                                                                                                                             "in battaglia Perseo, che dopo aver sconfitto " +
                                                                                                                             "il mitologico Kraken si è ritirato a vita " +
                                                                                                                             "da pescatore. Sarà però costretto a rimettere " +
                                                                                                                             "mano alla spada dopo essere venuto a sapere " +
                                                                                                                             "dal morente zio Poseidone che il padre degli " +
                                                                                                                             "dei (nonchè suo) è stato catturato."},
                               {title:"Paranormal Xperience 3D", description:"Un gruppo di studenti di psichiatria accetta la " +
                                                                                                                "proposta del professore più autoritario della " +
                                                                                                                "facoltà: andranno in un villaggio minerario " +
                                                                                                                "abbandonato dove sarà loro possibile verificare " +
                                                                                                                "se i fenomeni paranormali esistono veramente. " +
                                                                                                                "Per il viaggio utilizzano un pulmino che viene " +
                                                                                                                "fornito loro da Diana, sorella della studentessa " +
                                                                                                                "Angela, che si unisce al gruppo. Sarà proprio il " +
                                                                                                                "passato infantile delle due sorelle ad entrare " +
                                                                                                                "drammaticamente nell'indagine."}
                        protected function table_mouseUpHandler(event:MouseEvent):void
                               table.validateNow();
                 ]]>
           </mx:Script>
           <mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
                         width="500" height="500"
                         horizontalGap="0">
                 <mx:DataGrid id="table"    width="500" height="500"
                                                    dataProvider="{dp}" variableRowHeight="true" mouseUp="table_mouseUpHandler(event)">
                        <mx:columns>
                               <mx:DataGridColumn id="titleCol" dataField="title" headerText="Title" wordWrap="true"/>
                               <mx:DataGridColumn id="titDescCol" itemRenderer="CustomRenderer" wordWrap="true"/>
                        </mx:columns>
                 </mx:DataGrid>
           </mx:VBox>
    </mx:Application>
    The descriptions are in italian but for a simple example the langage of the text  doesn't matter
    Hope can you help me guys otherwise I will be creazy very soon trying to solve this problem.

    Does your parent clip have any styles associated with it?
    Something is overwriting the Arial font.
    Try _lockroot if that persists.

  • Image Not getting displayed in DataGridColumn ItemRenderer

    I have a DataGridColumn ItemRenderer and based on the value,
    I am displaying image in the DataGridColumn
    However the image is not getting displayed.
    Below is my code. What could be the problem?
    Thanks

    "ajesing" <[email protected]> wrote in
    message
    news:gbcd0n$8sn$[email protected]..
    >I have a DataGridColumn ItemRenderer and based on the
    value, I am
    >displaying
    > image in the DataGridColumn
    > However the image is not getting displayed.
    >
    > Below is my code. What could be the problem?
    @Embed embeds at compiletime, so it can't take a variable. If
    you want to
    embed the graphics, embed them to the main file and use
    DataGrid's
    iconFunction to pass an icon to the itemRenderer.
    HTH;
    Amy

  • 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

  • Problem overloading "set data" function on Button DataGrid Renderer

    Hi all, I'm hoping this is something simple.
    I have a class that extends mx.controls.Button and implements mx.core.IDataRenderer.  I need to set the button icon whenever the Data property is set from the DataGrid.  My problem is that my overloaded set/get Data function are never called (I've stepped through the code in debug).  Instead the set/get functions in Container.as (Flex 3.4 SDK) get called.
    Here's the basics code:
    exportButtonRenderer.as
    package controls
        import flash.events.Event;
        import flash.events.MouseEvent;
        import mx.controls.Button;   
        import mx.core.IDataRenderer;
        import mx.controls.dataGridClasses.DataGridListData;   
        import mx.controls.listClasses.BaseListData;
        import mx.events.FlexEvent;
        import mx.controls.Alert;
        import model.descriptors.compDescriptor;
        import events.exportClickedEvent;   
        public class exportButtonRenderer extends Button implements IDataRenderer   
            //    embed your icons
            [Embed(source='/assets/icons/export.png')]
            [Bindable]
            public static var imageExport:Class;
            [Embed(source='/assets/icons/blank.png')]
            [Bindable]
            public static var imageBlank:Class;
            public function exportButtonRenderer()
                super();
            private var _listData:DataGridListData;
            override public function get listData():BaseListData
                return _listData;
            override public function set listData(value:BaseListData):void
                _listData = DataGridListData(value);
            private var _data:Object;       
            override public function get data():Object
                return _data;
            override public function set data(value:Object):void
                _data = value;
            override protected function clickHandler(event:MouseEvent):void
                super.clickHandler(event);   
    Now I know I'm using the Flexlib TreeGrid and not a standard DataGrid but when I trace through all the code all code firing the set/get functions is coming from the DataGrid anyway.
    Here's the my Grid def in my main app mxml:
    Header 1
    <flexlib:TreeGrid
            id="MKTXGrid"
            dragEnabled="false" sortableColumns="false" showRoot="false"
            disclosureClosedIcon="@Embed(source='/assets/icons/arrow_right.png')"
            disclosureOpenIcon="@Embed(source='/assets/icons/arrow_down.png')"
            folderOpenIcon="@Embed(source='/assets/icons/psd.png')"
            folderClosedIcon="@Embed(source='/assets/icons/psd.png')"       
            click="MKTXGrid_clickHandler(event)"
             doubleClickEnabled="true" doubleClick="MKTXGrid_doubleClickHandler(event)" left="0" right="0" top="0" bottom="16">
        <flexlib:columns>
                <flexlib:TreeGridColumn dataField="Name" headerText = "Name" minWidth="200" width="200" editable="true"/>
                <mx:DataGridColumn dataField="ExportName" headerText = "Export Name"/>
                <mx:DataGridColumn dataField="Export" headerText = "Export" width="50" minWidth="20" resizable="false">
                 <mx:itemRenderer>
                    <mx:Component>
                        <mx:Box horizontalAlign="center" width="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off">
                            <controls:exportButtonRenderer label="Export" icon="@Embed(source='assets/icons/export.png')" width="12" height="12" useHandCursor="true">                        
                                <controls:click>
                                    <![CDATA[
                                        import events.exportClickedEvent;
                                        var e:exportClickedEvent = new exportClickedEvent();
                                        e.itemData = data;
                                        dispatchEvent(e);
                                    ]]>
                                </controls:click>
                            </controls:exportButtonRenderer>
                        </mx:Box>
                    </mx:Component>
                </mx:itemRenderer>
                </mx:DataGridColumn>
            </flexlib:columns>
        </flexlib:TreeGrid>
    Nothing too special going on.
    I know this can be done, I've seen examples in the SDK:
    http://opensource.adobe.com/svn/opensource/durango/trunk/ExternalFlexTools/com/dougmccune/ containers/accordionClasses/AccordionHeader.as
    By the way I've stepped through the code of the TreeGridItemRenderer class in Flexlib which works correctly and the class def starts like this:
    TreeGridItemRenderer.as
    import flash.display.DisplayObject;
    import flash.display.InteractiveObject;
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.geom.Point;
    import flash.geom.Rectangle;
    import flexlib.controls.TreeGrid;
    import mx.controls.Image;
    import mx.controls.dataGridClasses.DataGridListData;
    import mx.controls.listClasses.BaseListData;
    import mx.controls.listClasses.IDropInListItemRenderer;
    import mx.controls.listClasses.IListItemRenderer;
    import mx.core.IDataRenderer;
    import mx.core.IFlexDisplayObject;
    import mx.core.IToolTip;
    import mx.core.SpriteAsset;
    import mx.core.UIComponent;
    import mx.core.UITextField;
    import mx.events.FlexEvent;
    import mx.events.ToolTipEvent;
    import mx.events.TreeEvent;
    import mx.managers.ILayoutManagerClient;
    import mx.styles.IStyleClient;
    public class TreeGridItemRenderer extends UIComponent
                                      implements IDataRenderer,
                                                   IDropInListItemRenderer,
                                                 ILayoutManagerClient,
                                                   IListItemRenderer
    Any help would be great!

    That's because you put your component in a Box.  The DataGrid is setting the Box's .data property and no code is setting the one on your component.  You shouldn't really need Box.  You can override updateDisplayList to center your Button instead.
    Alex Harui
    Flex SDK Developer
    Adobe Systems Inc.
    Blog: http://blogs.adobe.com/aharui

Maybe you are looking for