Custom Cell in DataGrid (CellRenderer)

programming flash
1

Hi, I’m trying to make a custom cell for my datagrid, here is the code for my custom cell renderer…

import fl.controls.listClasses.CellRenderer;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.utils.getDefinitionByName;
import flash.display.MovieClip;

class MyRenderer extends CellRenderer {
    public var customProperty:String="foo";
    public var myl;

    public function MyRenderer() {
        myl=new cellLoader  ;
        myl.y=myl.x=5;
        this.addChild(myl);
        var originalStyles:Object=CellRenderer.getStyleDefinition();
        var la:cellLoaderAA=new cellLoaderAA;
        setStyle("upSkin",la);
        setStyle("downSkin",la);
        setStyle("overSkin",la);
        setStyle("selectedUpSkin",la);
        setStyle("selectedOverSkin",la);
        setStyle("selectedDownSkin",la);

        

    }
}

Now I think there might be a better way to do this. cellLoaderAA is just an empty MC to clear our the cell border and background.

this.addChild(myl);

is where I attach this custom movie called “cellLoader”.

Here is the cellLoader class:

package {
    import flash.display.MovieClip;
    import flash.events.MouseEvent;
    import flash.text.TextField;
    import flash.events.Event;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFormat;
    public class cellLoader extends MovieClip {

        public function cellLoader() {
            trace("ball created: " + this.name);
            setText("Queued for upload");
            //this.addEventListener(Event.ADDED_TO_STAGE , nowAdded);
        }
        public function setText(x:String) {
            gotoAndStop("just_text");
            this.main_txt.text = x;
            this.load_bar.visible = false;
        }
        public function setbarwidth(x:Number) {
            this.load_bar.visible = true;
            this.load_bar.width = x;
            this.main_txt.text = "";
            this.gotoAndStop("loading");
        }
        private function getPropertiesString():String {
            var str:String = ""
                            + "currentFrame: " + currentFrame + "
"
                            + "currentLabel: " + currentLabel + "
"
                            + "currentScene: " + currentScene + "
"
                            + "framesLoaded: " + framesLoaded + "
"
                            + "totalFrames: " + totalFrames + "
"
                            + "trackAsMenu: " + trackAsMenu + "
";
            return str;
        }
    }
}

And finally here is how I am attaching this custom cell renderer to my datagrid column

files_dg.getColumnAt(1).cellRenderer=MyRenderer;

So I am having quite a few problems - and I think it is because I am doing this all wrong. I would like to do something much more like AS2 cellRenderer API, where the entire cell renderer is changed, not just adding styles etc. As it is now, it seems really hacky and dirty. I have to hide the label, and everything is just a mess. This cell renderer and the loading of the cellLoader MovieClip are very delayed and as I am trying to access things in these children they don’t even exist.

Namely, when I try to access the cellRenderer with the below code right after setting the columns cell renderer, nothing happens because the movieclip constructor hasn’t run yet.

var myCellRenderer:MyRenderer = files_dg.getCellRendererAt(r,c) as MyRenderer;
myCellRenderer.myl.setbarwidth(1);

So does anyone know how to make the movieclips contstructor run right after apply the cellRenderer, or does anyone have a better way to do this entirely?

Quick run down of what I am doing: Want to have a datagrid that shows the status of files as I am uploading them. This means having a progress bar, as well as messages for pending, etc, that I can customize for different states.

thanks