Update cell Sprite in DataGrid

Question

Hi,
I have a datagrid with a LOT of sprites (1700 circles, squares, and triangles) that I created in an itemRenderer in Actionscript using Peter Ent's excellent tutorial on custom item renderers. http://www.adobe.com/devnet/flex/articles/itemrenderers_pt5_03.html. Therefore, the Sprites inherit from UIComponent.
I need to dynamically update a few of these sprites based on new data I pull down from the server once per minute.
A full-page refresh is to be avoided since it takes 3-4 seconds to load and is disruptive to the user experience.
Getting the row/column # from the datagrid's itemClick event is dead simple, but I don't see my Sprite when I look at the data using the debugger.
What is the syntax to retrieve a given cell's Sprite from the application? Also, once I have that Sprite, how do I update/replace a Sprite only in that cell?
Please help.
Thanks!!!

Answer 1

You're right, it isn't adding rows.
I'm not sure what you mean by 'all the sprites are chosen based on the data  object and that old existing sprites get removed or re-purposed'.
I have 3 grids, but for the sake of simplicity will focus on just 1.
There are 39 rows and 15 columns. Each has a Sprite. At the moment, each column has its own custom ItemRenderer since there are data tags unique to each. I've noticed that the whole Object is passed in, so I *could* have one ginormous class to create Sprites for all 15 columns of a row at once, but (1) it didn't work to put that ItemRenderer at the datagrid level versus the individual column level and (2) I'm not sure which is more efficient.
Anyway, back to the most pressing problem: how to update Sprites in the grid from data updates.
Here is the code for the custom Item Renderer:
package utilities
     import flash.display.Sprite;
     import mx.controls.ToolTip;
     import mx.controls.listClasses.IListItemRenderer;
     import mx.core.UIComponent;
     import mx.events.FlexEvent;
     public class Drop1Renderer extends UIComponent implements IListItemRenderer
          public function Drop1Renderer()
               super();
               height=20;
               width=16;
          // Internal variable for property
          private var _data:Object;
          // Make it bindable
          [Bindable("dataChange")]
          // Define the getter
          public function get data():Object
               return _data;
          //define the setter
          public function set data(value:Object):void
               _data = value;
               invalidateProperties();
               dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
               if (value.deviceType1 != "Null")
                    var mySprite:Sprite = new Sprite();
                    mySprite.cacheAsBitmap=false;
                    buttonMode=true;
                    var uic:UIComponent = new UIComponent();
                    mySprite.graphics.beginFill(value.deviceColor1);
                    var triangleHeight:Number = 12;
                    switch (value.deviceType1)
                         case "Circle":
                              mySprite.graphics.lineStyle(1,0x000000, .5);
                              mySprite.graphics.drawCircle(8, 9, 5);
                              break;
                         case "CircleBlue":
                              mySprite.graphics.lineStyle(2,0x0000DD, .9);
                              mySprite.graphics.drawCircle(8, 9, 5);
                              break;
                         case "TriangleRed":
                              mySprite.graphics.lineStyle(2,0xFF0000, .9);
                              mySprite.graphics.moveTo((triangleHeight/2)+2, 3);
                              mySprite.graphics.lineTo(triangleHeight+2, triangleHeight+1);
                              mySprite.graphics.lineTo(2, triangleHeight+1);
                              mySprite.graphics.lineTo((triangleHeight/2)+2, 3);
                              break;
                         case "Triangle":
                              mySprite.graphics.lineStyle(1,0x000000, .5);
                              mySprite.graphics.moveTo((triangleHeight/2)+2, 3);
                              mySprite.graphics.lineTo(triangleHeight+2, triangleHeight+1);
                              mySprite.graphics.lineTo(2, triangleHeight+1);
                              mySprite.graphics.lineTo((triangleHeight/2)+2, 3);
                              break;
                         case "TriangleBlue":
                              mySprite.graphics.lineStyle(2,0x0000DD, .9);
                              mySprite.graphics.moveTo((triangleHeight/2)+2, 3);
                              mySprite.graphics.lineTo(triangleHeight+2, triangleHeight+1);
                              mySprite.graphics.lineTo(2, triangleHeight+1);
                              mySprite.graphics.lineTo((triangleHeight/2)+2, 3);
                              break;
                         case "Rect":
                              mySprite.graphics.lineStyle(1,0x000000, .5);
                              mySprite.graphics.drawRect(3, 4, 10, 10);
                              break;
                         case "RectBlue":
                              mySprite.graphics.lineStyle(2,0x0000DD, .9);
                              mySprite.graphics.drawRect(3, 4, 10, 10);
                              break;
                         case "RectOrange":
                              mySprite.graphics.lineStyle(2,0xFFA500, .9);
                              mySprite.graphics.drawRect(3, 4, 10, 10);
                              break;
                         case "Ellipse":
                              mySprite.graphics.lineStyle(1,0x000000, .7);
                              mySprite.graphics.drawEllipse(2, 5, 12, 6);
                              break;
                         default:
                              mySprite.graphics.drawCircle(8, 9, 5);
                    uic.addChild(mySprite);
                    this.addChild(uic);
                    uic.toolTip = "Howdy there!";
          override protected function createChildren() : void
               super.createChildren();
          override protected function commitProperties() : void
               super.commitProperties();
          override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
               super.updateDisplayList(unscaledWidth, unscaledHeight);