Datagrid itemrenderer issue

I have created a datagrid which has suppose 4 columns out of which 1 has an option of setting as favorite just like we have in our every mail servers (gmail, yahoo, outlook, etc). I have used a linkbutton as an item renderer and its toggle property as true. so wenever i click on it its getting selected and i have used skin for selected and normal state which is a star.
The problem is that when data length exceeds and scrollbar comes in datagrid and whenever i scroll down and up the stars which are not selected are getting selected or in some scenarios the whole column stars get selected.
How to get rid of this problem ?

Can I see the itemrenderer code. I'm assuming that you aren't clearing the values from previous objects in you
override protected function set data( value:Object ):void call.
Sincerely ,
Ubu/

Similar Messages

TabIndex in DataGrid ItemRenderer Component

How to implement tabindex for the DataGrid ItemRenderer
Component?Any
idea Please.

"ravi_bharathii" <[email protected]> wrote
in message
news:gbv9ps$k6r$[email protected]..
> How to implement tabindex for the DataGrid ItemRenderer
Component?Any
> idea Please.
Is this what you wanted?
http://blogs.adobe.com/aharui/2008/08/datagrid_itemeditor_with_two_i.html

[svn:fx-4.x] 14289: Fix DataGrid mirroring issues when layoutDirection="rtl " and direction="rtl":

Revision: 14289
Revision: 14289
Author:   [email protected]
Date:     2010-02-19 13:08:54 -0800 (Fri, 19 Feb 2010)
Log Message:
Fix DataGrid mirroring issues when layoutDirection="rtl" and direction="rtl":
- headers get messed up when resizing, moving or sorting a column because the transform matrix in UIFTETextField wasn?\226?\128?\153t always updated when width was changed
- when moving a column, the headerSelection sprite was moving in the wrong direction
- when dragging a row, the drag image was backwards and the x offset between the image and the mouse pointer was wrong
QE notes:
Doc notes: None
Bugs: SDK-25424, SDK-25426, SDK-25440, SDK-25442, SDK-25452, SDK-25460, SDK-25462, SDK-25464
Reviewed By: Hans
Tests run: checkintests
Is noteworthy for integration: No
Ticket Links:
    http://bugs.adobe.com/jira/browse/SDK-25424
    http://bugs.adobe.com/jira/browse/SDK-25426
    http://bugs.adobe.com/jira/browse/SDK-25440
    http://bugs.adobe.com/jira/browse/SDK-25442
    http://bugs.adobe.com/jira/browse/SDK-25452
    http://bugs.adobe.com/jira/browse/SDK-25460
    http://bugs.adobe.com/jira/browse/SDK-25462
    http://bugs.adobe.com/jira/browse/SDK-25464
Modified Paths:
    flex/sdk/branches/4.x/frameworks/projects/framework/src/mx/controls/DataGrid.as
    flex/sdk/branches/4.x/frameworks/projects/framework/src/mx/controls/dataGridClasses/DataG ridDragProxy.as
    flex/sdk/branches/4.x/frameworks/projects/framework/src/mx/controls/dataGridClasses/DataG ridHeader.as
    flex/sdk/branches/4.x/frameworks/projects/framework/src/mx/core/UITextField.as
    flex/sdk/branches/4.x/frameworks/projects/framework/src/mx/managers/DragManagerImpl.as
    flex/sdk/branches/4.x/frameworks/projects/spark/src/mx/core/UIFTETextField.as

Dear Pallavi,
Very useful post!
I am looking for similar accelerators for
Software Inventory Accelerator
Hardware Inventory Accelerator
Interfaces Inventory
Customization Assessment Accelerator
Sizing Tool
Which helps us to come up with the relevant Bill of Matetials for every area mentioned above, and the ones which I dont know...
Request help on such accelerators... Any clues?
Any reply, help is highly appreciated.
Regards
Manish Madhav

ItemRenderer Issue with DataGrid and Label

