Unfortunately this is on initial load and display. You may be on to something
in that I let it draw as I'm toggling forms so maybe it does think it's drawn
it already. It'll take me a while to think about how to set up the timing on
the invalidate(). Funny that I just recommended that to someone else today.

Thanks!

I have a cellRenderer that primarily attaches a graphic to the cell. As far as
that part goes it works well by creating a movieClip and then loading the
graphic (attachMovie) into that. Sometimes it seems to get confused and puts
the graphic too high in the cell but that's not a huge worry right now.

When there is no appropriate graphic I then create a textField within my
movieClip and set its text value to some descriptive text. When I first
display the dataGrid sometimes (frequently but not always) the text will not
show up. If I have enough rows in the grid to scroll the blank cells out of
view then back in the text will show.

Even if you can't help me fix this I'd appreciate any clues on where to start
looking. FWIW I'll attach my code.

class ShowStarsS extends mx.core.UIComponent {

private var image_mc:MovieClip;
var listOwner : MovieClip; // the reference we receive to the list
var sortVal:Number; // try passing this back for the sort function
// var getCellIndex : Function; // the function we receive from the list
var getDataLabel : Function; // the function we receive from the list
private var Stars:Number;

function ShowStarsS() {
this.createEmptyMovieClip("image_mc",_root.getNextHighestDepth());
}


function setValue(suggested:String,item:Object,selected:String):Void {
Stars = item[getDataLabel()];

if(Stars==undefined) {
this.image_mc.unloadMovie();
}
else {
switch (Stars) {
case "1":
case "2":
case "3":
case "4":
case "5":

this.image_mc.attachMovie("star"+Stars,"myStars",_root.getNextHighestDepth()
);
this.image_mc.myStars._xscale = 70;
this.image_mc._x = 0;
this.image_mc._y = 0;
// this.image_mc._y = -this.image_mc.myStars._height/2;
break;
case "11":
case "12":
case "13":
case "14":
case "15":

this.image_mc.attachMovie("star"+Stars,"myStars",_root.getNextHighestDepth()
);
this.image_mc.myStars._xscale = 70;
this.image_mc._x = 0;
this.image_mc._y = 0;
// this.image_mc._y = -this.image_mc.myStars._height/2;
break;
case "0":
case "6":
case "7":
case "8":
case "10":
case " ":
default:

this.image_mc.createTextField("Star_txt",_root.getNextHighestDepth(),0,0,thi
s.image_mc._width,this.image_mc._height);
with (this.image_mc.Star_txt) {
autoSize = true;
text = "";
multiline = true;
wordWrap = true;
_visible = true;
border = false;
}
switch (Stars) {
case "0":
case "10":
this.image_mc.Star_txt.text = "Data Lost";
break;
case "6":
case "7":
this.image_mc.Star_txt.text = "To be tested";
break;
case "8":
this.image_mc.Star_txt.text = "Not tested";
break;
case " ":
break;
default:
this.image_mc.Star_txt.text = "{" + item[getDataLabel()] + "}";
break;
}
this.image_mc._x = 0;
this.image_mc._y = -this.image_mc.Star_txt._height/2;
}
}
}

}

In the past I have found that this is due to the dataGrid not realizing it
has changed.

I have tried "[myGridInstance].invalidate()" after loading it with data to
get the cellrender to correct itself.

give that a try, let us know if it works.



--
Jim Fee
Viking Electronic Services
jfee (at) vikinges (dot) com


[quoted text, click to view]

A day later but I finally got to try this. After trying several things I added
the bit of code attached to the form containing the grid. I get the trace
message but don't even see the grid blink. The text still won't show up until
I scroll up and down.

I'm open to more suggestions. Am I missing some double secret handshake on
this?

on (reveal) {

function redRaw():Void {
clearInterval(intID);
_root.application.gridView.gCars.invalidate();
trace("invalid gCars now");
}
var intID:Number = setInterval(redRaw,2000);

}

Just a thought (and nothing more): use a custom event to update the grid.

