Datgrid and Item Renderer scrollling problem

Question

Hello,
I have a Datgrid containign item rendrer as follows :
<mx:DataGrid  width="800" id="gridSecondaire" styleName="dataGridStyle" verticalScrollPolicy="off" headerHeight="30" >
          <mx:columns>
               <mx:DataGridColumn rendererIsEditor="true" 
                                          editorDataField="result"
                                          itemRenderer="com.cdf.intra_cmmi.view.advancedTree.BodyDetailDocumentRenderer" />
          </mx:columns>
     </mx:DataGrid>
The problem is I when i scroll the datagrid the  rows do not stay in the same position how to solve this please ?

Answer 1

Here the item Renderer
===================ITEM RENDRER==========================
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" height="28" width="388" creationComplete="init(event)"  click="clickTexte(event);">
    <mx:Script>
    <![CDATA[
        [Embed(source="images/icon/tree_defaultLeafIcon.png")]
        public static const tree_defaultLeafIcon:Class;
        [Embed(source="images/icon/tree_pptLeafIcon.png")]
        public static const tree_pptLeafIcon:Class;
        [Embed(source="images/icon/tree_xlsLeafIcon.png")]
        public static const tree_xlsLeafIcon:Class;
        [Embed(source="images/icon/anglais.png")]
        private var anglaisIcon:Class;
        import com.sqli.intra_cmmi.constants.ConstantAssets;
        private function clickTexte(event:MouseEvent):void {
                var fileReference:FileReference = new FileReference();
                fileReference.download(new URLRequest(data.chemin_document));
        private function init(event:Event):void {
            import com.sqli.intra_cmmi.vo.DocumentVO;
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
                var nom_document:String =data.nom_document as String;
                var description_document:String = data.description_document as String;
                var language_document:String =data.language_document as String;
                var ext:String = data.ext as String;
                var type:String = data.type_document as String;
                var chemin_document:String = data.chemin_document as String;
                switch (type)
                        case "Modèle":
                            imageTypeDoc.source = ConstantAssets.modele;
                            break;
                        case "Guide":
                            imageTypeDoc.source = ConstantAssets.guide;
                            break;
                        case "Document":
                            imageTypeDoc.source = ConstantAssets.document;
                            break;
                        case "Outils":
                            imageTypeDoc.source = ConstantAssets.outils;
                            break;
                        case "Check-liste":
                            imageTypeDoc.source = ConstantAssets.checklist;
                            break;
                        default:
                            imageTypeDoc.source = ConstantAssets.document;
                nom.text=nom_document+' ('+ext+')';
                if(language_document!='1036'){
                    imageAnglais.source=anglaisIcon;
                if(description_document!=""){
                    imageDescription.source=anglaisIcon;
    ]]>
</mx:Script>
    <mx:Image id="imageTypeDoc" x="5" y="5" height="15" width="15"   />
    <mx:Text x="23" y="3" width="326" id="nom"/>
    <mx:Image x="351" y="5" height="15" width="15" id="imageAnglais"/>
    <mx:Image x="370" y="5" height="15" width="15" id="imageDescription"/>
</mx:Canvas>
======================Main.MXLM  (Blue Code part) ===============================
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
    width="830"  creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import com.sqli.intra_cmmi.services.MainService;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import com.sqli.intra_cmmi.controller.ProduitController;
            import com.sqli.intra_cmmi.services.VerticalMenuService;
            //import com.sqli.intra_cmmi.services.MainService;
            import com.sqli.intra_cmmi.vo.ProduitVO;
            import mx.controls.Alert;
            public var objectList : Array = new Array();
            public function init():void
                myProc.listeDomaineProcessus();
                if(VerticalMenuService.getInstance().produitVerticalMenu.getChildren().length > 0)
                    // On positionne l'accordion des produits sous l'accordion commun
                    VerticalMenuService.getInstance().produitVerticalMenu.y = VerticalMenuService.getInstance().verticalMenu.height - 49;
                    MainService.getInstance().lefter.addChild(VerticalMenuService.getInstance().produitVertic alMenu);
                var id:String;
                id=ProduitController.getInstance().currentProduitId;
                if(id!=null)
                    myProd.getProduitDescription(id);
                    myProd.getDocumentPrincipauxByProduit(id,1);
                    myProd.getDocumentSecondaireByProduit(id,0);
                    myProd.getRolesProduit(id);
                    myProd.getAjustementProduitByID(id);
            private function getDataListener_listeDomaineProcessus(event:ResultEvent):void
                //refPhase= new ArrayCollection();
                this.objectList = event.result as Array;
                // Peupler l'accordion
                ProduitController.getInstance().populateVerticalMenu(this.objectList);
            private function getDataListener_getDocumentSecondaireByProduit(event:ResultEvent):void
                var obje:Array = event.result as Array;
                if(obje.length>0)
                    gridSecondaire.dataProvider = event.result as Array;
                    gridSecondaire.rowHeight = 33;                   
                    gridSecondaire.height = obje.length*33+30;
                    var maximumHeight : int = 228;
                    if ( gridSecondaire.height > maximumHeight){
                      gridSecondaire.verticalScrollPolicy = "on";
                      gridSecondaire.height = maximumHeight;                   
                else
                    gridSecondaire.visible=false;
                    gridSecondaire.includeInLayout=false;
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                // Peupler l'accordion (rafraichissement lors du passage d'une rubrique à une autre)
                ProduitController.getInstance().populateVerticalMenu(this.objectList);
            private function getDataListener_getProduitDescription(event:ResultEvent):void{
                    description.title=ProduitVO(event.result).nom_produit;
                    idPanelDescription.htmlText=ProduitVO(event.result).description_produit;
            private function faultListener(event:FaultEvent):void {
                    Alert.show(event.fault.message, "Error");
        ]]>
    </mx:Script>
    <mx:VBox verticalGap="20"  horizontalCenter="0" top="10" bottom="10">       
    <mx:Panel width="800" height="121" id="description"  styleName="stylePanel"  >
        <mx:Label paddingLeft="5"  paddingRight="5" paddingTop="40"  width="100%" id="idPanelDescription"/>
    </mx:Panel>
   <mx:DataGrid  width="800" id="gridSecondaire" styleName="dataGridStyle" verticalScrollPolicy="off" headerHeight="30"  >
        <mx:columns>
            <mx:DataGridColumn rendererIsEditor="true"  editorDataField="result"
             itemRenderer="com.sqli.intra_cmmi.view.advancedTree.BodyDetailDocumentRenderer"
              headerText="Documents secondaires"/>
            <mx:DataGridColumn rendererIsEditor="true"  editorDataField="result" dataField="livrable_document" headerText="Livrables" width="100"/>    
        </mx:columns>
    </mx:DataGrid>
    </mx:VBox>
    <mx:RemoteObject id="myProc" destination="zend" source="ProcessusService" showBusyCursor="true" fault="faultListener(event)">
        <mx:method name="listeDomaineProcessus" result="getDataListener_listeDomaineProcessus(event);" />
    </mx:RemoteObject>
    <mx:RemoteObject id="myProd" destination="zend" source="ProduitsService" showBusyCursor="true" fault="faultListener(event)">
        <mx:method name="getRolesProduit" result="getDataListener_getRolesProduit(event);" />
        <mx:method name="getDocumentPrincipauxByProduit" result="getDataListener_getDocumentPrincipauxByProduit(event);" />
        <mx:method name="getDocumentSecondaireByProduit" result="getDataListener_getDocumentSecondaireByProduit(event);" />
        <mx:method name="getAjustementProduitByID" result="getDataListener_getAjustementProduit(event);" />
        <mx:method name="getProduitDescription" result="getDataListener_getProduitDescription(event);" />
    </mx:RemoteObject>
</mx:Canvas>