You sure this worked for you? I copied over your code and it didn't do anything different...
On 2/26/06, Brendan Meutzner <[EMAIL PROTECTED]> wrote:
Jaime,
The compare function that the datagrid uses on a headerRelease and the
compare function that is called from the sortItems method are different.
When called through the sortCompareFunction property in the
DataGridColumn it is passing strings as the first two arguments, where
as it's passing objects when called from the sortItems method. So
when the function goes to compare item1 to item2 it can't compare the
objects properly.
The objects being passed is the row data from the dataprovider, so you
can get the appropriate string value from them for sorting by calling,
in your case, item1.LASTNAME or item1.FIRSTNAME , etc...
However, because you're using it on multiple columns, you won't know
exactly which string you need to get for comparison... so, I've
changed up your custom DataGrid class to expose it's currently
selected column. This way, when the sort func is called, it looks at
the currently selected column.columnName value, and uses an eval to
get the string.
Anyway, the following revised code works for me...
THEAPP
------
<?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="*"
initialize="initApp()"
creationComplete="populateDataGrid();">
<mx:Script>
<![CDATA[
var peopleList:Array;
private function initApp():Void
{
Echo.enableDebug();
Echo.info("app initiated", "brendan");
}
function populateDataGrid()
{
peopleList = new Array({LASTNAME: "Aoe", FIRSTNAME: "John", SSN: 4322},
{LASTNAME: "Doe", FIRSTNAME: "jane", SSN: 9333},
{LASTNAME: "erago", 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, item2,
columnIndex:Number):Number
{
if(typeof(item1) == "object")
{
var item1Str:String = String(eval("item1." +
dgCustGrid.currentSortCol.columnName));
var item2Str:String = String(eval("item2." +
dgCustGrid.currentSortCol.columnName));
}
else if(typeof(item1) == "string")
{
var item1Str:String = String(item1);
var item2Str:String = String(item2);
}
item1Str = item1Str.toLowerCase();
item2Str = item2Str.toLowerCase();
if (item1Str == item2Str) {
return 0;
} else if (item1Str < item2Str) {
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>
THE DATAGRID
------------
import mx.controls.gridclasses.DataGridColumn;
class CustomDataGrid extends mx.controls.DataGrid {
private var initialSortCol:Number;
private var initialSortDir:String;
public var currentSortCol:DataGridColumn;
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);
currentSortCol = getColumnAt(this.sortIndex);
if (currentSortCol.sortCompareFunction != null)
{// This is the part that doesn't do anything!
this.dataProvider.sortItems(currentSortCol.sortCompareFunction,
this.sortDirection);
}
else
{
this.dataProvider.sortItemsBy(currentSortCol.columnName,
this.sortDirection);
}
}
}
Brendan
--- In [email protected], "Jaime Bermudez"
<[EMAIL PROTECTED]> wrote:
>
> 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
Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/flexcoders/
<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
--
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
- Visit your group "flexcoders" on the web.
- To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
- Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service.
