1 Reply Latest reply on Mar 2, 2011 4:30 AM by Tanu Jain

    How to set ArrayCollection column value as OPTIONS of Itemrenderer in datagrid ?

    anandbk

      Hi Guys,

       

      Can any body help me in implementing below thing.  I am very new to FLEX. This is very urgent for me because i have a release. Kindly help me guys.

       

      1)

      I have to set the status values (In Progress, Completed, Suspended,On Hold) as options of all dropdowns that appear in each row of the datagrid.

      I mean, in datagrid i have a column with Status and one more column which has dropdown for each row of datagrid (i think it is called dropdown itemrenderer). And i have to set all the Status values (i have to pick these value directly from the arraycollection itself, but not seperately hardcoding as options for dropdowns) as OPTIONS of each dropdown of rows.

      In ArrayCollection Staus may appear multiple times (status Complete may appear more than once) but that status should appear as ONLY ONE OPTION in the dropdown.

      So, as per my requirement In Progress, Completed, Suspended,On Hold should be OPTIONS of dropdown.

       

      2)

      Secondly, i have to check whether any value of any dropdown has changed.

      i.e If i select other options (other than already selected), then i have pick those modified dropdown values of rows and send to DB. Here i need, how to collect all the values of each dropdowns of rows whose values have been changed.

       

      I am using FLEX 3.5. Please find the code below.

       

       

      Code:

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600">

       

      <mx:Script>
              <![CDATA[

       

              ]]>
      </mx:Script>
         
           
          <mx:ArrayCollection id="arrColl" >
              <mx:Object Status="In Progress" title="java"         grade="A"/>
              <mx:Object Status="Completed"     title="c"             grade="B"/>
              <mx:Object Status="Suspended"     title="c++"         grade="C"/>
              <mx:Object Status="On Hold"     title="flex"         grade="D"/>
              <mx:Object Status="Completed"     title="cobol"         grade="E"/>
              <mx:Object Status="In Progress" title="python"         grade="F"/>
              <mx:Object Status="Completed"     title="SAP"         grade="G"/>
              <mx:Object Status="In Progress" title="Oracle"         grade="H"/>
              <mx:Object Status="On Hold"     title="Sybase"         grade="I"/>
              <mx:Object Status="In Progress" title="HTML"         grade="J"/>
              <mx:Object Status="In Progress" title="JSP"         grade="K"/>
              <mx:Object Status="On Hold"     title="Servlets"     grade="L"/>
          </mx:ArrayCollection>
         
          <mx:DataGrid id="statusGrid" dataProvider="{arrColl}" width="25%" height="62%">
              <mx:columns>
                  <mx:DataGridColumn dataField="Status"/>
                 
                  <mx:DataGridColumn>
                      <mx:itemRenderer>
                          <mx:Component>
                              <mx:ComboBox>
                                 
                              </mx:ComboBox>
                          </mx:Component>
                      </mx:itemRenderer>
                  </mx:DataGridColumn>
              </mx:columns>
          </mx:DataGrid>
         
      </mx:Application>

        • 1. Re: How to set ArrayCollection column value as OPTIONS of Itemrenderer in datagrid ?
          Tanu Jain Level 2

          Try doing as given below:

           

          In script,

          public var statusArr:ArrayCollection = new ArrayCollection(["progress","completed","suspended","hold"]);

          and handle itemClickEvent

           

          protected function dg_itemClickHandler(event:ListEvent):void
          {               
               trace('' + event.itemRenderer.data.status);            \

          }

           

          In MXML,

           

          <mx:DataGrid    
                  id="dg"

                  itemClick="dg_itemClickHandler(event)"
                  editable="true">

           

               <mx:DataGridColumn dataField="Album" rendererIsEditor="true">
                          <mx:itemRenderer>
                              <fx:Component>
                                  <mx:ComboBox dataProvider="{outerDocument.statusArr}"/>
                              </fx:Component>
                          </mx:itemRenderer>

                </mx:DataGridColumn>

          </mx:DataGrid>

           

          --

          Tanu