topic Re: keep the original order of FLEX Datagrid columns in ArcGIS API for Flex Questions

keep the original order of FLEX Datagrid columns

FarhadNavaei — Tue, 06 Mar 2012 17:42:00 GMT

Hi there,

I have an application which retrieve the data from the SDE, and displays it in a dynamically created Datagrid. the data is retrieved correctly, but the columns are ordered alphabetically, which is not the way I need. I need to keep the original order of the data columns as it is defined in the query statement.

Any help appreciated.

Re: keep the original order of FLEX Datagrid columns

IvanBespalov — Sun, 12 Dec 2021 01:48:21 GMT

Farhad,

spark.components.DataGrid

<s:DataGrid>
    <s:columns> 
        <s:ArrayList>
<!-- Define columns propeties here -->
            <s:GridColumn dataField="filedName4"/> 
            <s:GridColumn dataField="filedName2"/> 
            <s:GridColumn dataField="filedName1"/>
            <s:GridColumn dataField="filedName3"/>
        </s:ArrayList>
    </s:columns> 
</s:DataGrid>

Re: keep the original order of FLEX Datagrid columns

FarhadNavaei — Fri, 09 Mar 2012 21:54:07 GMT

Thank you Ivan for your response, but the problem is I don't define the columns in the code. The columns come from the query results and are set dynamically. Is there any way that we can keep the order of the columns?

Re: keep the original order of FLEX Datagrid columns

IvanBespalov — Mon, 12 Mar 2012 20:35:47 GMT

Farhad,

... I don't define the columns in the code ...

So where is this place you define it?

... The columns come from the query results and are set dynamically ...

I have not found documentation that confirms this statement. :confused:

Query result is feature set.

Try it, may be it helps you.

<?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:mx="library://ns.adobe.com/flex/mx">    <!-- Adobe Flex SDK 4.5.1 -->  <!-- ArcGIS API for Flex 2.5 -->         <!-- http://web.zone.ee/bespiva/queryresults/ -->    <s:layout>   <s:VerticalLayout gap="10"         paddingLeft="10"         paddingBottom="10"         paddingRight="10"         paddingTop="10"/>  </s:layout>    <fx:Script>   <![CDATA[    import com.esri.ags.FeatureSet;    import com.esri.ags.Graphic;    import com.esri.ags.events.LayerEvent;    import com.esri.ags.layers.FeatureLayer;    import com.esri.ags.layers.supportClasses.Field;    import com.esri.ags.tasks.supportClasses.Query;        import mx.collections.ArrayCollection;    import mx.rpc.AsyncResponder;    import mx.rpc.Fault;    import mx.utils.StringUtil;        import spark.components.gridClasses.GridColumn;        [Bindable]    private var gridSource:ArrayCollection = new ArrayCollection();        [Bindable]    private var gridColumns:ArrayCollection = new ArrayCollection();        private var queryLayer:FeatureLayer = null;        private function initializeLayer():void    {     queryLayer = new FeatureLayer(txtServiceUrl.text);     queryLayer.mode = FeatureLayer.MODE_ON_DEMAND;     queryLayer.outFields = new Array("*");     queryLayer.addEventListener(LayerEvent.LOAD, onLayerLoaded, false, 0, true);     dispatchEvent(new LayerEvent(LayerEvent.LOAD, queryLayer));    }        protected function onLayerLoaded(event:LayerEvent):void    {     queryLayer.removeEventListener(LayerEvent.LOAD, onLayerLoaded);                                 txtServiceUrl.editable = false;     executeQuery();    }        protected function onExecuteButtonClick(event:MouseEvent):void    {     if (queryLayer != null && queryLayer.loaded)     {      executeQuery();     }     else      {      initializeLayer();     }    }        private function executeQuery():void    {     var query:Query = new Query();     query.where = txtWhere.text;     query.returnGeometry = false;          var outs:Array = StringUtil.trim(txtOuts.text).split(",");     query.outFields = queryLayer.outFields = outs;          queryLayer.queryFeatures(query, new AsyncResponder(onQueryResult, onQueryFault));    }        protected function onQueryResult(featureSet:FeatureSet, token:Object = null):void    {     gridSource = new ArrayCollection();                                                                  lblResultsCount.text = StringUtil.substitute("Found: {0} features.", featureSet.features.length);                                      for each(var gr:Graphic in featureSet.features)     {      gridSource.addItem(gr.attributes);     }     gridSource.refresh();          gridColumns = new ArrayCollection();     for each (var field:Field in featureSet.fields)     {      var gridColumn:GridColumn = new GridColumn(field.alias);      gridColumns.addItem(gridColumn);     }     gridColumns.refresh();              }        protected function onQueryFault(fault:Fault, token:Object = null):void    {     trace(fault.getStackTrace());    }   ]]>  </fx:Script>      <s:Panel width="100%"      title="Query parameters">      <s:VGroup gap="5"        paddingLeft="5"        paddingTop="5"        paddingRight="5"        paddingBottom="5"        width="100%">        <s:HGroup width="100%">          <s:Label text="Url:"         width="150" />          <s:TextInput id="txtServiceUrl"         width="100%"         text="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5" />         </s:HGroup>        <s:HGroup width="100%">          <s:Label text="Where clause:"         width="150" />          <s:TextInput id="txtWhere"          width="100%"         text="1=1" />         </s:HGroup>        <s:HGroup width="100%">          <s:Label text="Out fields (CSV):"         width="150" />          <s:TextInput id="txtOuts"          width="100%"         text="STATE_NAME,STATE_FIPS,SUB_REGION,STATE_ABBR,POP2000,POP2007" />         </s:HGroup>        <s:HGroup width="100%">          <s:Button label="Execute" click="onExecuteButtonClick(event)" />         </s:HGroup>       </s:VGroup>     </s:Panel>    <s:Panel title="Results"      width="100%"     height="100%">      <s:VGroup gap="5"        paddingLeft="5"        paddingTop="5"        paddingRight="5"        paddingBottom="5"        width="100%"       height="100%">        <s:Label id="lblResultsCount" />        <s:DataGrid width="100%"       height="100%"       dataProvider="{gridSource}"       columns="{gridColumns}"/>       </s:VGroup>     </s:Panel>   </s:Application>

