Flex Datagrid: Creating a timetable - apache-flex

Question

I have some data passed into the flex via webservices, and want to create a timetable. As of current, I have a timetable but the day is a column, time is a column and so on, by mapping the datafield to those columns.
I need to flip this around and have all day columns and one time column, with each day column filter to the day property, if you get what i mean.
HOw would i go about doing this? Is there a datafield property to filter this way, or is there a better way?

Answer 1

It sounds like what you want is something similar to the Outlook calendar. You want a column for each weekday, and a row for each hour in the day.
DataGrids display the members of the collection bound to their dataProvider property as rows. However, it seems that your ArrayCollection contains value objects that correspond to an event that occurs at a specific time, rather than a time that contains an event.
I would write another value object to represent a time of day. This object would contain data members corresponding to each weekday that would hold the class name.
public class TimeOfDayVO {
public var monday:String;
public var tuesday:String;
public var wednesday:String;
public var thursday:String;
public var friday:String;
}
Then write a function that will create one of these objects for each hour in the day.
public function createTimeOfDayArray(oldArray:ArrayCollection) {
for (var hour:int = 0; hour < 24; hour++) {
var timeVO:TimeOfDayVO = new TimeOfDayVO();
newArray.addItem(timeVO);
}
for each (obj in oldArray) {
switch (obj.day) {
case "Monday":
newArray[obj.time].monday = obj.classname;
break;
//repeat for each day
}
}
}
Bind newArray to your DataGrid instead of the old array.

Answer 2

Assuming I understand what you're looking for correctly, here's what I came up with.
Basically, just create a column for each day in your datagrid and bind them to whatever value you want in your ArrayCollection. Then set the visible property for that day's column to true based on the values in the ArrayCollection. I hope this helps!
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object theClass="Class1" time="10:00" day="Monday"/>
<mx:Object theClass="Class1" time="2:00" day="Wednesday"/>
<mx:Object theClass="Class2" time="8:00" day="Tuesday"/>
<mx:Object theClass="Class3" time="9:30" day="Tuesday"/>
<mx:Object theClass="Class4" time="10:00" day="Friday"/>
<mx:Object theClass="Class4" time="12:00" day="Thursday"/>
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:DataGrid id="dataGrid"
dataProvider="{arrColl}"
width="400"
rowCount="6">
<mx:columns>
<mx:DataGridColumn dataField="theClass" />
<mx:DataGridColumn dataField="time" />
<mx:DataGridColumn headerText="Monday" dataField="time">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Label text="{data.time}" visible="{data.day == 'Monday'}" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Tuesday" dataField="time">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Label text="{data.time}" visible="{data.day == 'Tuesday'}" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Wednesday" dataField="time">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Label text="{data.time}" visible="{data.day == 'Wednesday'}" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Thursday" dataField="time">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Label text="{data.time}" visible="{data.day == 'Thursday'}" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Friday" dataField="time">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Label text="{data.time}" visible="{data.day == 'Friday'}"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Application>

Answer 3

I didn't get the problem precisely but may be it is similar to a problem I had with advanceddatagrid some time back. May be the solution by Robusto might be useful here as well. Pasting it below fo your reference.
<mx:Repeater id="rp" dataProvider="{yourArrayCollection}">
<mx:AdvancedDataGridColumns dataField="{rp.currentItem.fieldName}" visible="{rp.currentItem.show}">
</mx:Repeater>