10 Replies Latest reply on Feb 9, 2011 7:04 AM by asifdegr8

    Item Rendering component

    asifdegr8 Level 1

      In my datagrid I used Inline item rendering to create text link. code is given

       

      <mx:DataGridColumn headerText="Nomenclature">

                  <mx:itemRenderer>

                       <mx:Component>

                            <mx:Label htmlText="&lt;u&gt;{data.NOMENCLATURE}&lt;/u&gt;" color="blue" click="newBrowserWindow(data.CALL_URL);" >

                            <mx:Script>

                            <![CDATA[

                                 private function newBrowserWindow(url:String):void{

                                    var urlRequest:URLRequest = new URLRequest(url);

                                    navigateToURL(urlRequest,"_blank");

                                 }

                            ]]>

                            </mx:Script>

                            </mx:Label>           

                       </mx:Component>           

                  </mx:itemRenderer>

      </mx:DataGridColumn>

       

      I have to replicate this functionality in multiple datagrids in  multiple applications, I am trying to create component for it and use that component in datagrid column. How can i do this?

        • 1. Re: Item Rendering component
          Flex harUI Adobe Employee

          Copy everything inside the mx:Component tag to a new MXML file.

          • 2. Re: Item Rendering component
            Kumar Pratik Level 1

            You can create a component for this which would look something like this:

            <mx:Canvas>

            <mx:Script>

                                  <![CDATA[

                                       private function newBrowserWindow(url:String):void{

                                          var urlRequest:URLRequest = new URLRequest(url);

                                          navigateToURL(urlRequest,"_blank");

                                       }

                                  ]]>

                                  </mx:Script>

            <mx:Label  htmlText="&lt;u&gt;{data.NOMENCLATURE}&lt;/u&gt;"  color="blue" click="newBrowserWindow(data.CALL_URL);" >

            </mx:Label>

            </mx:Canvas>

             

            and then you can call this component inside your datagrid column, somethig like this:

            <mx:datagridcolumn headertext = "TEXt" itemrenderer = "<name of component created?>/>

             

            Cheers,

            Pratik

            • 3. Re: Item Rendering component
              asifdegr8 Level 1

              I have done the same but that didn't work. because i don't know how to pass data.NOMENCLATURE and data.CALL_URL to component from main mxml file?

               

              <mx:DataGridColumn headerText="Nomenclature" itemRenderer="components.LinkRenderer">

              • 4. Re: Item Rendering component
                Flex harUI Adobe Employee

                If you have a file called component.mxml, then itemRenderer="component"

                1 person found this helpful
                • 5. Re: Item Rendering component
                  asifdegr8 Level 1

                  I have achieved this. but my issue is

                   

                  if someother datagrid has field data.EMPLOYEE_NAME instead of data.NOMENCLATURE, then how can i achive this. the component should be reuseable for any other datagrid having different field names.

                  • 6. Re: Item Rendering component
                    Abhrodip Paul-cXMMf1 Level 2

                    You have to override the data setter method.

                     

                    Please refer the below link.

                     

                    http://cookbooks.adobe.com/post_Reusable_date_item_renderer-12757.html

                    1 person found this helpful
                    • 7. Re: Item Rendering component
                      asifdegr8 Level 1

                      Can u please mention or give me code for set data method. I am unable to understand in given link.

                      • 8. Re: Item Rendering component
                        Abhrodip Paul-cXMMf1 Level 2

                        "

                        I have achieved this. but my issue is

                         

                        if someother datagrid has field data.EMPLOYEE_NAME instead of data.NOMENCLATURE, then how can i achive this. the component should be reuseable for any other datagrid having different field names.

                        "

                         

                        <mx:DataGridColumn headerText="Nomenclature">

                                    <mx:itemRenderer>

                                         <mx:Component>

                                              <mx:Label  >

                                              <mx:Script>

                                              <![CDATA[

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

                                                       super.data = value;
                                                        if (value.hasOwnProperty("NOMENCLATURE"))
                                                       {
                                                           // your code here like add click listener.
                                                       }

                                                      else if (value.hasOwnProperty("EMPLOYEE_NAME"))

                                                      {

                                                               // your code here like showing the employee name etc

                                                      }

                                                   }

                                              ]]>

                                              </mx:Script>

                                              </mx:Label>          

                                         </mx:Component>          

                                    </mx:itemRenderer>

                        </mx:DataGridColumn>

                         


                        Is this what you required ?

                        • 9. Re: Item Rendering component
                          Flex harUI Adobe Employee

                          Add implements="mx.controls.listClasses.IDropInListItemRenderer"

                           

                          And use:

                           

                              DataGrid(owner).columns[listData.columnIndex].dataField

                           

                          You may have to move that code to commitProperties for owner to be valid.

                          • 10. Re: Item Rendering component
                            asifdegr8 Level 1

                            perhaps you misunderstand what i want. Actually NOMENCLATURE, EMPLOYEE_NAME are fields of data provider on which we have to create text link and call the url CALL_URL(another filed of data provider). e,g if NOMENCLATURE=GOOGLE, CALL_URL="http://www.google.com", then text link should appear like this in data grid

                             

                            GOOGLE  (its blue color underlined text)

                             

                            when i click this link it will open the page http://www.google.com

                             

                            - Now what i want is that the data provider field name can by any thing. It may be NOMENCLATURE, may be EMPLOYEE_NAME, may be COUNTRY_NAME. It can be any thing, I have to create link on it, and link field name can also be any thing, it can be CALL_URL, it can simply be URL etc. I like to make it more dynamic in my component