Re: keep the original order of FLEX Datagrid columns

CarlosFelix — Sun, 12 Dec 2021 01:48:24 GMT

Hi Ivan,

I tried to use the code you sent, there is no FeatureSet in my code. the data come from a SQL statement which is passed directly to MS SQL server.
Sorry, I'm new in Flash Builder. I didn't develop the code, but I have to improve it.
I tried to use the same logic in your code, but I couldn't find any way to control the fields in the event.results.
I think if I can control the columns in event.results.results.record (see mssqlResult), then I can use the same logic and pass the columns into the datagrid.

Does it make any sense?
Thank you

[Bindable]
private var dataGridAC:ArrayCollection = new ArrayCollection();

private var floatGrid:queryWidgetDG;

public function mssqlQuery(sql:String,fid:String):void {
 var http:HTTPService = new HTTPService;
 var parm:Object = new Object;
 parm.fas_sql = sql;
 parm.fas_db = mssql_db; 
 http.url = mssql_url+"?irand="+Math.random();
 http.showBusyCursor = true;
 http.request = sql;
 http.addEventListener(ResultEvent.RESULT, mssqlResult);
 http.addEventListener(FaultEvent.FAULT, mssqlFault);
 http.method = "POST";
 sqlToken = http.send(parm);
 sqlToken.param = fid;
}

private function mssqlResult(event:ResultEvent):void{
 if (event.result.results){
  dataGridAC.removeAll();
  dataGridAC = event.result.results.record;
  getgridData();
 }else{
  Alert.show("No data found");
 }

}

private function getgridData():void{

 PopUpManager.removePopUp(floatGrid);
 floatGrid.btnString = "StationID";
 floatGrid.stringTitle = "Temperature" + " Data at " + wqStreamNameList.selectedItem.StreamName;     

 floatGrid.data = dataGridAC;

 showGrid();
}

//this function will add the grid to the app
protected function showGrid():void{
 if(!floatGrid){
  floatGrid = queryWidgetDG(PopUpManager.createPopUp(map,queryWidgetDG,false));
  PopUpManager.centerPopUp(floatGrid);
  //myChart = queryWidgetChart(PopUpManager.createPopUp(map,queryWidgetChart,false));
 }else{
  PopUpManager.addPopUp(floatGrid,map,false);
  PopUpManager.centerPopUp(floatGrid);
  // PopUpManager.addPopUp(queryWidgetChart,map,false);
 }
}

