1 Reply Latest reply on Sep 24, 2010 12:22 AM by Rajesh Yadav @ Tcs

    itemrenderer's control (combobox) data change from main app

    FlexPrashant Level 1

      Hi I have a reset button on my main app . and this app has a datagrid which is using a item

      renderer and inside this IR  i have a combo box control , Now user is selecting something in combo that is showing on Combo means combo box selected index change is working .

       

      Now I have a button in this app , now I want to reset all the values of form  .. so these all comboboxs should reset to their prompt ..

      I am not getting how to update the ItemRenderer ..

       

      here is the code

       

      <?xml version="1.0" encoding="utf-8" ?>

      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" horizontalScrollPolicy="off">

       

      <mx:Script>

      <![CDATA[

       

      import mx.controls.Alert;

       

      import mx.collections.*;

       

      import flash.events.Event;

       

      import mx.controls.DataGrid;

       

       

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

      {

       

       

      if(value != null)

      {

       

      super.data = value;

       

       

      var colorLength:int = value.color.length;

       

       

      //show the comboBox

       

       

      if(colorLength > 1)

      {

      colorChoices.visible=

      true;

      colorLabel.visible=

      false;

      }

       

      //hide the comboBox and show the label

       

       

      else

      {

      colorChoices.visible=

       

      false;

      colorLabel.visible=

      true;

      }

      colorChoices.selectedItem=data.selectedColor;

      }

      }

       

       

      public function changeHandler(event:Event): void

      {

      data.selectedColor=String(colorChoices.selectedItem);

      IList(DataGrid(owner).dataProvider).itemUpdated(colorChoices.selectedItem);

      }

       

       

      ]]>

       

       

      </mx:Script>

       

       

      <mx:ComboBox id="colorChoices" dataProvider="{data.color}" width="100%"

      change="changeHandler(event)" prompt="

      -select-"/>

       

      <mx:Label id="colorLabel" text="{colorChoices.selectedItem}" x="5" />

       

      </mx:Canvas>

      ------------------------------------------------------------------------------------------ -

      <?xml version="1.0" encoding="utf-8" ?>

       

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

      backgroundGradientColors="

      [0x990000, 0xffccff]"

      layout="

      vertical">

       

      <mx:Script>

      <![CDATA[

       

      import mx.collections.ItemResponder;

       

      import mx.controls.ComboBox;

       

      import mx.events.DataGridEvent;

       

      [

      Bindable]

       

      private var musicPlayers:Array = [

      {product:

      "Z450", color: ['blue', 'pink', 'silver'], memory: "8 GB", selectedColor: 'blue'},

      {product:

      "ZR50", color: ['blue', 'pink', 'silver'], memory: "80 GB", selectedColor: 'black'},

      {product:

      "ZR250", color: ['blue', 'pink', 'silver'], memory: "120 GB", selectedColor: 'silver'},

      {product:

      "ZM10", color: ['blue', 'pink', 'silver'], memory: "4 GB", selectedColor: 'silver'},

      {product:

      "Z150", color: ['blue', 'pink', 'silver'], memory: "1 GB", selectedColor: 'yellow'},

      {product:

      "ZM450", color: ['blue', 'pink', 'silver'], memory: "30 GB", selectedColor: 'white'}

      ];

       

      protected function button1_clickHandler(event:MouseEvent):void

      {

       

      // TODO Auto-generated method stub

       

       

      }

       

      ]]>

       

      </mx:Script>

       

      <mx:DataGrid id="dg" dataProvider="{musicPlayers}" rollOverColor="0xCCCCCC">

       

      <mx:columns>

       

      <mx:DataGridColumn dataField="product" headerText="Product" width="100" />

       

      <mx:DataGridColumn dataField="color" headerText="Available Colors"

      id="

      dgcol" itemRenderer="DynRenderer" width="130" />

       

      <mx:DataGridColumn dataField="memory" headerText="Memory" width="80" />

       

      <mx:DataGridColumn dataField="selectedColor" headerText="Selected Color" width="120" />

       

      </mx:columns>

       

      </mx:DataGrid>

       

      <mx:HBox width="100%" >

       

      <mx:Spacer width="25%" />

       

      <mx:Button label="reset" click="button1_clickHandler(event)" />

       

      </mx:HBox>

       

      </mx:Application>

       

       

       

       

        • 1. Re: itemrenderer's control (combobox) data change from main app
          Rajesh Yadav @ Tcs

          Try this...

           

           

          <?xml version="1.0" encoding="utf-8"?>

          <mx:Application

           

           

          xmlns:mx="http://www.adobe.com/2006/mxml"

          backgroundGradientColors="

          [0x990000, 0xffccff]"

          layout="

          vertical" >

           

           

          <mx:Script>

          <![CDATA[

           

           

          import examples.DynamicData;

           

          import test.DynRenderer;

           

          import mx.collections.ArrayCollection;

           

          import mx.collections.ItemResponder;

           

          import mx.controls.ComboBox;

           

          import mx.events.DataGridEvent;

          [

          Bindable]

           

          private var musicPlayers:ArrayCollection = new ArrayCollection([{product:

           

          "Z450", color: ['blue', 'pink', 'silver'], memory: "8 GB", selectedColor: 'blue'}, {product:

           

          "ZR50", color: ['blue', 'pink', 'silver'], memory: "80 GB", selectedColor: 'black'}, {product:

           

          "ZR250", color: ['blue', 'pink', 'silver'], memory: "120 GB", selectedColor: 'silver'}, {product:

           

          "ZM10", color: ['blue', 'pink', 'silver'], memory: "4 GB", selectedColor: 'silver'}, {product:

           

          "Z150", color: ['blue', 'pink', 'silver'], memory: "1 GB", selectedColor: 'yellow'}, {product:

           

          "ZM450", color: ['blue', 'pink', 'silver'], memory: "30 GB", selectedColor: 'white'}

          ]);

           

           

          protected function button1_clickHandler(event:MouseEvent):void

          {

           

           

          for (var i:int=0; i < dg.dataProvider.length;i++)

          {

          musicPlayers[i].selectedColor =

          "--Select--"

          }

          musicPlayers.refresh();

          }

          ]]>

           

            

            

           

           

          </mx:Script>

           

            

            

           

           

          <mx:DataGrid id="dg"

          dataProvider="

          {musicPlayers}"

          rollOverColor="

          0xCCCCCC">

           

           

          <mx:columns>

           

           

          <mx:DataGridColumn dataField="product"

          headerText="

          Product"

          width="

          100"/>

           

           

          <mx:DataGridColumn dataField="color"

          headerText="

          Available Colors"

          id="

          dgcol"

          itemRenderer="

          test.DynRenderer"

          width="

          130"/>

           

           

          <mx:DataGridColumn dataField="memory"

          headerText="

          Memory"

          width="

          80"/>

           

           

          <mx:DataGridColumn dataField="selectedColor"

          headerText="

          Selected Color"

          width="

          120"/>

           

           

          </mx:columns>

           

           

          </mx:DataGrid>

           

            

            

           

          <mx:HBox width="100%">

           

            

            

           

          <mx:Spacer width="25%"/>

           

            

            

           

          <mx:Button label="reset" click="button1_clickHandler(event)"/>

           

            

            

           

          </mx:HBox>

           

            

            

          </mx:Application>

          1 person found this helpful