Sorting date columns in a DataGrid | Flex Examples

2 Comments

Sorting date columns in a DataGrid

by Peter deHaan on August 12, 2007

in DataGrid, ObjectUtil

Here’s an example of sorting a column of dates in a Flex DataGrid. The dates start out as Strings (such as “04/14/1980″) so you create a custom sortCompareFunction on that DataGrid column which converts the strings to dates so Flex will sort the dates in sequential order (as oppsed to string order). Hope that helps somebody out there.

I also created a little tooltip on the date column which shows the dates in a somewhat more readable form (”April 14 1980″) using the DataGridColumn object’s showDataTips and dataTipFunction properties.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/12/sorting-date-columns-in-a-datagrid/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.utils.ObjectUtil;

            private function date_sortCompareFunc(itemA:Object, itemB:Object):int {
                /* Date.parse() returns an int, but
                   ObjectUtil.dateCompare() expects two
                   Date objects, so convert String to
                   int to Date. */
                var dateA:Date = new Date(Date.parse(itemA.dob));
                var dateB:Date = new Date(Date.parse(itemB.dob));
                return ObjectUtil.dateCompare(dateA, dateB);
            }

            private function date_dataTipFunc(item:Object):String {
                return dateFormatter.format(item.dob);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object name="User A" dob="04/14/1980" />
                <mx:Object name="User B" dob="01/02/1975" />
                <mx:Object name="User C" dob="12/30/1977" />
                <mx:Object name="User D" dob="10/27/1968" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:DateFormatter id="dateFormatter" formatString="MMMM D, YYYY" />

    <mx:DataGrid id="dataGrid" dataProvider="{arrColl}">
        <mx:columns>
            <mx:DataGridColumn dataField="name"
                    headerText="Name:" />

            <mx:DataGridColumn dataField="dob"
                    headerText="Date of birth:"
                    sortCompareFunction="date_sortCompareFunc"
                    showDataTips="true"
                    dataTipFunction="date_dataTipFunc" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

Stored as a note on how to create a custom compare function in Flex

Displaying the sort arrow in a Flex DataGrid control without having to click a column | Flex Examples

Leave a comment

Displaying the sort arrow in a Flex DataGrid control without having to click a column

by Peter deHaan on February 28, 2008

in DataGrid, Sort, SortField

I’ve seen this question come up a few times recently in various forums/lists and even in my blog comments (see “Changing the default sort arrow skin on a Flex DataGrid control”).

The following example shows how you can display the sort arrow in a DataGrid control in Flex without having the user click on a column header in the DataGrid control.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="DataGrid_dataProvider_sort_fields_test">
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.collections.Sort;
            import mx.collections.SortField;

            private function init():void {
                arrColl.sort = new Sort();
                arrColl.sort.fields = [new SortField("idx", false, true)];
                arrColl.refresh();
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object idx="1" c1="One.1" c2="One.2" />
                <mx:Object idx="2" c1="Two.1" c2="Two.2" />
                <mx:Object idx="3" c1="Three.1" c2="Three.2" />
                <mx:Object idx="4" c1="Four.1" c2="Four.2" />
                <mx:Object idx="5" c1="Five.1" c2="Five.2" />
                <mx:Object idx="6" c1="Six.1" c2="Six.2" />
                <mx:Object idx="7" c1="Seven.1" c2="Seven.2" />
                <mx:Object idx="8" c1="Eight.1" c2="Eight.2" />
                <mx:Object idx="9" c1="Nine.1" c2="Nine.2" />
                <mx:Object idx="10" c1="Ten.1" c2="Ten.2" />
                <mx:Object idx="11" c1="Eleven.1" c2="Eleven.2" />
                <mx:Object idx="12" c1="Twelve.1" c2="Twelve.2" />
                <mx:Object idx="13" c1="Thirteen.1" c2="Thirteen.2" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            creationComplete="init();">
        <mx:columns>
            <mx:DataGridColumn dataField="idx" />
            <mx:DataGridColumn dataField="c1" />
            <mx:DataGridColumn dataField="c2" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

A big thanks to Rob for the heads up with the solution!

For more information, see http://bugs.adobe.com/jira/browse/SDK-14663.

–>

Good tutorial for Flex development. Shows how to apply a client side sort which in turn will affect how the data grid’s array is displayed.

Episode with Subversive AssertionFailedException

Leave a comment

I have been using Subversive as my main SVN plug-in for my instances of Eclipse both at home and at work since it is now part of the Eclipse foundation. It woks pretty much like SubEclipse which is the SVN plug-in I used since I started using Eclipse for my Flex and ColdFusion development.

I had a new unpack of Eclipse 3.4.2 Ganymede (Eclipse is not installed, just unpacked from a zip archive in case you did not know) and I needed to use SVN to check out some code. As usual I added the repository for the Subversive plug-in, clicked install and let it rip. It installed with no problem which it should and as with all plug-in installs for Eclipse, it requires an application restart. Everything is happening by the numbers thus far.

After Eclipse restarted, I proceeded to checkout an SVN project like you normally would, some of you who are attentive might have noticed something by now. Anyway I pasted the URL link into the repository URL and guess what? An Error got thrown. To those of you who saw this coming, kudos to you.

As all who had used Subversive before, the plug-in and SVN connectors are in two different repositories. From what I understand this is due to licensing issues but that is a story for another time. The point is that after you install the plug-in, you are supposed to install the connectors which I did not do.

So I thought no biggie, I will just have to install the connectors. Then my episode of getting AssetionFailedException errors kept on happening when I tried to install the connectors. So tried a different connector repository and still no dice. I was like what in the name god happened? Then I tried doing an update for all my plug-ins which is no small undertaking considering the fact that my friend here blew my home bandwidth cap and after an agonizing 11 minutes, same error came up.

At this point I felt that maybe I should just unpack a fresh Eclipse and start over but then I tought could this be a plug-in issue because Subversive ran without its dependent plug-in which perhaps caused some corruption? I closed Eclipse and fired my command prompt and did this :

c:\> cd eclipse

c:\eclipse> eclipse –clean

The clean argument passed onto Eclipse as you probably know is something used to basically start Eclipse and re-links all the plug-ins together and flushes everything save for your user preferences, at least thats what I think it does. I hoped this would flush out the corruption in my plug-ins wherever they might be.

After long waits and loads of resource consumption (note to self: running aTunes, Pidgin, Chrome and Windows Update is a bad idea when running eclipse -clean), I tried again to install my SVN connectors. Now it worked like its supposed to and then I decided to blog about this. Hope this helps somebody else who had the same issue as I did.

Useful Links :

http://www.polarion.com/products/svn/subversive/download.php

http://www.eclipse.org/subversive/

ColdFusion 9 ORM

Leave a comment

When I first heard that ColdFusion 9 will have Object Relational Mapping which is otherwise known as ORM baked in, I really did not know what to make of it. While I really did like the idea of portable SQL agnostic DAO code, I dreaded the configuration hell that I encountered with Hibernate and NHibernate. While I did have an okay experiance with the Castle Project’s ActiveRecord implementation of NHibernate, it did not feel very intuitive, at least to me.

Today I spent the better part of the day coding with the new release of ColdFusion and I was blown away with how much it has improved, particularly when used in conjunction with the Eclipse based ColdFusion Builder/Bolt IDE. I particularly love the new ColdFusion(CF) Builder IDE, it looks very polished and has code completion capabilities that felt more like Visual Studio which is a step up from cfeclipse. ColdFusion Builder also has very good integration with ColdFusion servers as it now can start, stop and monitor the ColdFusion servers which is a very big step up. Previously I had to jump between the CF Web Admin/CF Server Monitor and Eclipse/Dreamweaver when I was doing CF development which is very tedious. With this now I can do most of the stuff from within CF Builder which makes life very easy. I tried installing it on my instance of Eclipse that has Flex Builder 3 and it works great. I smell fun times on the horizon when coding apps.

Now back to the main point of this post, Adobe’s implementation of Hibernate which in true CF tradition, is very intuitive and simple. I was seriously having loads of fun playing with it. Here is some of the stuff I did today :

* I will be putting in my 2 cents/commentary on the benefits I see as comments in the code as I believe it is easier to understand that way.

Application.cfc

Application.cfc

Books.cfc

Books.cfc

Writers.cfc

Writers.cfc

index.cfm

index.cfm

Sample Output

Sample Output

As you can see above, it is is really easy to retrieve items from the database now with the new ORM framework baked in. The entityLoad(“Writers”) method basically did this :

SELECT a.*, b.* FROM Authors a INNER JOIN Books B ON A.AuthorID = B.AuthorID

Notice that now it is possible to write ColdFusion Components totally based on CFScript which is quite close to ActionScript/JavaScript/ECMAScript. I person love option of writing classes in CFScript but I still think that CFML still has its place. I know I for one prefer to loop though collections using cfloop.

I will blog more about other CF 9 ORM methods and setups in the days to come.