I can't figure how that could help except to shorten the time I'm staring at
the already drawn grid before my event fires. Yep. The grid form is shown, I
can see the graphics in the grid and *sometimes* some of the text in the other
fields (don't have mixed cases presently) before I see the trace in the output
window. Thinking about this some I can see where it's possible the trace has
fired (doesn't feel like it though) but the text hasn't shown because it's
still doing something else. Guess I'll pepper a bunch of trace statements
through the thing to see what's going on and what's done. Of course that alone
will make things work.

Thanks for the response though and I'll consider this some more.

Nope. Nothing has worked it out for some reason. I'm now trying to use a
solution where I load html with the img tag using loaded graphics from my
loaded library. That's working great for text now but each time I try to tell
it to resize the graphics a little using width it just won't show them.
Debugging is a pain.

Did you try not doing anything in your class's function ShowStarsS() and
move it to a function createChildren()?

I find it is very important to have a function size() as well. It should
set the size of your text field (_x, _y, _width, _height).


Try this (it is totally of the top of my head), I just haven't gotten the
time to try it (watch out for word wrap):

class ShowStarsS extends mx.core.UIComponent
{
private var image_mc:MovieClip;
var owner:MovieClip;
var listOwner:MovieClip;
// the reference we receive to the list
var sortVal:Number;
// try passing this back for the sort function
var getCellIndex:Function;
// the function we receive from the list
var getDataLabel:Function;
// the function we receive from the list
private var Stars:Number;
function ShowStarsS()
{
}
function createChildren(Void):Void
{
this.createEmptyMovieClip("image_mc", _root.getNextHighestDepth());
}
function size(Void):Void
{
if (image_mc != undefined && image_mc != null) {
if (image_mc.Star_txt != undefined) {
//this is a text field
image_mc.Star_txt._width = __width-2;
if (owner != undefined && owner.__height != undefined) {
image_mc.Star_txt._height = owner.__height;
} else {
image_mc.Star_txt._height = this._parent._height;
}
} else {
// this is a graphic
image_mc.myStarts._xscale = 70;
}
image_mc._x = 0;
image_mc._y = 0;
}
}
function setValue(suggested:String, item:Object, selected:String):Void
{
if (item != undefined) {
Stars = item[getDataLabel()];
if (Stars == undefined) {
this.image_mc.unloadMovie();
} else {
image_mc._visible = true;
switch (Stars) {
case "1" :
case "2" :
case "3" :
case "4" :
case "5" :
this.image_mc.attachMovie("star"+Stars, "myStars",
_root.getNextHighestDepth());
this.image_mc.myStars._xscale = 70;
this.image_mc._x = 0;
this.image_mc._y = 0;
// this.image_mc._y = -this.image_mc.myStars._height/2;
break;
case "11" :
case "12" :
case "13" :
case "14" :
case "15" :
this.image_mc.attachMovie("star"+Stars, "myStars",
_root.getNextHighestDepth());
this.image_mc.myStars._xscale = 70;
this.image_mc._x = 0;
this.image_mc._y = 0;
// this.image_mc._y = -this.image_mc.myStars._height/2;
break;
case "0" :
case "6" :
case "7" :
case "8" :
case "10" :
case " " :
default :
this.image_mc.createTextField("Star_txt", _root.getNextHighestDepth(),
0, 0, __width-2, __height-2);
with (this.image_mc.Star_txt) {
autoSize = true;
text = "";
multiline = true;
wordWrap = true;
_visible = true;
border = false;
}
switch (Stars) {
case "0" :
case "10" :
this.image_mc.Star_txt.text = "Data Lost";
break;
case "6" :
case "7" :
this.image_mc.Star_txt.text = "To be tested";
break;
case "8" :
this.image_mc.Star_txt.text = "Not tested";
break;
case " " :
break;
default :
this.image_mc.Star_txt.text = "{"+item[getDataLabel()]+"}";
break;
}
this.image_mc._x = 0;
this.image_mc._y = -this.image_mc.Star_txt._height/2;
}
}
} else {
image_mc._visible = false;
}
}
function getPreferredHeight(Void):Number
{
return owner._height;
}
function getPreferredWidth(Void):Number
{
return __width-2;
}
}


--
Jim Fee
Viking Electronic Services
jfee (at) vikinges (dot) com

Been doing some reading on the subject:
"The setValue() method is executed every time the contents of a cell needs to
be rendered - which is when the user scrolls the list or rolls over or selects
a row".
Reading your post, this is exactly what happens.
Reading on:
"In addition to the setValue() method, you can also implement setSize(),
getPreferredHeight() and getPreferredWidth() methods, which are used to
position and constrain the loaded content within the DataGrid cell".
Seems to me Jim is on the right track.

Whew. I've got things working much better in large part by incorporating the
ideas you guys gave me. I'm not going to sign this one solved just yet though
as I still have an issue. When the text is drawn in the cells of the grid
instead of a graphic it's very hard to get that cell selected to click in it.
I'm once again attaching my code. Note that I cheated and hard coded a bunch
of sizes; I'll want to get back in and figure out where I should be getting
these sizes automatically later. The columns I'm applying this to are 70
pixels wide and the rows for this grid are set at 50 pixels high. My sets of
graphics are 100x18 and 100x46 pixels - you'll see the numbers. Somewhere
things are getting scaled to fit and I don't know where that's happening but at
this point I'm going to just run with it - the boss is getting cranky.

Thanks for all the help you folks have given me on this. I hope I can repay
you with some creative thinking in the future - let me know.

class ShowStarsS extends mx.core.UIComponent {

private var image_mc:MovieClip;
var listOwner : MovieClip; // the reference we receive to the list
var owner; // the row that contains this cell
var sortVal:Number; // try passing this back for the sort function
var getCellIndex:Function; // the function we receive from the list
var getDataLabel:Function; // the function we receive from the list
private var Stars; // used for item[getDataLabel];

function ShowStarsS() {
}

function createChildren():Void {
var c = image_mc =
this.createEmptyMovieClip("image_mc",_root.getNextHighestDepth());
}

function setSize( w:Number, h:Number ):Void {
var c = this.image_mc;
c._width = w-2;
c._height = h-2;
c._x = 1;
c._y = c._height/2;
}

function getPreferredHeight():Number {
return owner.__height - 4;
}

function setValue(suggested:String,item:Object,selected:String):Void {
Stars = item[getDataLabel()];

if(Stars==undefined) {
this.image_mc.unloadMovie();
}
else {
switch (Stars) {
case "1": case "2": case "3": case "4": case "5":

this.image_mc.attachMovie("star"+Stars,"myStars",_root.getNextHighestDepth()
,{_x:0, _y:-9});
this.image_mc._width = 68;
this.image_mc._height = 20;
this.image_mc.myStars._width = 100;
this.image_mc.myStars._height = 18;
break;
case "11": case "12": case "13": case "14": case "15":

this.image_mc.attachMovie("star"+Stars,"myStars",_root.getNextHighestDepth()
,{_x:0, _y:-23});
this.image_mc._width = 68;
this.image_mc._height = 46;
this.image_mc.myStars._width = 100;
this.image_mc.myStars._height = 46;
break;
case "0": case "6": case "7": case "8": case "10": case " ":
default:

this.image_mc.createTextField("myStars",_root.getNextHighestDepth(),0,0,68,4
6);
this.image_mc.myStars.multiline = this.image_mc.myStars.wordWrap = true;
this.image_mc.myStars._visible = this.image_mc.myStars.selectable = true;
this.image_mc.myStars._x = 0;
this.image_mc.myStars._y = -this.image_mc.myStars._height/2;
switch (Stars) {
case "0": case "10":
this.image_mc.myStars.text = newline+"Data Lost";
break;
case "6": case "7":
this.image_mc.myStars.text = newline+"To be tested";
break;
case "8":
this.image_mc.myStars.text = newline+"Not tested";
break;
case " ":
this.image_mc._visible = false;
break;
default:
this.image_mc.myStars.text = "{" + Stars + "}";
break;
}
this.image_mc._width = 68;
this.image_mc._height = 46;
}
}
}
}

Pat,

Well just made the text non-selectable within the cell and now the cell is easy
to select. Though there are some odd things going on in this that I'd like to
fix I'm gonna call it fixed.

Thanks again.
Maybe this whole script thing will help some other folks get their
cellRenderer programs going.