DataGrid CellRenderer Oddities

[Metallikiller]

Hi all,

I've been working on creating a icon/graphic/movieclip that renders within a given cells column. It's functionality is to handle context menus of datagrid, insertion of row, deletion of rows , etc... And to top it off it works fine until, Insert enough rows where scrolling of the datagrid becomes enabled. Then all goes awry. The cells don't render the proper information and everything has repeating data within all rows and columns, until I scroll with the arrow buttons. then the data refreshes properly. If scrolling with the draggable scroll bar everything flips out. Any IDeAs?
////////////////////////////////////////////////////////////////
/////////////////////Code in FLA://///////////////////////////
///////////////////////////////////////////////////////////////
var ChoreDataProvider:Array = new Array ({Row:"", Narrative:"Choreography words will go here let's add some words here as of right now.", ID:random (10000000000)}, {Row:"", Narrative:"More choreography words will go in the section now.", ID:random (10000000000)}, {Row:"", Narrative:"hello world will go in here let's do it.", ID:random (10000000000)});
this.createClassObject (mx.controls.DataGrid, "Choreo_Grid", 1, {_width: Stage.width, _height: Stage.height});
Choreo_Grid.dataProvider = ChoreDataProvider;
Choreo_Grid.getColumnAt (0).cellRenderer = "RowEditorCell";
Choreo_Grid.getColumnAt (0).width = 40;
Choreo_Grid.getColumnAt (1).cellRenderer = "EditibleCell";
Choreo_Grid.getColumnAt (1).width = 840;
var InsRowAbvLstn:Object=new Object();
InsRowAbvLstn.onInsertRowAbove=function()
{

trace('Custom event I dispatch in CellRenderer it in the FlA');

}

Choreo_Grid.addEventListener("onInsertRowAbove", InsRowAbvLstn);

///////////////////////////////////////////////////////////////////////////////
//////////////////CELL RENDERER CODE //////////////////////////////////////

// ActionScript 2.0 class.
//import mx.utils.Delegate;

import mx.controls.Label;
import mx.events.EventDispatcher;
import mx.utils.Delegate;
class lib.cellrendering.RowEditorCell extends mx.core.UIComponent
{

// builtin methods of the list class which are inherited?
var getCellIndex:Function;
var getDataLabel:Function;

// the datagrid that in which out editable text cell is locateds
private var __dg;
// The label to be used for text.
private var owner;
// The row that contains this cell.
private var listOwner;
// Movie Clip to acknowledge row number
// and give the ability edit a given row.
var __RowEditorMC:MovieClip;
// text field on the movie clip
var __rowLabelTxt:mx.controls.Label;
private var __rowEditorCtxMenu:ContextMenu;
private var __dfltCtxtMenu:ContextMenu
private var __cellIndex:Number;
private var __columnLabel:String;
public function RowEditorCell ()
{
this.insertRowAbove=Delegate.create(this, onInsertRowAbove);
this.deleteRow=Delegate.create(this, onDeleteRow);
__rowEditorCtxMenu = new ContextMenu();
__dfltCtxtMenu = new ContextMenu();
}

public function createChildren ():Void
{
__RowEditorMC=this.attachMovie("RowEditorMC", "__RowEditorMC", 1);
__RowEditorMC.useHandCursor=false;
this.createClassObject(Label, "__rowLabelTxt", 2);
//this.__dg = _parent._parent._parent;
__RowEditorMC.onRollOver=Delegate.create(this, initCustomContTxt);
__RowEditorMC.onRollOut=Delegate.create(this, restoreDfltContTxtMenu);
__rowLabelTxt.move(6,0);

}

/*
* Initializes a context me
* for editing cell contents.
* Adding rows, above and
* below current rows.
*/
private function initCustomContTxt():Void
{

__rowEditorCtxMenu.customItems.push(new ContextMenuItem("Insert Row Above", insertRowAbove));
__rowEditorCtxMenu.customItems.push(new ContextMenuItem("Insert Row Below", insertRowBelow));
__rowEditorCtxMenu.customItems.push(new ContextMenuItem("Delete Row", deleteRow));
__rowEditorCtxMenu.hideBuiltInItems();
_level0.menu=__rowEditorCtxMenu;
}

/*
* Initializes a context menu
* for editing cell contents.
* Adding rows, above and
* below current rows.
*/
private function restoreDfltContTxtMenu():Void
{

_level0.menu=__dfltCtxtMenu;

}


/*
* inserts row above current row
* a data grid row
*/
private function insertRowAbove(evtObj:Object, item:ContextMenuItem):Void
{
}

private function onInsertRowAbove()
{

//trace("on insert is called cell index : " + this.__cellIndex + " owner: " + owner);
//this.__dg.dataProvider.addItemAt(this.__cellIndex-1, {label : "New Item added " + this.__cellIndex+1});
if(this.__cellIndex>=0 && this.__cellIndex !=undefined)
{
var curRowItem=this.__dg.dataProvider.getItemAt(this._ _cellIndex)
var nar:String=curRowItem.Narrative;
var col_1Edit=curRowItem.Row;
var colID=curRowItem.ID;

this.__dg.replaceItemAt(this.__cellIndex, {Row: "", Narrative : "New Item added " + this.__dg.length, ID:random(10000000000)})

this.__dg.addItemAt(this.__cellIndex+1, curRowItem);

///////////////HACK the thing won't refresh until i set the cell renderer to itself?
this.__dg.getColumnAt (0).cellRenderer = this.__dg.getColumnAt (0).cellRenderer ;
this.__dg.getColumnAt (1).cellRenderer = this.__dg.getColumnAt (1).cellRenderer ;
this.__dg.dataProvider=this.__dg.dataProvider;
this.__dg.dispatchEvent ({type:"onInsertRowAbove", target:this.__dg});
}

}

/*
* inserts row below current row
* a data grid row
*/
function insertRowBelow(evtObj:Object, item:ContextMenuItem):Void
{
//trace("Split row above called selected: "+ item.caption + " TextFld contents: " + evtObj.text + " Caret idx: " +Selection.getCaretIndex());
//Selection.setSelection( Selection.getCaretIndex(), 0 );
//var dg=evtObj._parent.__dg;
//dg.dispatchEvent ({type:"onSplitRowAbove", target:dg});

}

/*
* Deletes the current row right clicked
* a data grid rowc
*

*/
function deleteRow(evtObj:Object, item:ContextMenuItem):Void
{
}
function onDeleteRow(evtObj:Object, item:ContextMenuItem):Void
{
this.__dg.dataProvider.removeItemAt(this.__cellInd ex);
}

public function size ():Void
{
__RowEditorMC._width = __width;
__RowEditorMC._height = __height;
}

// Provides the preferred height of the cell. Inherited method.
public function getPreferredHeight ():Number
{
__height=__RowEditorMC._height;
return __height;
}
// Provides the preferred height of the cell. Inherited method.
public function getPreferredWidth ():Number
{
__height=__RowEditorMC._width;
return __width;
}

// Called by the owner to set the value in the cell. Inherited method.
public function setValue (suggestedValue:String, item:Object, selected:Boolean):Void
{

var idxObj:Object= getCellIndex();
if (item == undefined)
{
__RowEditorMC._visible=false;
__rowLabelTxt.visible=false;
}

if (item != undefined)
{

__cellIndex=idxObj.itemIndex;
__columnLabel=getDataLabel();
__dg =listOwner;
__rowLabelTxt.text = __cellIndex.toString();
}

}
}

[mojito]

Are you using a cell renderer custom class ? There seems to be an issue of refreshing the data, im trying to do a similar thing.