Flex Datagrid: Creating a timetable

Question

Hi guys,

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

Hi Doron, 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> 

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>