Copying selected datagrid items to new arraycollection

JasonLevine — Wed, 02 Mar 2011 22:38:11 GMT

Hello all,
I'm trying to copy some selected items in a dataGrid over to a separate arrayCollection. My basic workflow is:

1)Do an identify on a layer
2)add attributes from the result graphics to arrayCollection1 and set dataGrid1's dataprovider to arrayCollection1.
3) select certain rows in dataGrid1 using a checkbox
4) use a button to run a function that copies only these selected rows into arrayCollection2 and then sets dataGrid2's dataProvider to arrayCollection2

How do I check to see what items in dataGrid1 are checked and only copy those items over to my arrayCollection2?

Here is my code so far:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:esri="http://www.esri.com/2008/ags"
      xmlns:symbols="com.esri.ags.symbols.*"
      pageTitle="MapClick - click map to get current location" xmlns:mx="library://ns.adobe.com/flex/mx">
 
 <fx:Script>
  <![CDATA[
   import com.esri.ags.Graphic;
   import com.esri.ags.events.MapMouseEvent;
   import com.esri.ags.symbols.SimpleMarkerSymbol;
   import com.esri.ags.tasks.IdentifyTask;
   import com.esri.ags.tasks.supportClasses.IdentifyParameters;
   import com.esri.ags.tasks.supportClasses.IdentifyResult;
   
   import components.checkBoxRenderer;
   
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   import mx.rpc.AsyncResponder;
   
   [Embed (source="images/identify_cursor.png")]
   private var identifyCursor:Class;
   
   private function findSubdivisions():void
   {
    myMap.cursorManager.setCursor(identifyCursor,2,0,-3);
    myMap.addEventListener(MapMouseEvent.MAP_CLICK, subQuery);
   }
   
   public var arrayCollection1:ArrayCollection = new ArrayCollection();
   private function subQuery(event:MapMouseEvent):void
   {
    var identifyParams:IdentifyParameters = new IdentifyParameters();
    identifyParams.returnGeometry = true;
    identifyParams.tolerance = 3;
    identifyParams.width = myMap.width;
    identifyParams.height = myMap.height;
    identifyParams.geometry = event.mapPoint;
    identifyParams.mapExtent = myMap.extent;
    identifyParams.spatialReference = myMap.spatialReference;
    identifyParams.layerIds = [1];
    var identifyTask:IdentifyTask = new IdentifyTask();
    identifyTask.concurrency = "last";
    identifyTask.url = "http://10.2.8.73/ArcGIS/rest/services/GIS_LAYERS/Subdivisions/MapServer";
    
    var clickGraphic:Graphic = new Graphic(event.mapPoint, clickPtSym);
    identifyTask.execute(identifyParams, new AsyncResponder(subQueryResult, subQueryFault, clickGraphic));
   }
   
   private function subQueryResult(results:Array, clickGraphic:Graphic = null):void
   {
    if (results && results.length > 0)
    {
     //arrayCollection1.removeAll();
     for (var i:int = 0; i<results.length; i++)
     {
      var result:IdentifyResult = results;
      var resultGraphic:Graphic = result.feature;
      var tempArray:Array = new Array();
      var filename:String = new String();
      tempArray = resultGraphic.attributes.CROPPED.split("G\\");
      filename = tempArray[1];
      arrayCollection1.addItem({filename:filename});
     }
     dataGrid1.dataProvider = arrayCollection1;
     myMap.removeEventListener(MapMouseEvent.MAP_CLICK, subQuery);
     myMap.cursorManager.removeAllCursors();
     clearList.visible = true;
    }
    else
    {
     Alert.show("No Subdivisions Found");
    }
   }
   
   private function subQueryFault(error:Object):void
   {
    Alert.show(String(error), "Identify Error");
   }
   

   private function refreshMap():void
   {
    var arrayCollection2:ArrayCollection = new ArrayCollection();
    //this is where I want to take the rows that are checked in the dataGrid1 DataGrid and copy just those items to the
    //arrayCollection2 arraycollection
    
    
    
    //then I set the datagrid2 dataprovider to the arrayCollection2 arrayCollection
    datagrid2.dataProvider = arrayCollection2;
   }
  
   
   private function clearArray():void
   {
    arrayCollection1.removeAll();
    clearList.visible = false;
   }

   
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <esri:Extent id="initial" xmin="-13364765" ymin="3908190" xmax="-12964235" ymax="4212715">
   <esri:SpatialReference wkid="3857"/>
  </esri:Extent>
  
  <esri:SimpleMarkerSymbol id="clickPtSym"
         color="0xFF0000"
         size="12"
         style="x"/>
 </fx:Declarations>
 
 <esri:Map id="myMap" extent="{initial}">
  <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
  <esri:ArcGISDynamicMapServiceLayer url="http://10.2.8.73/ArcGIS/rest/services/GIS_LAYERS/Subdivisions/MapServer"/>
 </esri:Map>
 <s:Button id="Activate" bottom="510" left="10" label="Find Subdivisions" click="findSubdivisions()"/>
 <s:Button id="addImage" bottom="475" left="10" label="Refresh Map" click="refreshMap()"/>
 <s:Button id="clearList" bottom="100" left="10" label="Clear List" click="clearArray()" visible="false"/>
 <mx:DataGrid id="dataGrid1" bottom="250" left="10" width="300">
  <mx:columns>
   <mx:DataGridColumn id="visibility" width="55" headerText="Visibility" itemRenderer="components.checkBoxRenderer" dataField="filename"/>
   <mx:DataGridColumn id="ImageName" width="245" headerText="Image" dataField="filename"/>
  </mx:columns>
 </mx:DataGrid>
 <mx:DataGrid id="datagrid2" bottom="250" left="410">
  <mx:columns>
   <mx:DataGridColumn id="checkedImageName" width="245" headerText="Checked Image" dataField="filename"/>
  </mx:columns>
 </mx:DataGrid>
</s:Application>

And here's my checkBoxRenderer:

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer 
 xmlns:fx="http://ns.adobe.com/mxml/2009" 
 xmlns:s="library://ns.adobe.com/flex/spark">
 
 <s:CheckBox id="cb" horizontalCenter="0"/>
 
</s:MXDataGridItemRenderer>

Thanks for your help,
Jason

Re: Copying selected datagrid items to new arraycollection

ReneRubalcava — Sat, 11 Dec 2021 18:27:36 GMT

You want to add a field to your attributes to hold the selection, something like isSelected:Boolean

arrayCollection1.addItem({filename:filename, isSelected: true});

Then in your checkbox itemrenderer

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer 
 xmlns:fx="http://ns.adobe.com/mxml/2009" 
 xmlns:s="library://ns.adobe.com/flex/spark">
 <s:CheckBox id="cb" horizontalCenter="0" selected={data.isSelected}/>
</s:MXDataGridItemRenderer>

Then use that when you want to figure out what items to export.

Re: Copying selected datagrid items to new arraycollection

JasonLevine — Sat, 11 Dec 2021 18:27:39 GMT

Hi Rene,
Thanks for this suggestion! I added to it and ended up getting the functionality I needed. Here's what I ended up doing:

I added the isSelected field to my arrayCollection1 like you had suggested but set it to false:

arrayCollection1.addItem({filename:filename,isSelected: false});

Then, in my checkBoxRenderer, I added a click function:

<fx:Script>
  <![CDATA[
   
   import mx.core.FlexGlobals;

   protected function checkBoxClick(event:MouseEvent):void
   {
    if (FlexGlobals.topLevelApplication.arrayCollection1[this.itemIndex].isSelected == false)
    {
     FlexGlobals.topLevelApplication.arrayCollection1[this.itemIndex].isSelected = true;
    }
    else
    {
     FlexGlobals.topLevelApplication.arrayCollection1[this.itemIndex].isSelected = false;
    }
   }

  ]]>
 </fx:Script>
 
 <s:CheckBox id="cb" horizontalCenter="0" selected="{data.isSelected}" click="checkBoxClick(event)"/>

Then, in my refreshMap function:

var arrayCollection2:ArrayCollection = new ArrayCollection();
    for (var q:int = 0; q<arrayCollection1.length; q++)
    {
     if (arrayCollection1.isSelected == true)
     {
      arrayCollection2.addItem(arrayCollection1);
     }
    }
    datagrid2.dataProvider = arrayCollection2;

Thanks again for your help,
Jason

Re: Copying selected datagrid items to new arraycollection

JasonLevine — Sat, 11 Dec 2021 18:27:41 GMT

...changed my checkboxRenderer function to:

protected function checkBoxClick(event:MouseEvent):void
   {
    this.data.isSelected = !this.data.isSelected;
   }

It's better and shorter this way.

topic Re: Copying selected datagrid items to new arraycollection in ArcGIS API for Flex Questions

Copying selected datagrid items to new arraycollection

Re: Copying selected datagrid items to new arraycollection

Re: Copying selected datagrid items to new arraycollection

Re: Copying selected datagrid items to new arraycollection