Re: keep the original order of FLEX Datagrid columns

FarhadNavaei — Sun, 12 Dec 2021 01:48:27 GMT

Hi Ivan,

I tried to use the code you sent, but there is no FeatureSet in my code. The data come from a SQL statement which is passed directly to MS SQL server.
Sorry, I'm new in Flash Builder. I didn't develop the code, but I have to improve it.
I tried to use the same logic, but I couldn't find any way to control the fields in the event.results.
I think if I can control the columns in event.results.results.record (see mssqlResult), then I can use the same logic and pass the columns into the datagrid.

Does it make any sense?
Thank you

[Bindable]
private var dataGridAC:ArrayCollection = new ArrayCollection();

private var floatGrid:queryWidgetDG;

public function mssqlQuery(sql:String,fid:String):void {
 var http:HTTPService = new HTTPService;
 var parm:Object = new Object;
 parm.fas_sql = sql;
 parm.fas_db = mssql_db; 
 http.url = mssql_url+"?irand="+Math.random();
 http.showBusyCursor = true;
 http.request = sql;
 http.addEventListener(ResultEvent.RESULT, mssqlResult);
 http.addEventListener(FaultEvent.FAULT, mssqlFault);
 http.method = "POST";
 sqlToken = http.send(parm);
 sqlToken.param = fid;
}

private function mssqlResult(event:ResultEvent):void{
 if (event.result.results){
  dataGridAC.removeAll();
  dataGridAC = event.result.results.record;
  getgridData();
 }else{
  Alert.show("No data found");
 }

}

private function getgridData():void{

 PopUpManager.removePopUp(floatGrid);
 floatGrid.btnString = "StationID";
 floatGrid.stringTitle = "Temperature" + " Data at " + wqStreamNameList.selectedItem.StreamName;     

 floatGrid.data = dataGridAC;

 showGrid();
}

//this function will add the grid to the app
protected function showGrid():void{
 if(!floatGrid){
  floatGrid = queryWidgetDG(PopUpManager.createPopUp(map,queryWidgetDG,false));
  PopUpManager.centerPopUp(floatGrid);
  //myChart = queryWidgetChart(PopUpManager.createPopUp(map,queryWidgetChart,false));
 }else{
  PopUpManager.addPopUp(floatGrid,map,false);
  PopUpManager.centerPopUp(floatGrid);
  // PopUpManager.addPopUp(queryWidgetChart,map,false);
 }
}

Re: keep the original order of FLEX Datagrid columns

karldailey — Thu, 22 Mar 2012 14:56:47 GMT

you dont have to remove all? just bind the data provider to the results, provided the column names are the same as your query field names

Re: keep the original order of FLEX Datagrid columns

FarhadNavaei — Sun, 12 Dec 2021 01:48:29 GMT

Ivan,

I could use your sample code with a small change. I declared gridColumns as Array instead of ArrayCollection.
[Bindable]
private var gridColumns:Array = [];

Farhad,

So where is this place you define it?

I have not found documentation that confirms this statement. :confused:

Query result is feature set.

Try it, may be it helps you.

