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

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>