Skip to content

Advanced DataGrid with Summary rows & Operations

November 11, 2009

It took me a while to figure out I really don’t need to write an AdvancedDataGrid fully in AS3, since  for my case, I don’t need to dynamically create columns. So MXML was the way to go for me, and easy to figure out. I needed a summary row to be calculated on the client side of the data (which came in as XML, converted to objects and placed in an ArrayCollection).

  • When you see for example:  dataField=”visits” – visits here is actually the key of the object, so the value of that object is placed in the datafield.
  • When you see: summaryPlacement=”group” – Summary Placement is how the summary row will be displayed: Group is added to the row of the SummaryField, if you put for example:  summaryPlacement=”group first” – This will actually put it in the top group row And a extra row right underneath the Summary row. You have the option of last too.
  • When you see operation=”{operation}” – This is actually a string whether “SUM” or “AVG” of that Column, even better yet, the summaries of that column, you have other options such as MIN, MAX, or COUNT.
  • When you see labelFunction=”someFunc” – This is a returned Object that formats the content.

Code Below:

<mx:AdvancedDataGrid id="adv_dg" height="100%" textAlign="center">
    <mx:dataProvider>
       <mx:GroupingCollection id="gc" source="{arrayCollection}">
            <mx:Grouping>
               <mx:GroupingField name="name">
                 <mx:summaries>
                   <mx:SummaryRow summaryPlacement="group">
                      <mx:fields>
                          <mx:SummaryField dataField="visits" id="summaryVisits" label="visits" operation="{operation}"/>
                          <mx:SummaryField dataField="change" id="summaryChange" label="change" operation="{operation}"/>
                          <mx:SummaryField dataField="absoluteUniqueVisitors" id="summaryAbsUV" label="absoluteUniqueVisitors" operation="{operation}"/>
                          <mx:SummaryField dataField="pageViews" id="summaryPageViews" label="pageViews" operation="{operation}"/>
                          <mx:SummaryField dataField="avgPageViews" id="summaryAVGPageViews" label="avgPageViews" operation="AVG"/>
                          <mx:SummaryField dataField="timeOnSite" id="timeOnSite" label="timeOnSite" operation="AVG"/>
                          <mx:SummaryField dataField="bounceRate" id="summaryBounceRate" label="bounceRate" operation="AVG"/>
                          <mx:SummaryField dataField="newVisits" id="summaryNewVisits" label="newVisits" operation="AVG"/>
                          <mx:SummaryField dataField="visitorsPerDay" id="summaryVisPerDay" label="visitorsPerDay" operation="AVG"/>
                      </mx:fields>
                    </mx:SummaryRow>
                  </mx:summaries>
                </mx:GroupingField>
              </mx:Grouping>
            </mx:GroupingCollection>
         </mx:dataProvider>
         <mx:columns>
            <mx:AdvancedDataGridColumn dataField="name" headerText="Site Name" textAlign="left" width="172"/>
            <mx:AdvancedDataGridColumn dataField="date" headerText="Date"/>
            <mx:AdvancedDataGridColumn dataField="visits" headerText="Visits #" labelFunction="visitsFunc"/>
            <mx:AdvancedDataGridColumn dataField="change" headerText="% Change" itemRenderer="ChangeGrid" labelFunction="changeFunc" fontWeight="bold"/>
            <mx:AdvancedDataGridColumn dataField="absoluteUniqueVisitors" headerText="Abs. Unique Visitors" labelFunction="auvFunc"/>
            <mx:AdvancedDataGridColumn dataField="pageViews" headerText="Page Views" labelFunction="pageVewsFunc"/>
            <mx:AdvancedDataGridColumn dataField="avgPageViews" headerText="Avg. Page Views" labelFunction="avgPageViewFunc"/>
            <mx:AdvancedDataGridColumn dataField="timeOnSite" headerText="Time on Site" labelFunction="convertSecToTimeFormat"/>
            <mx:AdvancedDataGridColumn dataField="bounceRate" headerText="Bounce Rate" labelFunction="bounceFunc"/>
            <mx:AdvancedDataGridColumn dataField="newVisits" headerText="New Visits" labelFunction="newVisitsFunc"/>
            <mx:AdvancedDataGridColumn dataField="visitorsPerDay" headerText="Visitors Per Day"  labelFunction="visitorsDayFunc"/>
         </mx:columns>
</mx:AdvancedDataGrid>
Advertisements

From → AIR, components

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: