actionscript 3 - itemRenderer is getting changed in the rows of a MX datagrid when scrolling -

i having bad time itemrenderer. have mx datagrid using show data collecting http service. wanted show data "preview" in first column , adding itemrenderer datagridcolum.itemrenderer property. here works fine.

<mx:datagrid id="labelsgrid" width="100%" height="100%" visible="false"   variablerowheight="true" sortablecolumns="false">     <mx:columns>         <mx:datagridcolumn headertext="preview" datafield="recordid"          width="{ preview_column_width }" itemrenderer="us.lbs.itemrenderers.preview"/>          <mx:datagridcolumn headertext="design id" datafield="label_id" />          <mx:datagridcolumn headertext="font size" datafield="label_minheight"/>          <mx:datagridcolumn headertext="width" datafield="label_width"/>          <mx:datagridcolumn headertext="height" datafield="label_height"/>          <mx:datagridcolumn headertext="label p/n" datafield="label_pn"/>           <mx:datagridcolumn headertext="font type" datafield="label_fonttype"/>          <mx:datagridcolumn headertext="qty" datafield="label_qty"/>     </mx:columns> </mx:datagrid> 

and here code itemrenderer

<?xml version="1.0" encoding="utf-8"?> <mx:hbox xmlns:fx="http://ns.adobe.com/mxml/2009"       xmlns:s="library://ns.adobe.com/flex/spark"       xmlns:mx="library://ns.adobe.com/flex/mx"      width="100%" height="100%"      horizontalalign="center" verticalalign="middle" creationcomplete="init( )"> <fx:style>      @namespace mx "library://ns.adobe.com/flex/mx";     @namespace s "library://ns.adobe.com/flex/spark"; </fx:style> <fx:script>     <![cdata[         import aw.utils.stringutils;          import flashx.textlayout.edit.selectionformat;         import flashx.textlayout.formats.textlayoutformat;          import mx.binding.utils.bindingutils;         import mx.binding.utils.changewatcher;         import mx.controls.alert;         import mx.events.closeevent;         import mx.events.flexevent;         import mx.events.moduleevent;         import mx.geom.roundedrectangle;         import mx.managers.popupmanager;         import mx.messaging.messages.imessage;         import mx.rpc.events.faultevent;         import mx.rpc.events.resultevent;         import mx.utils.colorutil;         import mx.utils.objectutil;         import mx.utils.stringutil;          import spark.components.application;          import us.lbs.viewer;                    public var dad:viewer = null;                   public var zoom:int = 2;                    public var px_in:number = 96;                   public var pt_px:number = 1.333333333333333;          [bindable]public var var_width:number = 0;         [bindable]public var var_height:number = 0;         [bindable]public var var_font_size:number = 12;         [bindable]public var tmp_lines:string = "";          public function init( ):void {             settingdad( ); setsize( ); setfontsize( ); fixlines( );         }          protected function settingdad():void {             dad = this.parentdocument viewer;             if ( typeof( dad.previewers[ data.label_id ] ) != 'object' ) {                 dad.previewers[ data.label_id ] = {};                 dad.previewers[ data.label_id ].preview = this;                  /*alert.show(                      this.data.label_id + "\n" +                      "type: " + typeof( dad.previewers[ data.label_id ].preview ),                      this.data.rm_pn                 );*/             }         }          protected function setfontsize( ):void {             var_font_size = data.label_minheight * pt_px * zoom;             var_font_size = math.round( var_font_size );         }          protected function setsize( ):void {             var_width  = number( data.label_width ) * px_in * zoom;             var_height = number( data.label_height ) * px_in * zoom;              dad.labelsgrid.visible = true;             dad.preview_column_width = ( var_width > dad.preview_column_width ) ? var_width:dad.preview_column_width;         }          protected function fixlines( ):void {             tmp_lines = ""; var lines:array = string( data.lines ).split( "//" );             each ( var line:string in lines ) {                 tmp_lines += stringutils.trim( line ) + "\n";             } tmp_lines = stringutils.trim( tmp_lines );         }      ]]> </fx:script> <s:hgroup >     <s:richeditabletext         id="previewtxt"          backgroundcolor="white"         text="{ tmp_lines }"          selectionhighlighting="always" editable="false" selectable="true"         width="{ var_width }" height="{ var_height }"          kerning="on"         fontsize="{ var_font_size }" fontfamily="{ data.label_fonttype }"         paddingtop="0" paddingbottom="0" paddingleft="0" paddingright="0"         textalign="center" verticalalign="middle" focusedtextselectioncolor="0xa8c6ee"         selectionchange="dad.previewtxtselectionchange(event)" />    </s:hgroup> 

the code shared above generating ( ):

so, issue here when scroll down datagrid, getting previews changed, this:

the value has changed first column, before scrolling.

why happening this? sorry if haven't written enough details, think enough... ask me if more details needed.

thanks in advance!

renderization uses buffer, must link directly property , change.

try this:

link text property fixlines method, follow

in <s:richeditabletext> put in property text this:

text = "{fixlines(data)}" 

change method follow:

protected function fixlines(obj:object):string {     if (obj == null) return "";     var currtext = "";     var lines:array = string( obj.lines).split( "//" );     each ( var line:string in lines ) {         currtext += stringutils.trim( line ) + "\n";     }     currtext = stringutils.trim( tmp_lines );     return currtext; } 

in init method, call fixlines, change follow:

public function init( ):void {     settingdad( ); setsize( ); setfontsize( ); fixlines(data); } 

tell me if it's ok