[flexcoders] Custom DataGrid to sort items on an add

Sat, 25 Feb 2006 14:17:14 -0800

Hey Flexcoders,
 
I'm working on custom datagrid that will add items in sorted order.  Specifically, this order is determined by either the initial order defined by the developer or the last order defined by the user via header clicks.  For columns without a sortCompareFunction the code works fine.  You can verify this by sorting the columns in the below example by SSN, then adding a person to the list.  However, for columns with a sortCompareFunction defined ( i.e. names, dates, etc.), the sortItems method called on the dataProvider does not seem to do anything.  I've tried several variations on calls to sortItems - the one used below tries to follow Matt Chotin's example from another thread by utilizing the Delegate component - to no avail.  I would greatly appreciate it if someone out there could figure out how to get the sortCompare functionality to work.  I realize that the CustomDataGrid needs some more work, but once I get this functionality in I can make changes to improve the initial sorting.  I also realize that I make use of two undocumented fields in the DataGrid: sortIndex and sortDirection.

 

Here's the custom dataGrid

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

import mx.controls.gridclasses.DataGridColumn;

class CustomDataGrid extends mx.controls.DataGrid {
 var initialSortCol:Number;
 var initialSortDir:String;
 
 function CustomDataGrid() {
  this.width="100%";
  this.height="100%";
  if (initialSortCol != null) {
   this.sortIndex = initialSortCol;
  } else {
   this.sortIndex = 0;
  }
  if (initialSortDir != null) {
   this.sortDirection = initialSortDir;
  } else {
   this.sortDirection = "ASC";
  }
 }

 function addItem(dataObj:Object) {
  this.dataProvider.addItem(dataObj);

  var sortCol:DataGridColumn = getColumnAt(this.sortIndex);
  if (sortCol.sortCompareFunction != null) {// This is the part that doesn't do anything!
   this.dataProvider.sortItems(mx.utils.Delegate.create(this, sortCol.sortCompareFunction), this.sortDirection);
  } else {
   this.dataProvider.sortItemsBy(sortCol.columnName, this.sortDirection);
  }
 }
}

and here's a sample app using the datagrid:
--------------------------------------------------------------
 
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application
     pageTitle="Centive Compel" width="100%" height="100%"
    xmlns:mx=" http://www.macromedia.com/2003/mxml"
    xmlns="*"
    creationComplete="populateDataGrid();">
  <mx:Script>
  <![CDATA[ 
  var peopleList:Array;
  
  function populateDataGrid() {
   peopleList = new Array({LASTNAME: "Doe", FIRSTNAME: "John", SSN: 4322},
               {LASTNAME: "Doe", FIRSTNAME: "jane", SSN: 9333},
               {LASTNAME: "drago", FIRSTNAME: "Ivan", SSN: 2233});
  }
  
  function addPersonClick() {
   dgCustGrid.addItem({LASTNAME: txtPersonLName.text, FIRSTNAME: txtPersonFName.text , SSN: Number(txtPersonSSN.text)});
  }
  
  function deletePersonClick() {
   dgCustGrid.removeItemAt(dgCustGrid.selectedIndex);
  }
  
  public function caseInsensitiveSortFunc(item1:Object, item2:Object, columnIndex:Number):Number {
   var str1:String = String(item1).toLowerCase();
   var str2:String = String(item2).toLowerCase();
   if (str1 == str2) {
    return 0;
   } else if (str1 < str2) {
    return -1;
   } else {
    return 1;
   }
  }
  ]]>
 </mx:Script> 
 <mx:HBox width="100%" height="100%">
  <mx:Panel title="Custom DataGrid Example" width="100%" height="100%">   
   <CustomDataGrid id="dgCustGrid" dataProvider="{peopleList}" height="100%" width="100%">
    <columns>
     <mx:Array>
      <mx:DataGridColumn columnName="LASTNAME" headerText="Last Name" sortCompareFunction="caseInsensitiveSortFunc"/>
      <mx:DataGridColumn columnName="FIRSTNAME" headerText="First Name" sortCompareFunction="caseInsensitiveSortFunc"/>
      <mx:DataGridColumn columnName="SSN" headerText="SSN"/>
     </mx:Array>
    </columns>
   </CustomDataGrid>
   <mx:ControlBar width="100%">
    <mx:Button label="Delete..." click="deletePersonClick(event)" enabled="{ dgCustGrid.selectedItem != null}"/>
   </mx:ControlBar>
  </mx:Panel>
  <mx:Panel title="Add Person" width="100%" height="100%">
   <mx:FormItem direction="horizontal" label="Last Name" width="100%">
    <mx:TextInput id="txtPersonLName" width="200"/>
   </mx:FormItem>
   <mx:FormItem direction="horizontal" label="First Name" width="100%">
    <mx:TextInput id="txtPersonFName" width="200"/>
   </mx:FormItem>
   <mx:FormItem direction="horizontal" label="SSN (Last 4)" width="100%">
    <mx:TextInput id="txtPersonSSN" restrict="0-9" width="200"/>
   </mx:FormItem>
   <mx:ControlBar width="100%">
    <mx:Button label="Add" click="addPersonClick()"/>
   </mx:ControlBar>
  </mx:Panel>
 </mx:HBox> 
</mx:Application>
 
Thanks in advance!
 
Jaime


--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com



SPONSORED LINKS
Web site design development Computer software development Software design and development
Macromedia flex Software development best practice

YAHOO! GROUPS LINKS



Reply via email to