datagrid adding column data

[davej]

I have a datagrid it has several columns and rows. The columns have numbers. What I need to do is add the total of the each column in a new row. Much like a simple spread sheet add column function. I cant seem to find any info on doing this? Any help would be great.

thanx dave

[springframework]

you could do the calculation in your dataprovider.

my question is how do u change text color of a single entry?

[Jim Freer]

If you are content with displaying the total on the top or bottom row then you might add an element to your data provider to represent the total as springframework has indicated. Of course if the number of rows exceeds the viewable rows then you would have to scroll to the top or bottom to see the total.

A while ago I played around with forcing the bottom viewable row to always show the total. There are a number of problems with this approach and I don’t think it’s worth the effort.

I came up with 3 alternative approaches which I guess aren’t very ingenious:

1) In Header
2) Data Tip
3) Below the DataGrid

As it turns out I was working on an example where I could tack in how to do these. (I will be using the 3rd technique). Sorry for the overly large example, but it just so happens to fit the question.

I also tacked in springframework’s question of how to change the text color of a single entry. I wrote it so the text in bottom row on one column is set to red.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
paddingTop="4"
paddingLeft="4"
paddingRight="4"
paddingBottom="4"
xmlns:local="*"
>

<mx:Panel
title="Shopping Cart 101"
height="300"
>
<mx:DataGrid
id="dataGridShoppingCart"
dataProvider="{mvXmlListCollectionCart}"
height="100%"
editable="true"
>
<mx:columns>
<mx:DataGridColumn
headerText="Id"
dataField="@id"
editable="false"
width="80"
/>
<mx:DataGridColumn
headerText="Product Name"
dataField="@productName"
editable="false"
width="200"
>
<mx:itemRenderer>
<mx:Component>
<mx:Text
render="outerDocument.onRenderProductName( event, listData, data )"
/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn
headerText="Qty"
dataField="@quantity"
textAlign="right"
width="50"
editorDataField="value"
>
<mx:itemEditor>
<mx:Component>
<mx:NumericStepper
stepSize="1"
minimum="0"
maximum="99"
/>
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
<mx:DataGridColumn
headerText="Unit Price"
dataField="@unitPrice"
editable="false"
textAlign="right"
width="80"
/>
<mx:DataGridColumn
headerWordWrap="true"
headerText="{'Total: ' + currencyFormatter.format( mvXmlListCollectionCart.total ) + '\nPrice'}"
editable="false"
labelFunction="onLabelFunctionPrice"
dataTipFunction="onDataTipFunctionPrice"
showDataTips="true"
textAlign="right"
width="120"
/>
</mx:columns>
</mx:DataGrid>
<mx:Label
id="labelTotal"
width="100%"
textAlign="right"
text="{'Total: ' + currencyFormatter.format( mvXmlListCollectionCart.total )}"
/>

</mx:Panel>

<mx:Spacer
height="20"
/>

<mx:HBox
width="100%"
>
<mx:Spacer
width="100%"
/>
<mx:Button
click="onClickButtonAdd()"
label="Add Item to Shopping Cart"
/>
<mx:Spacer
width="100%"
/>
</mx:HBox>

<local:XMLListCollectionCart
id="mvXmlListCollectionCart"
/>

<mx:CurrencyFormatter
id="currencyFormatter"
precision="2"
/>

<mx:Script>
<![CDATA[
import mx.controls.Text;
import mx.controls.listClasses.BaseListData;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.formatters.CurrencyFormatter;
import mx.collections.XMLListCollection;

// ---------------------------------------------------------------------
// onClickButtonAdd
// ---------------------------------------------------------------------

private function onClickButtonAdd
()
:void
{
var lvXmlListCollection:XMLListCollection
= dataGridShoppingCart.dataProvider as XMLListCollection;

lvXmlListCollection.addItem
( CartItemGenerator.getRandomCartItemXML() );

} // onClickButtonAdd

// ---------------------------------------------------------------------
// onDataTipFunctionPrice
// ---------------------------------------------------------------------

private function onDataTipFunctionPrice
( avObject :Object )
:String
{
var lvCurrencyFormatter:CurrencyFormatter
= new CurrencyFormatter();

lvCurrencyFormatter.precision = 2;

var lvTotal:Number = mvXmlListCollectionCart.total;

return "Total: " + lvCurrencyFormatter.format( lvTotal );

} // onDataTipFunctionPrice

// ---------------------------------------------------------------------
// onLabelFunctionPrice
// ---------------------------------------------------------------------

private function onLabelFunctionPrice
( avXml :XML,
avDataGridColumn :DataGridColumn )
:String
{
var lvCurrencyFormatter:CurrencyFormatter
= new CurrencyFormatter();

lvCurrencyFormatter.precision = 2;

return lvCurrencyFormatter.format
( mvXmlListCollectionCart.getPrice( avXml ) );

} // onLabelFunctionPrice

// ---------------------------------------------------------------------
// onRenderProductName
// ---------------------------------------------------------------------

internal function onRenderProductName
( avEvent :Event,
avListData :BaseListData,
avObject :Object )
:void
{
var lvDataGrid:DataGrid = avListData.owner as DataGrid;

var lvXmlListCollection:XMLListCollection
= lvDataGrid.dataProvider as XMLListCollection;

var lvXml:XML = avObject as XML;

var lvColor:uint = 0;

if( lvXmlListCollection.getItemIndex( lvXml )
==
lvXmlListCollection.length - 1 )
{
lvColor = 0xFF0000;
} // if

var lvText:Text = avEvent.target as Text;

lvText.setStyle( "color", lvColor );

lvText.validateNow();

} // onRenderProductName

]]>
</mx:Script>
</mx:Application>


