Comparable datagrid in flex

Thursday, 27 March 2008, 14:39 | Category : Flex
Tags : , ,

Using a datagrid in Flex seems very easy, but it has the inherent problem as ready to eat meal. It may not allow you to do all the modifications and may not allow you to present it in a view you desire.

A few months back i had a requirement to create a datagrid, which displayed data column wise instead row wise i.e. the datagrid was suppose to be used for comparing and viewing data across columns rather than rows. So, how do we deal with such a problem in Flex. If you are working on HTML, its easy as you can just alter the logic in the for loop printing the rows. The whole point is using multi dimension arrays.

After finding no easy way to do it in Flex, i had to use to the same programming talent to display data column wise.

As datagrid expects the dataprovider to be in the form of an Array or ArrayCollection of objects and then it iterates over these objects to display a property of these objects in each column when you use the dataField property or you can reformat your test using the labelFunction property for the column. I used a combination of programming logic and labelFunction to display the list.

Lets say we intend to display Person objects columnWise, as displayed below.comparable-table.png

Now we would receive person object from the server to the client and there is no way that you can use labelfield property or the lablefunction straight away to create such a table.

The wrokaround is to keep the person array aside and create an array of indexes equal to the number of rows that each column would have or the max. number of rows that a column could have in the whole table. So we will create an array with numbers {1,2,3,4…} each number denoting a particular row in the column. Now, iterate through the person object array and keep on adding DataGridColumn objects to the datagrid for as many Person object. So, the dataprovider to the datagrid is an array of indexes and the number of columns is equal to the number of Person objects. Assign a labelFunction to each column such that

public function getCompareLabel(item : Object, column : DataGridColumn) : String {
var cIndex : int = int(Number(column.dataField)); //this will give you the column for which you have to get data.
if (cIndex == 0)
return getRowLabel(item, column); //Now in getRowLabel just write a switch function which will give label's for each row, such as "First", "Last" etc. This gives the first column.
var person : PersonDAO = personArray[cIndex-1] as PersonDAO;
//Now from second column onwards we will get the particular person object from the dataArray and display data for a particular field accordingly.
switch(item) {
case 1 : return getCmpStr(person.firstName);
case 2 : return getCmpStr(person.lastName);
case 3 : return getCmpStr(person.age);

The output will be a table like above. Strange, isn’t it Flex is suppose to make things easier but i had to swing around the whole place to get this is in place.