keep the original order of FLEX Datagrid columns

[FarhadNavaei]

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.

[IvanBespalov]

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>

[FarhadNavaei]

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?

[IvanBespalov · Accepted solution]

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>

[CarlosFelix]

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);
 }
}

[FarhadNavaei]

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);
 }
}

[karldailey]

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

[FarhadNavaei]

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>

[IvanBespalov]

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. ...