1 Reply Latest reply on Aug 18, 2011 8:25 AM by Flex harUI

    Rearrange column in Datagrid in Flex

    asosa2000

      Hi, i am retrieving data from database using arraycollection to fill in the datagrid with dynamic column header, and the columns are arranger alphabatically depend on the column header title, for my case i want to rearrange the columns depend on specific order, i created another function to rearrange the columns, and its working fine for the first page load but when i change the dropdown entries i get all the columns rearranged but without data only the first column contain data which is [EngName]

       

       

       

      the following is my code

      ---------------------------------------

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" layout="vertical"  width="70%" backgroundAlpha="1" backgroundColor="white" xmlns:local="*">
      <mx:WebService id="wsExec" wsdl="http://wfsvc-test/ExecSummaryReport.asmx?WSDL" useProxy="false" showBusyCursor="true">
      <mx:operation name="GetExecSummary2" result="handleExecSummaryResult(event)" fault="handleFault(event)"/>
      </mx:WebService>
      <mx:WebService id="wsAdmin" wsdl="http://wfsvc-test/Admin.asmx?wsdl" useProxy="false" showBusyCursor="true">
      <mx:operation name="SelectDirectorates" result="handleDir(event)" fault="handleFault(event)"/>
      <mx:operation name="SelectSections" result="handleSec(event)" fault="handleFault(event)"/>
      </mx:WebService>
      <mx:Script>
      <![CDATA[
      import mx.controls.dataGridClasses.DataGridColumn;
      import mx.messaging.AbstractConsumer;
      import mx.collections.ArrayCollection;
      import mx.controls.Alert;
      import mx.rpc.events.FaultEvent;
      import mx.rpc.events.ResultEvent;
        
      [Bindable]
      private var gridData:ArrayCollection;
        
      [Bindable]
      private var dirData:ArrayCollection;
        
      [Bindable]
      private var secData:ArrayCollection;
         
      private function init():void
      {
        wsAdmin.SelectDirectorates();
        var today:Date = new Date();
        today.setDate(1);
        dtFrom.selectedDate =today;
        dtTo.selectedDate = new Date();
      }
        
      private function handleExecSummaryResult(event:ResultEvent):void
      {
        for each(var objTbl:Object in event.result.Tables)
        {
         gridData = objTbl.Rows as ArrayCollection;
        }
         
         
        dg.dataProvider = gridData;
        var columns:Array = dg.columns.sort(orderColumns);
        dg.columns = columns;
        dg.visible = true;
      }
      private function orderColumns(a:DataGridColumn, b:DataGridColumn):int{
         if (a.headerText == "EngName" || b.headerText == "EngName"){
                return -1;
         }else if (a.headerText < b.headerText){
                return -1;
         }else if (a.headerText > b.headerText){
                 return 1;
        } else {
          return 0;
         }

      }

      private function handleDir(event:ResultEvent):void
      {
        var dirArr:Array = new Array();
        var defaultItem:Object = new Object();
        defaultItem['data'] = '00';
        defaultItem['label'] = '-- Select Directorate --';
        dirArr.push(defaultItem);

        for each(var objTbl:Object in event.result.Tables)
        {
         for each(var objRow:Object in objTbl.Rows)
         {
          var obj:Object = new Object();
          obj['label'] = objRow['EngDir'];
          obj['data'] = objRow['DirCode'];
          dirArr.push(obj);
         }
        }
        dirData = new ArrayCollection(dirArr);
        }

      private function handleSec(event:ResultEvent):void
      {
        var secArr:Array = new Array();
        var defaultItem:Object = new Object();
        defaultItem['data'] = '00';
        defaultItem['label'] = '-- Select Section --';
        secArr.push(defaultItem);
        for each(var objTbl:Object in event.result.Tables)
        {
         for each(var objRow:Object in objTbl.Rows)
         {
         var obj:Object = new Object();
         obj['label'] = objRow['EngSec'];
         obj['data'] = objRow['SecCode'];
         secArr.push(obj);
         }
        }
        secData = new ArrayCollection(secArr);
      }

      private function handleFault(event:FaultEvent):void
      {
        Alert.show(event+'');
      }
      ]]>
      </mx:Script>
      <mx:Label width="100%" textAlign="center" text="Executive Summary Report" fontSize="24"/>
      <mx:HBox width="100%">
      <mx:HBox width="100%" horizontalAlign="right" verticalAlign="middle" >
      </mx:HBox>
      </mx:HBox>
      <mx:HBox width="100%">
        <mx:Label text="Search: From"/>
        <mx:DateField id="dtFrom" name="n1" formatString="DD/MM/YYYY"/>
        <mx:Label text=" To "/>
        <mx:DateField id="dtTo" name="n1" formatString="DD/MM/YYYY"/>
        <mx:Label text="   Directorate:"/>
        <mx:ComboBox id="ddlDir" dataProvider="{dirData}" width="170">
         <mx:change>
          <![CDATA[
           wsAdmin.SelectSections(ddlDir.selectedItem['data'].toString());
          ]]>
         </mx:change>
        
        </mx:ComboBox>
        <mx:Label text=" Section:"/>
        <mx:ComboBox id="ddlSec" dataProvider="{secData}" width="170"/>
        <mx:Label text="Status: "/>
         <mx:CheckBox id="chkCompleted" label="Completed" selected="true">
          <mx:click>
           <![CDATA[
            chkCompleted.selected = true;
            chkInProgress.selected = false;
           ]]>
          </mx:click>
         </mx:CheckBox>
         <mx:CheckBox id="chkInProgress" label="In Progress">
          <mx:click>
           <![CDATA[
            chkCompleted.selected = false;
            chkInProgress.selected = true;
           ]]>
          </mx:click>
         </mx:CheckBox>
        <mx:Button label="Show Report">
         <mx:click>
          <![CDATA[
           if(ddlDir.selectedIndex<1 || ddlSec.selectedIndex<1)
           {
            Alert.show('Please select a Directorate & Section');
           }else
           {
            wsExec.GetExecSummary2(ddlDir.selectedItem['data'],ddlSec.selectedItem['data'],chkInProgr ess.selected,dtFrom.selectedDate,dtTo.selectedDate);
           }
          ]]>
         </mx:click>
        </mx:Button>
      </mx:HBox>
      <mx:DataGrid id="dg" width="100%" rowCount="12"  visible="false"/>
      </mx:Application>