Remainder of code follows in next reply.


Jim Freer
http://freerpad.blogspot.com/

[Jim Freer]

From preceding reply:

XMLListCollectionCart.as:

package
{
import mx.collections.XMLListCollection;
import mx.events.CollectionEvent;

public class XMLListCollectionCart
extends XMLListCollection
{
// ---------------------------------------------------------------------
// Private Member Variables
// ---------------------------------------------------------------------

private var mvTotal :Number = 0;

// ---------------------------------------------------------------------
// Constructors
// ---------------------------------------------------------------------

public function XMLListCollectionCart
( avXmlList :XMLList = null )
{
super( avXmlList );

addEventListener
( CollectionEvent.COLLECTION_CHANGE, onCollectionChange );

} // Constructor

// ---------------------------------------------------------------------
// getPrice
// ---------------------------------------------------------------------

public function getPrice
( avObject :Object )
:Number
{
var lvXml:XML = avObject as XML;

return lvXml.@quantity * lvXml.@unitPrice;

} // getPrice

// ---------------------------------------------------------------------
// get total
// ---------------------------------------------------------------------

[Bindable]
public function get total
()
:Number
{
return mvTotal;

} // get total

protected function set total
( avTotal :Number )
:void
{
mvTotal = avTotal;

} // set Total

// ---------------------------------------------------------------------
// onCollectionChange
// ---------------------------------------------------------------------

private function onCollectionChange
( avCollectionEvent :CollectionEvent )
:void
{
var lvTotal:Number = 0;

for each( var lvXml:XML in this )
lvTotal += getPrice( lvXml );

total = lvTotal;

} // onCollectionChange

} // class XMLListCollectionCart
} // package


CartItemGenerator:

package
{
public class CartItemGenerator
{
// ---------------------------------------------------------------------
// getRandomCartItemXML
// ---------------------------------------------------------------------

public static function getRandomCartItemXML
()
:XML
{
var lvXml:XML = <item/>;

lvXml.@id = getRandomId();
lvXml.@productName = getRandomProductName();
lvXml.@quantity = getRandomQuantity();
lvXml.@unitPrice = getRandomQPrice();

return lvXml;

} // getRandomCartItemXML

// ---------------------------------------------------------------------
// getRandomId
// ---------------------------------------------------------------------

private static function getRandomId
()
:String
{
var lvId:String
= "00000000" + int( Math.random() * 100000000 );

return lvId.substr( lvId.length - 8 )

} // getRandomId

// ---------------------------------------------------------------------
// getRandomProductName
// ---------------------------------------------------------------------

private static function getRandomProductName
()
:String
{
var lvNames1:Array
= ["Acme", "Ajax", "AAA", "American", "Global",
"TransGlobal", "Worldly", "A1"]

var lvNames2:Array
= ["Apparatus", "Appliance", "Contraption", "Contrivance",
"Device", "Doodad", "Doohickey", "Gizmo", "Invention",
"Object", "Thing", "Thingamabob", "Thingamajig", "Tool",
"Whatchamacallit" ]

var lvNames3:Array
= ["MX", "LS", "LE", "SE", "GP", "LSI",
"NE", "HD", "AMX", "SPF", "XXX" ];

var lvNames4:Array
= ["360", "-80", "96", "101", "-Spitfire" ];

return getRandomString( lvNames1 )
+ " "
+ getRandomString( lvNames2 )
+ " "
+ getRandomString( lvNames3 )
+ getRandomString( lvNames4 );

} // getRandomProductName

// ---------------------------------------------------------------------
// getRandomQPrice
// ---------------------------------------------------------------------

private static function getRandomQPrice
()
:String
{
var lvUint:uint = 100 + uint( Math.random() * 1000 );
var lvArray:Array = lvUint.toString().split( "" );
lvArray.splice( lvArray.length-2, 0, "." );

return lvArray.join( "" );

} // getRandomQuantity

// ---------------------------------------------------------------------
// getRandomQuantity
// ---------------------------------------------------------------------

private static function getRandomQuantity
()
:uint
{
return 1 + uint( Math.random() * 10 );

} // getRandomQuantity

// ---------------------------------------------------------------------
// getRandomString
// ---------------------------------------------------------------------

private static function getRandomString
( avArray :Array )
:String
{
return avArray[uint( Math.random() * avArray.length )];

} // getRandomString

} // class CartItemGenerator

} // package


Jim Freer
http://freerpad.blogspot.com/

[Jim Freer]

I copied some code to demonstrate how to set the text color of only 1 cell in a DataGrid and accidentally left in a line which serves no purpose in this case.

This line shouldn't be in the function onRenderProductName:

lvText.validateNow();

Jim
http://freerpad.blogspot.com/