5 Replies Latest reply on Mar 12, 2008 4:38 AM by Pratap Reddy

    How to write Itemrenderer Code using ActionScript?

    Pratap Reddy
      Hi ,

      any idea how to write following code using ActionScript??

      <mx:itemRenderer>
      <mx:Component>
      <mx:TextInput text="Something" />
      </mx:Component>
      </mx:itemRenderer>

      Thanks in Advance....Pratap
        • 1. Re: How to write Itemrenderer Code using ActionScript?
          Gregory Lafrance Level 6
          ----------------------- AS component -------------------------
          package myComponents {

          // myComponents/CellField.as
          import mx.controls.*;
          import mx.core.*;
          import mx.controls.dataGridClasses.DataGridListData;

          public class CellField extends TextInput
          {
          // Define the constructor and set properties.
          public function CellField() {
          super();
          height=60;
          width=80;
          setStyle("borderStyle", "none");
          editable=false;
          }

          // Override the set method for the data property.
          override public function set data(value:Object):void {
          super.data = value;

          if (value != null)
          {
          text = value[DataGridListData(listData).dataField];
          if(Number(text) > 100)
          {
          setStyle("backgroundColor", 0xFF0000);
          }
          }

          super.invalidateDisplayList();
          }
          }
          }

          -------------------------- MXML --------------------------------
          <?xml version="1.0" encoding="iso-8859-1"?>
          <!-- itemRenderers\asRenderer\MainASItemRenderer.mxml -->

          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
          width="600" height="600">

          <mx:Script>
          <![CDATA[
          import mx.collections.ArrayCollection;

          [Bindable]
          private var initDG:ArrayCollection = new ArrayCollection([
          {Monday: 12, Tuesday: 22, Wednesday: 452, Thursday: 90},
          {Monday: 258, Tuesday: 22, Wednesday: 45, Thursday: 46},
          {Monday: 4, Tuesday: 123, Wednesday: 50, Thursday: 95},
          {Monday: 12, Tuesday: 52, Wednesday: 111, Thursday: 20},
          {Monday: 22, Tuesday: 78, Wednesday: 4, Thursday: 51}
          ]);
          ]]>
          </mx:Script>

          <mx:Text text="All cells over 100 are red" />

          <mx:DataGrid id="myDataGrid"
          dataProvider="{initDG}"
          variableRowHeight="true">
          <mx:columns>
          <mx:DataGridColumn dataField="Monday"
          itemRenderer="myComponents.CellField" />
          <mx:DataGridColumn dataField="Tuesday"
          itemRenderer="myComponents.CellField" />
          <mx:DataGridColumn dataField="Wednesday"
          itemRenderer="myComponents.CellField" />
          <mx:DataGridColumn dataField="Thursday"
          itemRenderer="myComponents.CellField" />
          </mx:columns>
          </mx:DataGrid>
          </mx:Application>

          • 2. Re: How to write Itemrenderer Code using ActionScript?
            Pratap Reddy Level 1
            Hi Greg,
            I dont wanna create another component to do so.
            Just i wan to write the code in that MXML only.. but using ACTIONSCRIPT.
            looking for following code....

            <mx:itemRenderer>
            <mx:Component>
            <mx:TextInput text="Something" />
            </mx:Component>
            </mx:itemRenderer>

            to write as it is in action script...
            any idea how to write it??
            • 3. Re: How to write Itemrenderer Code using ActionScript?
              Gregory Lafrance Level 6
              This code should get you started:

              <?xml version="1.0" encoding="iso-8859-1"?>
              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">
              <mx:Script>
              <![CDATA[
              import mx.controls.TextInput;
              import mx.collections.ArrayCollection;
              import mx.core.ClassFactory;

              [Bindable]
              private var initDG:ArrayCollection = new ArrayCollection([
              {Monday: 12, Tuesday: 22, Wednesday: 452, Thursday: 90},
              {Monday: 258, Tuesday: 22, Wednesday: 45, Thursday: 46},
              {Monday: 4, Tuesday: 123, Wednesday: 50, Thursday: 95},
              {Monday: 12, Tuesday: 52, Wednesday: 111, Thursday: 20},
              {Monday: 22, Tuesday: 78, Wednesday: 4, Thursday: 51}
              ]);

              public function createRenderer():ClassFactory {
              var renderer:ClassFactory = new ClassFactory(mx.controls.TextInput);
              return renderer;
              }
              ]]>
              </mx:Script>

              <mx:DataGrid id="myDataGrid" dataProvider="{initDG}" variableRowHeight="true">
              <mx:columns>
              <mx:DataGridColumn dataField="Monday"
              itemRenderer="{createRenderer()}" />
              <mx:DataGridColumn dataField="Tuesday"
              itemRenderer="{createRenderer()}" />
              <mx:DataGridColumn dataField="Wednesday"
              itemRenderer="{createRenderer()}" />
              <mx:DataGridColumn dataField="Thursday"
              itemRenderer="{createRenderer()}" />
              </mx:columns>
              </mx:DataGrid>
              </mx:Application>
              • 4. Re: How to write Itemrenderer Code using ActionScript?
                Garyl Woolworth Level 1
                I just wrote an example for someone else on essentially the same thing except for a list. The link to that post is as follows.

                http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?catid=585&threadid=1344455#48 86622

                Hope that helps.
                • 5. Re: How to write Itemrenderer Code using ActionScript?
                  Pratap Reddy Level 1
                  HI,

                  I dont wanna create different component to do so... i wanna write everything in single file..

                  Follwing code used to create a textbox inside a datagridcolumn.
                  This code working fine ...

                  var dgc:DataGridColumn=new DataGridColumn();
                  var factory:ClassFactory = new ClassFactory(TextInput);
                  factory.properties = {text: "TextInput"};
                  dgc.itemRenderer=factory;

                  Any idea how to add an event to that TextInput???
                  I wanna fire an dragEnter event on TextInput.. how to do it??? any idea???

                  Thanx in Advance