<?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:mx="library://ns.adobe.com/flex/mx">
 
 <!-- Adobe Flex SDK 4.5.1 -->
 <!-- ArcGIS API for Flex 2.5 -->
        <!-- http://web.zone.ee/bespiva/queryresults/ --> 

 <s:layout>
  <s:VerticalLayout gap="10"
        paddingLeft="10"
        paddingBottom="10"
        paddingRight="10"
        paddingTop="10"/>
 </s:layout>
 
 <fx:Script>
  <![CDATA[
   import com.esri.ags.FeatureSet;
   import com.esri.ags.Graphic;
   import com.esri.ags.events.LayerEvent;
   import com.esri.ags.layers.FeatureLayer;
   import com.esri.ags.layers.supportClasses.Field;
   import com.esri.ags.tasks.supportClasses.Query;
   
   import mx.collections.ArrayCollection;
   import mx.rpc.AsyncResponder;
   import mx.rpc.Fault;
   import mx.utils.StringUtil;
   
   import spark.components.gridClasses.GridColumn;
   
   [Bindable]
   private var gridSource:ArrayCollection = new ArrayCollection();
   
   [Bindable]
   private var gridColumns:ArrayCollection = new ArrayCollection();
   
   private var queryLayer:FeatureLayer = null;
   
   private function initializeLayer():void
   {
    queryLayer = new FeatureLayer(txtServiceUrl.text);
    queryLayer.mode = FeatureLayer.MODE_ON_DEMAND;
    queryLayer.outFields = new Array("*");
    queryLayer.addEventListener(LayerEvent.LOAD, onLayerLoaded, false, 0, true);
    dispatchEvent(new LayerEvent(LayerEvent.LOAD, queryLayer));
   }
   
   protected function onLayerLoaded(event:LayerEvent):void
   {
    queryLayer.removeEventListener(LayerEvent.LOAD, onLayerLoaded);
                                txtServiceUrl.editable = false;
    executeQuery();
   }
   
   protected function onExecuteButtonClick(event:MouseEvent):void
   {
    if (queryLayer != null && queryLayer.loaded)
    {
     executeQuery();
    }
    else 
    {
     initializeLayer();
    }
   }
   
   private function executeQuery():void
   {
    var query:Query = new Query();
    query.where = txtWhere.text;
    query.returnGeometry = false;
    
    var outs:Array = StringUtil.trim(txtOuts.text).split(",");
    query.outFields = queryLayer.outFields = outs;
    
    queryLayer.queryFeatures(query, new AsyncResponder(onQueryResult, onQueryFault));
   }
   
   protected function onQueryResult(featureSet:FeatureSet, token:Object = null):void
   {
    gridSource = new ArrayCollection();
                                
                                lblResultsCount.text = StringUtil.substitute("Found: {0} features.", featureSet.features.length);
                                
    for each(var gr:Graphic in featureSet.features)
    {
     gridSource.addItem(gr.attributes);
    }
    gridSource.refresh();
    
    gridColumns = new ArrayCollection();
    for each (var field:Field in featureSet.fields)
    {
     var gridColumn:GridColumn = new GridColumn(field.alias);
     gridColumns.addItem(gridColumn);
    }
    gridColumns.refresh();
    
    
   }
   
   protected function onQueryFault(fault:Fault, token:Object = null):void
   {
    trace(fault.getStackTrace());
   }
  ]]>
 </fx:Script>
 
 
 <s:Panel width="100%" 
    title="Query parameters">
  
  <s:VGroup gap="5" 
      paddingLeft="5" 
      paddingTop="5" 
      paddingRight="5" 
      paddingBottom="5" 
      width="100%">
   
   <s:HGroup width="100%">
    
    <s:Label text="Url:" 
       width="150" />
    
    <s:TextInput id="txtServiceUrl"
        width="100%"
        text="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5" />
    
   </s:HGroup>
   
   <s:HGroup width="100%">
    
    <s:Label text="Where clause:" 
       width="150" />
    
    <s:TextInput id="txtWhere" 
        width="100%"
        text="1=1" />
    
   </s:HGroup>
   
   <s:HGroup width="100%">
    
    <s:Label text="Out fields (CSV):" 
       width="150" />
    
    <s:TextInput id="txtOuts" 
        width="100%"
        text="STATE_NAME,STATE_FIPS,SUB_REGION,STATE_ABBR,POP2000,POP2007" />
    
   </s:HGroup>
   
   <s:HGroup width="100%">
    
    <s:Button label="Execute" click="onExecuteButtonClick(event)" />
    
   </s:HGroup>
   
  </s:VGroup>
  
 </s:Panel>
 
 <s:Panel title="Results" 
    width="100%"
    height="100%">
  
  <s:VGroup gap="5" 
      paddingLeft="5" 
      paddingTop="5" 
      paddingRight="5" 
      paddingBottom="5" 
      width="100%"
      height="100%">
   
   <s:Label id="lblResultsCount" />
   
   <s:DataGrid width="100%"
      height="100%"
      dataProvider="{gridSource}"
      columns="{gridColumns}"/>
   
  </s:VGroup>
  
 </s:Panel>
 
</s:Application>

Re: keep the original order of FLEX Datagrid columns

IvanBespalov — Sun, 12 Dec 2021 01:48:32 GMT

Farhad,

I could use your sample code with a small change. I declared gridColumns as Array instead of ArrayCollection.

If your code works - very well. Good luck.

from adobe reference

columns property
columns:IList

that's why I use ArrayCollection�?�ListCollectionView�?�IList

My compiler reports an error if Array used

1067: Implicit coercion of a value of type Array to an unrelated type mx.collections:IList. ...