2 Replies Latest reply on Nov 8, 2011 11:06 PM by Kumar Pratik

    How to access item renderer from main mxml?

    Kumar Pratik Level 1

      Hi,

       

      I have a datagrid which has item renderer. Code looks like this:

       

      <mx:DataGrid id="newsfeedgrid" width="100%" height="100%" visible="true" verticalScrollPolicy="auto"

                                    verticalGridLines="false" horizontalGridLines="true" horizontalGridLineColor="#E5F0F3" showHeaders="false"

                                    rowHeight="70" wordWrap="true" resizableColumns="false">

                                    <mx:columns>

                                              <mx:DataGridColumn headerText="Image Name" dataField="imgname" width="100">

                                              <mx:itemRenderer>

                                                        <mx:Component>

       

                                                                  <mx:VBox height="100%" width="100%">

                                                                  <!--          <mx:Image source="{data.imgname}" height="100%" width="100%"/>-->

                                                                  <local:SmoothImage source="{'http://localhost/musicbook/attachdoc/'+data.imgname}" height="100%" width="100%"/>

                                                                            <mx:Text text="{data.fname+' '+data.lname}" fontSize="10" fontWeight="bold" fontFamily="Verdana" color="#3D3636"/>

                                                                  </mx:VBox>

       

                                                        </mx:Component>

                                              </mx:itemRenderer>

                                              </mx:DataGridColumn>

                                              <mx:DataGridColumn headerText="Messages" dataField="mymsg" wordWrap="true" resizable="true"

                                                        >

                                                        <mx:itemRenderer>

                                                                  <mx:Component>

       

       

                                                                            <mx:VBox verticalScrollPolicy="off" creationComplete="lbl_initialize()">

                                                                                      <!--<mx:HBox width="100%">

                                                                                                <mx:Text text="{data.uname}" width="100%" color="BLUE" fontSize="10" fontWeight="bold"

                                                                                                useHandCursor="true" buttonMode="true" mouseChildren="false"

                                                                                                click="this.outerDocument.userPage('msgFromC onnGrid')"/>

                                                                                                <mx:Text text="{data.actmsg}" width="100%" fontSize="10" fontWeight="bold"

                                                                                                />

                                                                                                <mx:Text text="{data.secuname}" width="100%" color="BLUE" fontSize="10" fontWeight="bold"

                                                                                                useHandCursor="true" buttonMode="true" mouseChildren="false"

                                                                                                click="this.outerDocument.userPage('msgFromC onnGrid')"/>

                                                                                      </mx:HBox>-->

       

                                                                                      <mx:Text id="lbl" width="100%"

                                                                              selectable="true"

                                                                             

                                                                              link="lbl_link(event);" />

       

                                                                                      <!--<mx:ControlBar id="cbar">-->

                                                                                      <mx:Spacer height="50%"/>

                                                                                      <mx:HBox width="100%">

       

                                                                                      <mx:Text text="{data.datetime}" fontSize="7" color="#8B9698"/>

       

                                                                            </mx:HBox>

                                                                             <mx:Script>

                                                                          <![CDATA[

                                                                              import mx.controls.Alert;

                                                                             

                                                                                      public var tempsecuname:String;

       

                                                                              private function lbl_initialize():void {

                                                                                        /* if(lbl.text=="Pratik is good")

                                                                                        {

                                                                                                  lbl.htmlText="<a href='event:flex.org'>Good</a> is Pratik";

                                                                                        } */

                                                                                 //lbl.htmlText = "For more information on Flex, see <u><a href='event:flex.org'>http://www.flex.org/</a></u>.";

                                                                                  if(data.secuname==null)

                                                                                  {

                                                                                            tempsecuname = "";

                                                                                  }

                                                                                  else

                                                                                  {

                                                                                            tempsecuname=data.secuname;

                                                                                  }

                                                                                 

                                                                                 lbl.htmlText="<a href='event:flex.org'><font color='#2112EF'><b>"+data.uname+"</b></font></a>"+data.actmsg+"<a href='event:flex.org'><font color='#2112EF'><b>"+tempsecuname+"</b></font></a>";            

                                                                              }

                                                                              private function lbl_link(evt:TextEvent):void {

                                                                                  Alert.show(evt.toString(), evt.text);

       

                                                                                  switch (evt.text) {

                                                                                      case "flex.org":

                                                                                          // You clicked the flex.org link.

                                                                                          break;

                                                                                  }

                                                                              }

                                                                          ]]>

                                                                      </mx:Script>

                                                                            </mx:VBox>

       

                                                                  </mx:Component>

                                                        </mx:itemRenderer>

                                              </mx:DataGridColumn>

                                    </mx:columns>

                                              </mx:DataGrid>

       

      Problem currently is since lbl_initialize() function is called on creationComplete of Vbox, output displayed is not expected and when ever i navigate to grid page output gets changed and it is not proper.

       

      I wanted to use text ,lbl, in my main.mxml so that i can assign the value when i am setting data provider.

       

      Please help!!!

        • 1. Re: How to access item renderer from main mxml?
          saisri2k2 Level 4

          I think renderers work proprely if you override set data, instead of listening for the creationcomplete override set data.

          1 person found this helpful
          • 2. Re: How to access item renderer from main mxml?
            Kumar Pratik Level 1

            Thanks for your reply.. overriding set data in fact is a better approach and my half problem is solved but i am still facing some issues. Please find my code below:

             

            <mx:DataGridColumn headerText="Messages" dataField="mymsg" wordWrap="true" resizable="true"

                                                              >

                                                              <mx:itemRenderer>

                                                                        <mx:Component>

             

             

                                                                                  <mx:VBox verticalScrollPolicy="off" >

             

                                                                                            <mx:Text id="lbl" width="100%"

                                                                                    selectable="true"

                                                                                    link="lbl_link(event);" />

             

                                                                                            <!--<mx:ControlBar id="cbar">-->

                                                                                            <mx:Spacer height="50%"/>

                                                                                            <mx:HBox width="100%">

             

                                                                                            <mx:Text text="{data.datetime}" fontSize="7" color="#8B9698"/>

             

                                                                                  </mx:HBox>

                                                                                   <mx:Script>

                                                                                <![CDATA[

                                                                                          import mx.core.Application;

                                                                               

                                                                                    import mx.controls.Alert;

                                                                                   

                                                                                            public var tempsecuname:String;

                                                                                            public var tempmsg:String="";

                                                                                  

                                                                                           override public function set data( value:Object ) : void {

                                                                super.data = value;

                                     

                                                                                       lbl.htmlText="<a href='event:data.uname'><font color='#2112EF'><b>"+data.uname+"</b></font></a>"+tempmsg;

                                                                                    

                                                                                       if(data.datetime>Application.application.lastlogout)

                                                                                       {

                                                                                                 Alert.show(Application.application.lastlogout);

                                                                                                 lbl.setStyle("fontWeight","bold");

                                                                                       }

                                      }

             

                                                                                    private function lbl_link(evt:TextEvent):void {

                                                               

             

                                                                                    }

                                                                                ]]>

                                                                            </mx:Script>

                                                                                  </mx:VBox>

             

                                                                        </mx:Component>

                                                              </mx:itemRenderer>

                                                    </mx:DataGridColumn>

             

             

            Now my text is coming properly with link like how i wanted. I have added here another functionality where I am checking the last logouttime of user and the msg time and if msgtime is greater than last logout time then i am showing it in bold.

             

            override public function set data( value:Object ) : void {

                                            super.data = value;

                                     

                            lbl.htmlText="<a href='event:data.uname'><font color='#2112EF'><b>"+data.uname+"</b></font></a>"+tempmsg;

                         

                            if(data.datetime>Application.application.lastlogout)

                            {

                            Alert.show(Application.application.lastlogout);

                            lbl.setStyle("fontWeight","bold");

                            }

                                      }

             

            First time is shows properly but if i scroll then some random row is also appearing in bold, also when ever this set data function is getting called some random rows are coming in bold.

             

            Please let me know your input