<mx:DataGrid width="100%" height="100%" rowCount="5" dataProvider="{publish_status}">
     <mx:columns>
          <mx:DataGridColumn dataField="status" headerText="Status">
               <mx:itemRenderer>
                    <fx:Component>
                         <mx:Label text="{data.status}" fontSize="12">
                              <fx:Script>
                                   <![CDATA[
                                   override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                                   super.updateDisplayList(unscaledWidth, unscaledHeight);
                                   if(this.text == "A"){
                                        setStyle("color", "blue");
                                   else if(this.text == "B"){
                                             setStyle("color", "green");
                                   else if(this.text == "C"){
                                        setStyle("color", "red");
                                   else{
                                        setStyle("color","white");
                                   ]]>
                              </fx:Script>
                         </mx:Label>
                    </fx:Component>
               </mx:itemRenderer>
          </mx:DataGridColumn>
     </mx:columns>
</mx:DataGrid>
I created an inline ItemRenderer as above. I understand that it gets recycled and have included the last "else" statement to return color to default if all tests fail. The problem is that the text is still showing up in the wrong colors. I have done a lot of reading on the forums but I can't figure out what I'm missing.
Thanks.
Btw, I am using Flash Builder 4.

Hi ,
Try changing the color in set data function override method instead of updateDisplayList override.
override public function set data(value:Object):void
     if(this.text == A){
        setStyle(color, blue);
   else if(this.text == B){
        setStyle(color, green);
   else if(this.text == C){
        setStyle(color, red);
   else{
        setStyle(color,white);
Thanks,
Bhasker

Enable disable linkbar links in datagrid itemrenderer.

Hi All,
I have to show the linkbar in datagrid column as a renderer and enable and disable the links according to attached documents codes.
here are my sample code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        [Bindable]
          public var arrColl:ArrayCollection = new ArrayCollection();
          public function init():void{
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
    ]]>
</mx:Script>
    <mx:DataGrid id="dg" dataProvider="{arrColl}" width="200" height="500" x="510" y="168" >
        <mx:columns>
            <mx:DataGridColumn itemRenderer="assets.components.linkbarItemRenderer" />
        </mx:columns>
    </mx:DataGrid>
</mx:Application>
My item renderer linkbarItemRenderer.mxml as
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" creationComplete="init();" >
<mx:Script>
    <![CDATA[
        import mx.controls.LinkButton;
        import mx.collections.ArrayCollection;
        import mx.controls.Alert;
        [Bindable] public var arrColl : ArrayCollection = new ArrayCollection();
        public var arrDocType : ArrayCollection = new ArrayCollection([{data:"1" , label:"AP"},{data:"2" , label:"AR"},{data:"3" , label:"BOL"}]);
        public var attDoccodes : Array;
        public function init():void
            try
                var requiredDoc :String = data[0];
                var attachDoc : String = data[1];
                var reqDocCodes :Array = requiredDoc.split(",");
                attDoccodes = attachDoc.split(",");
                if(reqDocCodes != null)
                    //add the links of required documents.
                    for(var i:int = 0 ; i<reqDocCodes.length; i++ )
                        var obj:Object = new Object();
                        for(var j : int = 0; j < arrDocType.length; j++)
                            if(arrDocType.getItemAt(j).data == reqDocCodes[i])
                                obj.label = arrDocType.getItemAt(j).label;
                                obj.data = reqDocCodes[i];
                        arrColl.addItem(obj);
                callLater(enableDisalbeLinks);
            catch(error:Error)
                Alert.show("error ::"+error.getStackTrace());
        public function enableDisalbeLinks():void
            try
                //disable all links first
                for(var q:int=0; q< arrColl.length; q++)
                    LinkButton(linkBarId.getChildAt(q)).enabled = false;
                if(attDoccodes != null)
                    for(var k:int = 0; k<attDoccodes.length; k++)
                        for(var l:int = 0 ; l<arrColl.length; l++)
                            if(arrColl.getItemAt(l).data == attDoccodes[k])
                                LinkButton(linkBarId.getChildAt(l)).enabled = true;
            catch(error:Error)
                Alert.show("error ::"+error.getStackTrace());
    ]]>
</mx:Script>
        <mx:LinkBar id="linkBarId" dataProvider="{arrColl}" />
</mx:HBox>
It renderes the link in correct form in datagrid first time.when i scroll the datagrid the rows are miss up with each other and links are not shown propers in enable/disable format.
Thanks,
Amol.

Hi All,
It was my fault. Got it work now.
When I redirect to PR, it also calls my page initialization method and clear all data. I added a parameter and issue resolved.
Thanks & Regards,
KJ

DataGrid itemrenderer with switch statement

Hi,
I have datagrid control with this columns
<mx:DataGrid id="dgvParagraphs" >
    <mx:columns>
        <mx:DataGridColumn dataField="type" headerText="Type"/>
        <mx:DataGridColumn dataField="title" headerText="Title"/>
        <mx:DataGridColumn dataField="content" visible="false"/>
    </mx:columns>
</mx:DataGrid>
Under type column I have values from 1 to 6. Each number presents type of content. I have icons for each type. I would like to show icon instead of just number. I know this can be done using itemrenderes but I don't know how to accomplish this.

If this post answers your question or helps, please mark it as such.
Greg Lafrance
www.ChikaraDev.com
Flex Development and Support Services
You might see issues with this code during scrolling, as DataGrid recycles itemRenderers, but in that case the icon information must be in the data.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
    <![CDATA[
      public function getImageSource(item:Object):String{
        var retVal:String;
        switch(uint(item.type)){
          case 1:
            retVal = "black.png";
            break;
          case 2:
            retVal = "blue.png";
            break;
          case 3:
            retVal = "gray.png";
            break;
          case 4:
            retVal = "green.png";
            break;
          case 5:
            retVal = "purple.png";
            break;
          case 6:
            retVal = "red.png";
            break;
        trace(retVal);
        return retVal;
    ]]>
</mx:Script>
<mx:DataGrid id="dgvParagraphs" dataProvider="{dataXML..item}">
    <mx:columns>
      <mx:DataGridColumn dataField="type" headerText="Type" width="50">
        <mx:itemRenderer>
          <mx:Component>
            <mx:Image source="{outerDocument.getImageSource(data)}" horizontalAlign="center"/>
          </mx:Component>
        </mx:itemRenderer>
      </mx:DataGridColumn>
      <mx:DataGridColumn dataField="title" headerText="Title" width="100"/>
      <mx:DataGridColumn dataField="content" visible="false"/>
    </mx:columns>
</mx:DataGrid>
<mx:XML id="dataXML" xmlns="">
    <data>
      <item>
        <type>2</type>
        <title>My Title 1</title>
        <content>Content 1</content>
      </item>
      <item>
        <type>5</type>
        <title>My Title 2</title>
        <content>Content 2</content>
      </item>
      <item>
        <type>3</type>
        <title>My Title 3</title>
        <content>Content 3</content>
      </item>
      <item>
        <type>1</type>
        <title>My Title 4</title>
        <content>Content 4</content>
      </item>
      <item>
        <type>4</type>
        <title>My Title 5</title>
        <content>Content 5</content>
      </item>
      <item>
        <type>6</type>
        <title>My Title 6</title>
        <content>Content 6</content>
      </item>
      <item>
        <type>2</type>
        <title>My Title 7</title>
        <content>Content 7</content>
      </item>
      <item>
        <type>1</type>
        <title>My Title 8</title>
        <content>Content 8</content>
      </item>
      <item>
        <type>4</type>
        <title>My Title 9</title>
        <content>Content 9</content>
      </item>
      <item>
        <type>5</type>
        <title>My Title 10</title>
        <content>Content 10</content>
      </item>
      <item>
        <type>2</type>
        <title>My Title 11</title>
        <content>Content 11</content>
      </item>
    </data>
</mx:XML>
</mx:Application>

Change one alternatingRowColor of a spark DataGrid ItemRenderer

Hi,
I try to find a way to change the alternatingRowColor of only one spark ItemRenderer. It depends on a property set in an item in the DataProvider and this property can change at the runtime.
How do to this?
Thx.

Do you mean to say depending on item value in data provider it datagrid row color should change?
If yes then following link can help to solve your issue:
http://butterfliesandbugs.wordpress.com/2011/02/04/changing-the-background-color-of-a-row- using-itemrendererfunction/
Thanks and Best regards,
Pooja Kuber | [email protected] | www.infocepts.com

How do I access listData for a DataGrid itemRenderer?

I want to make simple reusable components in .mxml to use in
my dataGrid classes. I do NOT want to specify the data field
because I might use the same renderer in multiple columns of the
same Grid (for example a check box renderer) and I do not want to
make several identical components whose only difference is the
value they draw from "data". To do this, I need access to
"listData". Specifically listData.dataField. According to the docs
I need to implement mx.controls.listClasses.IDropInListRenderer. I
have tried the following in my mxml code:
<mx:Component id="reusableEditor">
<mx:HBox
implements="mx.controls.dataGridClasses.DataGridItemRenderer">
import mx.controls.dataGridClasses
.. contents and logic for displaying
data[listData.dataField]..
</mx:HBox>
</mx:Component>
I get an unhelpful error in Flex Builder saying that "An
internal build error has occurred" and only now guess that it comes
from the line
"implements="mx.controls.dataGridClasses.DataGridItemRenderer""
(when I remove that line, things work fine). I have not found
anywhere to check if I am implementing this correctly because there
is no example to work from that does what I want to do--even though
I use DataGrid 100s of times more often than any other list class!
The TreeRenderer example later in the docs is the only code
addressing this issue but it involves an AS Class that does not
extend (as far as I can tell) a Container like HBox and implements
no interface.
To put the question simply, how can I get access to
listData???

the <mx:DataGridItemRenderer> tag was not the solution
either...
I finally figured out what the ambiguous compiler error
meant... I hadn't implemented the functions required for the
interface. Below is working code that either declared as an
internal component or an external .mxml file will display the value
of its column without explicitely defining what that value is.
Although this component is extremely simple, it was very
difficult to figure out how to implement from the docs... I hope
someone from Adobe takes note.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
[Bindable]
public var dp:Array = [{num:2, bool:true}, {num:3,
bool:false}];
]]>
</mx:Script>

<mx:Component id="cbren3">
<mx:HBox horizontalAlign="center" verticalAlign="middle"
implements="mx.managers.IFocusManagerComponent,
mx.controls.listClasses.IDropInListItemRenderer">
<mx:Script>
<![CDATA[
import mx.controls.listClasses.BaseListData;
import mx.controls.dataGridClasses.DataGridListData;
private var _listData:DataGridListData;
[Bindable("dataChange")]
public function get listData():BaseListData {
return _listData;
public function set listData(value:BaseListData):void {
_listData = DataGridListData(value);
override public function drawFocus(focused:Boolean):void {
check.setFocus();
override protected function
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
super.updateDisplayList(unscaledWidth, unscaledHeight);
if (super.data) {
var dgListData:DataGridListData =
DataGridListData(listData);
//for some reason, setting check.selected here results in
buggy behavior
//check.selected = data[dgListData.dataField];
//defining a getter based on the "dataChange" event seems to
update the CheckBox value properly when
//clicked, rolledOut, sorted, etc...
//also, doing it this way circumvents those annoying "Data
binding will not be able to detect changes... blah blah"
[Bindable("dataChange")]
public function get val():Boolean {
return Boolean(data[_listData.dataField]);
]]>
</mx:Script>
<mx:Boolean id="blorch" />
<mx:CheckBox id="check" selected="{val}"
change="blorch=check.selected"
updateComplete="blorch=check.selected" />
</mx:HBox>
</mx:Component>
<mx:DataGrid id="test" editable="true"
dataProvider="{dp}">
<mx:columns>
<mx:DataGridColumn dataField="num" headerText="num" />
<mx:DataGridColumn dataField="bool" headerText="Sent"
itemRenderer="{cbren3}" rendererIsEditor="true"
editorDataField="blorch">
</mx:DataGridColumn>
<mx:DataGridColumn dataField="num" headerText="num"
editable="true" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
if anyone has suggestions or feedback, please let me know...
I am still trying to figure out the best way to do this.

DATAGRID FOCUS ISSUE: Focus got lost, while moving from one cell to another cell using tab key.

Problem: Focus got lost, while moving from one cell to another cell using tab key.
Example: In an AdvanceDataGrid, there are three columns having custom ItemRenderer with Spark TextInput control (editable=true & focusEnabled=true).
When I try to move the focus in with in 2nd, 3rd & 4th column using tab key, focus got lost. Most of the time it’s working, but some time it doesn’t work. There’s no clue as to how may rows/columns the focus has jumped to; or whether the focus has gone out of the data grid altogether.
Observations: I am not sure whether this problem is because of custom component implementation or it is because of some issue related to Flex Component.
It only occurs when we perform some actions like some server call, some complex logic execution etc. at the focus out event of itemrenderer.
There is one property of datagrid i.e. editedItemPosition which contains row & column index of datagrid. On the focus out event, it gets null when focus got lost. We tried to set it, but it didn’t work.
Steps Performed:-
1. Currently focus is in 2nd column i.e. Apply to #.
2. Once I press tab key from 2nd column, it goes to 3rd column which is correct.
3. Now if I press tab key from 2nd column i.e. Payment #, focus should go to 3rd column, but it goes out of data grid and set the focus of button which is outside data grid.

http://search.java.sun.com/search/java/index.jsp?qp=&nh=10&qt=%2Bjtable+%2Btab+%2B%22enter+key%22&col=javaforums

Datagrid sorting issues with 1/0 items to consider

Hi all,
I have an issue I can't find a way to fix. I am using a datagrid which I pouplate through a XMListCollection based on some XML datas.
XML:
var prefs:XML = <files>
<file name="@toto" favourite="1"/>
<file name="@toto"favourite="0"/>
</files>;
XMLListCollection
var xlc:XMLListCollection = new XMLListCollection( new XMLList ( prefs.file) );
MXML
<mx:DataGrid id="filesList" width="100%" height="100%" dataProvider="{xlc}">
<mx:columns>
<mx:DataGridColumn width="25" dataField="@favourite"sortCompareFunction="favourite_sortCompareFunc"/>
</mx:columns>
</mx:DataGrid>
Sorting fucnction:
private function favourite_sortCompareFunc(itemA:Object, itemB:Object):int {
    var value1:Number = Number( itemA.@favourite );
    var value2:Number = Number( itemB.@favourite );
    if(value1 < value2){
         var n:Number = -1;
         return n;
    else if(value1 > value2){
         return 1;
    else{
         return 0;
    return 1;
Once loaded, the datagrid appears in a "normal state":
But if I try to sort first column, it becomes messy
I think it might be related to the fact that the data to be sorted is only made of 0 & 1. But I can't imagine this kind of situations is not fixable.
Any hint ?
Thanks in advance for any advice,
Loic

Hi guys,
First of all, all my apologizes for my silence. I had technical issues with Yahoo mail that made me miss 3 months mail ! So I just missed your posts and I can only come today to thank you all for your care and answers.
In the meanwhile, I finally got it working by doing…nothing. Let me explain. The issue was caused by equal datas ( 1 or 0 ). So Flex couldn't sort 1 and 1 or 0 and 0 by itself. But these 0 and 1 were flags for an itemrenderer made of a button in toggle mode. 1 standed for on, 0 for off.
Doing so I did override updateDisplayList and then the issue went away. But if I had to stick with pure datas ( 1 or 0 ) I think I would have had to do a custom sort function to deal with equal datas like a few of you offered.
@DonMitchinson the @ stands for the xml attribute as the datagrid is populated with XMLListCollection from an XML file.
Thanks for your sharing,
Best,
Loic

Showing/hiding images in a DataGrid ItemRenderer flex

Hi,
I have datagrid in that i have a itemRenderer in which i am loading images. What i need to do is i have to hide one or two images in tha datagrid.
For example if i have ten rows of data with image means i need to hode 4 rows images. Please any body help me.
Regards,
Jayagopal.
Message was edited by: Jayagopal Flex

Try adding visible='{data.participant_count>0}' to your HBox or Component
-K

Datagrid itemRenderer - Help needed

I am having trouble getting this little bit of code working. I am trying to build an adhoc SQL generator, where the user selects the list of fields and then is able to set the WHERE criteria in a dataGrid, each row has field, criteria (ComboBox -equals, less than, etc), Low (editable), High (editable-Text or ComboBox lookup), AND/OR static ComboBox. Some of the field selections could be regular text based fields like Name and other fields selected could be lookup fields like State. I would like to be able to on rows that are TextInput render out a TextInput for LowValue and HighValue columns and for lookup fields render out a ComboBox with the dataProvider being set by a call to addComboData.
addComboData simply uses the myDataGrid.selectedItem.fieldname to determine which of the lookup table to use and assigns that collection to CBoxdataProvider. Seems simple enough but I have not been able to figure it out, some modifications seem to work, but only for a single dg cell others give me a list but does not populate lowValue but kill all other renderers. All help is appreciated.
<mx:DataGridColumn headerText="Low" rendererIsEditor="true" editorDataField="selectedItem" dataField="lowValue" textAlign="center">
<mx:itemRenderer>
<mx:Component>
    <mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off" horizontalAlign="center">
       <mx:ComboBox initialize="outerDocument.addComboData()" dataProvider="{ outerDocument.CBoxdataProvider }" labelField="Description" textAlign="left" visible="{data.showCombo}" />
      <mx:TextInput id="lowLabel" visible="{!data.showCombo}" />
   </mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

Setting the selected item is not the same as a click. If you created the renderer correctly the style should change when you actually click on the item. (Does it?)
Or are you just trying to get the first row's background to be a different style when the datagrid first shows? (Initialization problem or not working at all?)

Datagrid itemRenderer/itemEditor trouble

I have a datagrid in a Flex project, the data grid has an XML file as the source (contents below), now due to the way it is formatted (I cannot change this) some of the data I want to display is inside a tag that isnt at the initial array level. Here is the file:
<?xml version="1.0" encoding="utf-8" ?>
<Categories>
<Category>
<CategoryName>Cat 1</CategoryName>
<CategoryLink>http://www.google.com</CategoryLink>
<CategoryData>
   <CategoryDescription>This is the description of category 1</CategoryDescription>
   <CategoryHeader>My Category Title 1</CategoryHeader>
   <CategoryNumber>1</CategoryNumber>
</CategoryData>
</Category>
</Categories>
I need to display CategoryName, CategoryLink, CategoryData.CategoryDescription, CategoryData.CategoryNumber.
Now I blindly dropped the datagrid into the project and bound it to the data source, I get the following returned for CategoryData:
[object CategoryData_type]
Not much use, but with what appears to be a hack I changed the code for the column to read dataField="CategoryData.CategoryDescription", and hooray it works. I didnt realise at the time that this was wrong, and when I dropped in an itemEditor things went wrong. When the datagrids load they display the correct data, but then when you try to edit any of the child property fields you get the following error:
ReferenceError: Error #1069: Property CategoryData.CategoryDescription not found on valueObjects.Category_type and there is no default value.
I have looked up the error and I realise that it means that there is no value for CategoryData.CategoryDescription, but if I can display it why can i not edit it! What do I have to do to make this work?
Anyway, here is the code, it shows the default bound datagrid, a second datagrid with the hack applied, and a third hacked datagrid with an itemRenderer and itemEditor on the number columns
Can you please take a look and tell me what I did wrong, well more to the point, if there is a doc that explains how to deal with XML like this then please point me at it.
I did try changing the return type for ANY of the columns, but this fails, I also tried a labelFunction, but again I can get the [object CategoryData_type] to display, but I get the null reference exception as the datagrid loads if I try to get to the child props.
Here is the Flex code:
<?xml version="1.0" encoding="utf-8"?>
<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/mx"
      xmlns:categories="services.categories.*"
      minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
   import mx.controls.Alert;
   import mx.events.FlexEvent;
   protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
    getDataResult.token = categories.getData();
   protected function lftest(item:Object, column:GridColumn):String
    var t:String = item.CategoryData;
    return t;
]]>
</fx:Script>
<fx:Declarations>
<s:CallResponder id="getDataResult"/>
<categories:Categories id="categories"
          fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
          showBusyCursor="true"/>

</fx:Declarations>
<s:DataGrid id="dataGrid" x="10" y="10" width="684"
    creationComplete="dataGrid_creationCompleteHandler(event)" editable="true"
    requestedRowCount="4">
<s:columns>
   <s:ArrayList>
    <s:GridColumn width="100" dataField="CategoryName" headerText="CategoryName"></s:GridColumn>
    <s:GridColumn width="100" dataField="CategoryLink" headerText="CategoryLink"></s:GridColumn>
    <s:GridColumn width="180" dataField="CategoryData" headerText="CategoryData"></s:GridColumn>
   </s:ArrayList>
</s:columns>
<s:typicalItem>
   <fx:Object CategoryData="CategoryData1" CategoryLink="CategoryLink1"
        CategoryName="CategoryName1"></fx:Object>
</s:typicalItem>
<s:AsyncListView list="{getDataResult.lastResult}"/>
</s:DataGrid>
<s:DataGrid id="dataGrid2" x="10" y="147" width="684" editable="true" requestedRowCount="4">
<s:columns>
   <s:ArrayList>
    <s:GridColumn width="100" dataField="CategoryName" headerText="CategoryName"></s:GridColumn>
    <s:GridColumn width="100" dataField="CategoryLink" headerText="CategoryLink"></s:GridColumn>
    <s:GridColumn width="180" dataField="CategoryData" headerText="CategoryData"></s:GridColumn>
    <s:GridColumn dataField="CategoryData.CategoryDescription" headerText="Desc"></s:GridColumn>
    <s:GridColumn dataField="CategoryData.CategoryHeader" headerText="Head"></s:GridColumn>
    <s:GridColumn dataField="CategoryData.CategoryNumber" headerText="Num"></s:GridColumn>
   </s:ArrayList>
</s:columns>
<s:typicalItem>
   <fx:Object CategoryData="CategoryData1" CategoryLink="CategoryLink1"
        CategoryName="CategoryName1"></fx:Object>
</s:typicalItem>
<s:AsyncListView list="{getDataResult.lastResult}"/>
</s:DataGrid>
<s:DataGrid id="dataGrid3" x="10" y="284" width="684" editable="true" requestedRowCount="4">
<s:columns>
   <s:ArrayList>
    <s:GridColumn width="100" dataField="CategoryName" headerText="CategoryName"></s:GridColumn>
    <s:GridColumn width="100" dataField="CategoryLink" headerText="CategoryLink"></s:GridColumn>
    <s:GridColumn width="180" dataField="CategoryData" headerText="CategoryData"></s:GridColumn>
    <s:GridColumn headerText="Number">
     <s:itemRenderer>
      <fx:Component>
       <s:GridItemRenderer>
        <s:NumericStepper value="{data.CategoryData.CategoryNumber}" />
       </s:GridItemRenderer>
      </fx:Component>
     </s:itemRenderer>
    </s:GridColumn>
    <s:GridColumn dataField="CategoryData.CategoryNumber" headerText="Number">
     <s:itemEditor>
      <fx:Component>
       <s:GridItemEditor>
        <s:NumericStepper value="{data.CategoryData.CategoryNumber}" />
       </s:GridItemEditor>
      </fx:Component>
     </s:itemEditor>
    </s:GridColumn>
   </s:ArrayList>
</s:columns>
<s:typicalItem>
   <fx:Object CategoryData="CategoryData1" CategoryLink="CategoryLink1"
        CategoryName="CategoryName1"></fx:Object>
</s:typicalItem>
<s:AsyncListView list="{getDataResult.lastResult}"/>
</s:DataGrid>
</s:Application>
All and any advice welcome.
Shaine

One last try, I now know for sure that the data in the file is loading, I created a labelFunction on the CategoryDescription column that looks like this:
protected function dispData(item:Object, column:GridColumn):String
    var t:Object = item.CategoryData;
    var s:String = item.CategoryData.CategoryDescription;
    return s;
Because it returns s, which I now know is undefined (which is the problem!) I managed to get a debug output. As you can see the value of t is the categorydata, and it appears to have the 3 values I need to get access to, but I have no idea how to do this. I also changed the function to read:
protected function dispData(item:Object, column:GridColumn):String
var t:Object = item.CategoryData;
var s:String = t.CategoryDescription;
return s;
But this undefines t and s! Very confused
this test2 (@d2e10a1)
item valueObjects.Category_type (@91f8a51)
[inherited]
column spark.components.gridClasses.GridColumn (@d61b239)
t valueObjects.CategoryData_type (@91f8c11)
[inherited]
_cacheInitialized_isValid false
CategoryDescription "This is the description of category 1"
CategoryHeader "My Category Title 1"
CategoryNumber "1"
_changedObjects mx.collections.ArrayCollection (@d5d9e41)
_changeWatcherArray [] (@cfab061)
_dminternal_model _CategoryData_typeEntityMetadata (@d4286a1)
_doValidationCacheOfCategoryDescription null
_doValidationCacheOfCategoryHeader null
_doValidationCacheOfCategoryNumber null
_doValidationLastValOfCategoryDescription null
_doValidationLastValOfCategoryHeader null
_doValidationLastValOfCategoryNumber null
_internal_CategoryDescription "This is the description of category 1"
_internal_CategoryHeader "My Category Title 1"
_internal_CategoryNumber "1"
_invalidConstraints [] (@ca50fd9)
invalidConstraints_der <setter>
_isValid false
isValid_der <setter>
managingService <setter>
_managingService null
_model _CategoryData_typeEntityMetadata (@d4286a1)
_validationFailureMessages [] (@cfab0b1)
s undefined
As always all help welcome.
Shaine
Message was edited after a oops moment by: ProcessEndNow

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

Move focus from one to another itemRenderer inside DataGrid itemRenderer

I have a mx: DataGrid with 4 columns that have a itemRenderer with the following settings:
- Mx:DataGrid:
<code>
<mx:DataGrid id="itensPedidoCompraList"
      width="100%"
height="120"
dataProvider="{ model.pedidoCompra.itens }"
editable="true"
itemEditEnd="itensPedidoCompraList_itemEditEndHandler(event)">
</code>
- Mx:DataGridColumn:
<code>
<mx:DataGridColumn headerText="{resourceManager.getString('cadastroPedidoCompra', 'ident.PercentualDesconto') }"
                   width="60"
                   textAlign="right"
                   rendererIsEditor="true"
                                      editorDataField="data">
      <mx:itemRenderer>
                 <fx:Component>
                       <mx:Canvas>
                                 <input:NumberInput width="55"                                                                number="@{ data.percentualDesconto }"/>
                       </mx:Canvas>
            </fx:Component>
      </mx:itemRenderer>
</mx:DataGridColumn>
</code>
The user clicks on the line of the grid and click on the column to edit.
After him change or add value, ENTER key and have to move the focus to another column in the same line.
The way I'm doing, is moving to the column below.
What is the best way to do to move to the right column?
thank you

Try adding a capture phase event listener to DataGrid for keyDown and changing the key from ENTER to TAB

Datagrid itemrenderer issue

Similar Messages

Maybe you are looking for