nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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.

Vind meer berichten getagd met

Accepted answers

IvanBespalov

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.

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>

All comments

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

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.

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.

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.