You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2019/12/12 23:47:04 UTC

[royale-asjs] 03/42: jewel-datagrid: new DataGrid classes for Jewel

This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git

commit 567a844922a21964429d53317762a25b2156ec25
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Nov 26 18:15:25 2019 +0100

    jewel-datagrid: new DataGrid classes for Jewel
---
 .../projects/Jewel/src/main/royale/JewelClasses.as |   7 +
 .../royale/org/apache/royale/jewel/DataGrid.as     |   4 -
 .../royale/jewel/beads/layouts/DataGridLayout.as   | 180 +++++++++++++
 .../beads/models/DataGridPresentationModel.as      |  88 +++++++
 .../royale/jewel/beads/views/DataGridView.as       | 279 +++++++++++++++++++++
 .../supportClasses/datagrid/DataGridColumn.as      |  16 +-
 .../datagrid/DataGridColumnChangePropagator.as     |  87 +++++++
 .../supportClasses/datagrid/DataGridColumnList.as  |  77 ++++++
 .../supportClasses/datagrid/DataGridListArea.as    |  35 +++
 9 files changed, 761 insertions(+), 12 deletions(-)

diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index 7eb7101..e27ee9b 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -42,6 +42,8 @@ package
         import org.apache.royale.jewel.beads.models.WizardModel; WizardModel;
         import org.apache.royale.jewel.beads.models.WizardStep; WizardStep;
         import org.apache.royale.jewel.beads.models.PopUpModel; PopUpModel;
+        import org.apache.royale.jewel.beads.models.ListPresentationModel; ListPresentationModel;
+        import org.apache.royale.jewel.beads.models.DataGridPresentationModel; DataGridPresentationModel;
 
         import org.apache.royale.jewel.beads.controllers.PopUpMouseController; PopUpMouseController;
         import org.apache.royale.jewel.beads.controllers.SpinnerMouseController; SpinnerMouseController;
@@ -110,6 +112,11 @@ package
         import org.apache.royale.jewel.supportClasses.formitem.FormItemLayoutProxy; FormItemLayoutProxy;
         import org.apache.royale.jewel.supportClasses.wizard.WizardLayoutProxy; WizardLayoutProxy;
         import org.apache.royale.jewel.supportClasses.button.SelectableButtonBase; SelectableButtonBase;
+        
+        import org.apache.royale.jewel.beads.views.DataGridView; DataGridView;
+        import org.apache.royale.jewel.supportClasses.datagrid.DataGridColumnList; DataGridColumnList;
+        import org.apache.royale.jewel.supportClasses.datagrid.DataGridColumnChangePropagator; DataGridColumnChangePropagator;
+        import org.apache.royale.jewel.beads.layouts.DataGridLayout; DataGridLayout;
 
         import org.apache.royale.jewel.supportClasses.util.positionInsideBoundingClientRect; positionInsideBoundingClientRect;
 
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DataGrid.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DataGrid.as
index cd76f93..37f8f75 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DataGrid.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DataGrid.as
@@ -59,10 +59,6 @@ package org.apache.royale.jewel
 			super();
 			
 			typeNames = "jewel datagrid";
-			
-			// set a reasonable default size
-			width = 200;
-			height = 200;
 		}
 		
 		/**
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/DataGridLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/DataGridLayout.as
new file mode 100644
index 0000000..669ee9b
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/DataGridLayout.as
@@ -0,0 +1,180 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads.layouts
+{	
+    import org.apache.royale.core.IBeadLayout;
+    import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+    import org.apache.royale.core.IDataGridModel;
+    import org.apache.royale.core.IStrand;
+    import org.apache.royale.core.IUIBase;
+    import org.apache.royale.core.UIBase;
+    import org.apache.royale.core.ValuesManager;
+    import org.apache.royale.core.layout.EdgeData;
+    import org.apache.royale.events.Event;
+    import org.apache.royale.events.IEventDispatcher;
+    import org.apache.royale.html.beads.IDataGridView;
+    import org.apache.royale.html.beads.models.ButtonBarModel;
+    import org.apache.royale.jewel.supportClasses.datagrid.IDataGridColumn;
+	
+	/**
+	 * DataGridLayout is a class that handles the size and positioning of the
+	 * elements of a DataGrid. This includes the ButtonBar used for the column
+	 * headers and the Lists that are the columns.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9
+	 */
+	public class DataGridLayout implements IBeadLayout
+	{
+		/**
+		 *  constructor
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9
+		 */
+		public function DataGridLayout()
+		{
+		}
+		
+		protected var _strand:IStrand;
+		
+		/**
+		 *  @copy org.apache.royale.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9
+		 *  @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+		 */
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			
+			(_strand as IEventDispatcher).addEventListener("widthChanged", handleSizeChanges);
+			(_strand as IEventDispatcher).addEventListener("heightChanged", handleSizeChanges);
+			(_strand as IEventDispatcher).addEventListener("sizeChanged", handleSizeChanges);
+			(_strand as IEventDispatcher).addEventListener("layoutNeeded", handleLayoutNeeded);
+		}
+		
+		/**
+		 * @royaleignorecoercion org.apache.royale.core.UIBase
+		 */
+		protected function get uiHost():UIBase
+		{
+			return _strand as UIBase;
+		}
+		
+		private function handleSizeChanges(event:Event):void
+		{
+			layout();
+		}
+		
+		private function handleLayoutNeeded(event:Event):void
+		{
+			layout();
+		}
+		
+		/**
+		 * @copy org.apache.royale.core.IBeadLayout#layout
+         * @royaleignorecoercion org.apache.royale.core.IBorderPaddingMarginValuesImpl
+         * @royaleignorecoercion org.apache.royale.core.IDataGridModel
+         * @royaleignorecoercion org.apache.royale.core.IUIBase
+		 * @royaleignorecoercion org.apache.royale.core.UIBase
+		 * @royaleignorecoercion org.apache.royale.html.beads.IDataGridView
+		 * @royaleignorecoercion org.apache.royale.html.beads.models.ButtonBarModel
+		 * @royaleignorecoercion org.apache.royale.html.supportClasses.IDataGridColumn
+		 */
+		public function layout():Boolean
+		{
+		// 	var header:IUIBase = (uiHost.view as IDataGridView).header;
+        //     // fancier DG's will filter invisible columns and only put visible columns
+        //     // in the bbmodel, so do all layout based on the bbmodel, not the set
+        //     // of columns that may contain invisible columns
+        //     var bbmodel:ButtonBarModel = header.getBeadByType(ButtonBarModel) as ButtonBarModel;
+		// 	var listArea:IUIBase = (uiHost.view as IDataGridView).listArea;
+			
+		// 	var displayedColumns:Array = (uiHost.view as IDataGridView).columnLists;
+		// 	var model:IDataGridModel = uiHost.model as IDataGridModel;
+			
+		// 	var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(_strand as IUIBase);			
+		// 	var useWidth:Number = uiHost.width - (borderMetrics.left + borderMetrics.right);
+		// 	var useHeight:Number = uiHost.height - (borderMetrics.top + borderMetrics.bottom);
+			
+		// 	var xpos:Number = 0;
+		// 	var defaultColumnWidth:Number = (useWidth) / bbmodel.dataProvider.length;
+		// 	var columnWidths:Array = [];
+			
+		// 	for(var i:int=0; i < bbmodel.dataProvider.length; i++) {
+		// 		var columnDef:IDataGridColumn = bbmodel.dataProvider[i] as IDataGridColumn;
+		// 		var columnList:UIBase = displayedColumns[i] as UIBase;
+				
+		// 		// probably do not need to set (x,y), but if the Container's layout requires it, they will be set.
+		// 		columnList.x = xpos;
+		// 		columnList.y = 0;
+				
+		// 		var columnWidth:Number = defaultColumnWidth;
+		// 		if (!isNaN(columnDef.columnWidth)) {
+		// 			columnWidth = columnDef.columnWidth;
+		// 		}
+				
+		// 		columnList.width = columnWidth;
+		// 		columnWidths.push(columnWidth);
+				
+		// 		xpos += columnList.width;
+		// 	}
+			
+		// 	bbmodel.buttonWidths = columnWidths;
+			
+		// 	COMPILE::SWF {
+        //         header.y = borderMetrics.top;
+        //         header.x = borderMetrics.left;
+		// 		header.width = useWidth;
+		// 	}
+		// 	COMPILE::JS {
+		// 		(header as UIBase).percentWidth = 100;
+		// 		listArea.element.style.position = "absolute";
+        //         if (!(uiHost.element.style.position == 'absolute' ||
+        //               uiHost.element.style.position == 'relative' ||
+        //               uiHost.element.style.position == 'fixed'))
+        //             uiHost.element.style.position = 'relative';
+		// 	}
+		// 	// header's height is set in CSS
+			
+        //     listArea.y = header.height + header.y;
+		// 	COMPILE::SWF {
+        //         listArea.x = borderMetrics.left;
+		// 		listArea.width = useWidth;
+		// 	}
+		// 	COMPILE::JS {
+		// 		(listArea as UIBase).percentWidth = 100;
+		// 	}
+		// 	listArea.height = useHeight - header.height;
+			
+		// 	header.dispatchEvent(new Event("layoutNeeded"));
+		// 	listArea.dispatchEvent(new Event("layoutNeeded"));
+			
+			return true;
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DataGridPresentationModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DataGridPresentationModel.as
new file mode 100644
index 0000000..b1df6fd
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DataGridPresentationModel.as
@@ -0,0 +1,88 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads.models
+{
+	import org.apache.royale.core.IDataGridPresentationModel;
+	import org.apache.royale.core.IStrand;
+	import org.apache.royale.events.Event;
+	
+	/**
+	 *  The DataGridPresentationModel class contains the data to label the columns
+	 *  of the org.apache.royale.html.DataGrid along with the height of the rows. 
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.0
+	 */
+	public class DataGridPresentationModel extends ListPresentationModel implements IDataGridPresentationModel
+	{
+		/**
+		 *  constructor.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function DataGridPresentationModel()
+		{
+			super();
+			
+			separatorThickness = 1;
+		}
+		
+		private var _columnLabels:Array;
+		
+		/**
+		 *  The labels for each column.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get columnLabels():Array
+		{
+			return _columnLabels;
+		}
+		public function set columnLabels(value:Array):void
+		{
+			if (value != _columnLabels) {
+				_columnLabels = value;
+				dispatchEvent(new Event("columnsChanged"));
+			}
+		}
+		
+		private var _strand:IStrand;
+		
+		/**
+		 *  @copy org.apache.royale.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		override public function set strand(value:IStrand):void
+		{
+			_strand = value;
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DataGridView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DataGridView.as
new file mode 100644
index 0000000..5f4677a
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DataGridView.as
@@ -0,0 +1,279 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads.views
+{
+	import org.apache.royale.core.IBead;
+	import org.apache.royale.core.IBeadModel;
+	import org.apache.royale.core.IBeadView;
+	import org.apache.royale.core.IChild;
+	import org.apache.royale.core.IDataGrid;
+	import org.apache.royale.core.IDataGridModel;
+	import org.apache.royale.core.IDataGridPresentationModel;
+	import org.apache.royale.core.ILayoutChild;
+	import org.apache.royale.core.IParent;
+	import org.apache.royale.core.IUIBase;
+	import org.apache.royale.core.ValuesManager;
+	import org.apache.royale.debugging.assert;
+	import org.apache.royale.events.Event;
+	import org.apache.royale.events.IEventDispatcher;
+	import org.apache.royale.html.DataGridButtonBar;
+	import org.apache.royale.html.beads.GroupView;
+	import org.apache.royale.html.beads.IDataGridView;
+	import org.apache.royale.html.beads.layouts.ButtonBarLayout;
+	import org.apache.royale.jewel.supportClasses.datagrid.IDataGridColumn;
+	import org.apache.royale.html.supportClasses.IDataGridColumnList;
+	import org.apache.royale.jewel.supportClasses.Viewport;
+
+    /**
+     *  The DataGridView class is the visual bead for the org.apache.royale.jewel.DataGrid.
+     *  This class constructs the items that make the DataGrid: Lists for each column and a
+     *  org.apache.royale.jewel.ButtonBar for the column headers.
+     *
+     *  @viewbead
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.9.7
+     */
+    public class DataGridView extends GroupView implements IBeadView, IDataGridView
+    {
+        /**
+         *  constructor.
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.7
+         */
+        public function DataGridView()
+        {
+            super();
+        }
+
+        private var _header:DataGridButtonBar;
+        private var _listArea:IUIBase;
+
+        private var _lists:Array;
+
+        /**
+         * An array of List objects the comprise the columns of the DataGrid.
+         */
+        public function get columnLists():Array
+        {
+            return _lists;
+        }
+
+        /**
+         * The area used to hold the columns
+         *
+         */
+        public function get listArea():IUIBase
+        {
+            return _listArea;
+        }
+
+        /**
+         * Returns the component used as the header for the DataGrid.
+         */
+        public function get header():IUIBase
+        {
+            return _header;
+        }
+
+        public function refreshContent():void
+        {
+            handleInitComplete(null);
+        }
+
+        /**
+         * @private
+         * @royaleignorecoercion org.apache.royale.core.IDataGridModel
+         * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+         * @royaleignorecoercion org.apache.royale.core.IBead
+         * @royaleignorecoercion org.apache.royale.core.IBeadModel
+         * @royaleignorecoercion org.apache.royale.core.IChild
+         * @royaleignorecoercion org.apache.royale.core.ILayoutChild
+         * @royaleignorecoercion org.apache.royale.core.IUIBase
+         * @royaleignorecoercion org.apache.royale.html.DataGrid
+         */
+        override protected function handleInitComplete(event:Event):void
+        {
+            var host:IDataGrid = _strand as IDataGrid;
+
+            // see if there is a presentation model already in place. if not, add one.
+            var sharedModel:IDataGridModel = host.model as IDataGridModel;
+            IEventDispatcher(sharedModel).addEventListener("dataProviderChanged", handleDataProviderChanged);
+            IEventDispatcher(sharedModel).addEventListener("selectedIndexChanged", handleSelectedIndexChanged);
+
+            var columnContainerClass:Class = ValuesManager.valuesImpl.getValue(host, "columnContainerClass") as Class;
+            assert(columnContainerClass != null,"columnContainerClass for DataGrid must be set!")
+            _header = new columnContainerClass() as DataGridButtonBar;
+            // header's height is set in CSS
+            _header.percentWidth = 100;
+            _header.dataProvider = sharedModel.columns;
+            _header.labelField = "label";
+            sharedModel.headerModel = _header.model as IBeadModel;
+
+            var listAreaClass:Class = ValuesManager.valuesImpl.getValue(host, "listAreaClass") as Class;
+            trace("listAreaClass: " + listAreaClass);
+            assert(listAreaClass != null,"listAreaClass for DataGrid must be set!")
+            _listArea = new listAreaClass() as IUIBase;
+            (_listArea as ILayoutChild).percentWidth = 100;
+
+            if (sharedModel.columns)
+                createLists();
+
+            var columnLayoutClass:Class = ValuesManager.valuesImpl.getValue(host, "columnLayoutClass") as Class;
+            assert(columnLayoutClass != null,"columnLayoutClass for DataGrid must be set!")
+            var bblayout:ButtonBarLayout = new columnLayoutClass() as ButtonBarLayout;
+            _header.addBead(bblayout as IBead);
+            _header.addBead(new Viewport() as IBead);
+            host.strandChildren.addElement(_header as IChild);
+
+            host.strandChildren.addElement(_listArea as IChild);
+
+            handleDataProviderChanged(event);
+
+            host.addEventListener("widthChanged", handleSizeChanges);
+            host.addEventListener("heightChanged", handleSizeChanges);
+
+            host.dispatchEvent(new Event("dataGridViewCreated"));
+        }
+
+        /**
+         * @private
+         */
+        private function handleSizeChanges(event:Event):void
+        {
+            _header.dispatchEvent(new Event("layoutChanged"));
+            _listArea.dispatchEvent(new Event("layoutChanged"));
+        }
+
+        /**
+         * @private
+         */
+        protected function handleDataProviderChanged(event:Event):void
+        {
+            var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
+            for (var i:int=0; i < _lists.length; i++)
+            {
+                var list:IDataGridColumnList = _lists[i] as IDataGridColumnList;
+                list.dataProvider = sharedModel.dataProvider;
+            }
+            host.dispatchEvent(new Event("layoutNeeded"));
+        }
+
+        /**
+         * @private
+         * @royaleignorecoercion org.apache.royale.core.IDataGridModel
+         * @royaleignorecoercion org.apache.royale.html.supportClasses.IDataGridColumnList
+         */
+        private function handleSelectedIndexChanged(event:Event):void
+        {
+            var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
+            var newIndex:int = sharedModel.selectedIndex;
+
+            for (var i:int=0; i < _lists.length; i++)
+            {
+                var list:IDataGridColumnList = _lists[i] as IDataGridColumnList;
+                list.selectedIndex = newIndex;
+            }
+        }
+
+        /**
+         * @private
+         * @royaleignorecoercion org.apache.royale.core.IDataGridModel
+         * @royaleignorecoercion org.apache.royale.html.supportClasses.IDataGridColumnList
+         */
+        private function handleColumnListChange(event:Event):void
+        {
+            var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
+            var list:IDataGridColumnList = event.target as IDataGridColumnList;
+            sharedModel.selectedIndex = list.selectedIndex;
+
+            for(var i:int=0; i < _lists.length; i++) {
+                if (list != _lists[i]) {
+                    var otherList:IDataGridColumnList = _lists[i] as IDataGridColumnList;
+                    otherList.selectedIndex = list.selectedIndex;
+                }
+            }
+
+            host.dispatchEvent(new Event('change'));
+        }
+
+        /**
+         * @private
+         * @royaleignorecoercion String
+         * @royaleignorecoercion Class
+         * @royaleignorecoercion org.apache.royale.core.IDataGridModel
+         * @royaleignorecoercion org.apache.royale.core.IBead
+         * @royaleignorecoercion org.apache.royale.core.IChild
+         * @royaleignorecoercion org.apache.royale.core.IParent
+         * @royaleignorecoercion org.apache.royale.core.IDataGrid
+         * @royaleignorecoercion org.apache.royale.core.IDataGridPresentationModel
+         * @royaleignorecoercion org.apache.royale.jewel.supportClasses.datagrid.IDataGridColumn
+         */
+        protected function createLists():void
+        {
+            var host:IDataGrid = _strand as IDataGrid;
+            
+            // get the name of the class to use for the columns
+            var columnClass:Class = ValuesManager.valuesImpl.getValue(host, "columnClass") as Class;
+            assert(columnClass != null,"ColumnClass for DataGrid must be set!")
+
+            var sharedModel:IDataGridModel = host.model as IDataGridModel;
+            var presentationModel:IDataGridPresentationModel = host.presentationModel as IDataGridPresentationModel;
+
+            _lists = [];
+
+            for (var i:int=0; i < sharedModel.columns.length; i++)
+            {
+                var dataGridColumn:IDataGridColumn = sharedModel.columns[i] as IDataGridColumn;
+
+                var list:IDataGridColumnList = new columnClass();
+                
+                if (i == 0)
+                {
+                    list.className = "first";
+                }
+                else if (i == sharedModel.columns.length-1)
+                {
+                    list.className = "last";
+                }
+                else
+                {
+                    list.className = "middle";
+                }
+                
+                list.id = "dataGridColumn" + i;
+                list.dataProvider = sharedModel.dataProvider;
+                list.itemRenderer = dataGridColumn.itemRenderer;
+                list.labelField = dataGridColumn.dataField;
+                list.addEventListener('change', handleColumnListChange);
+                list.addBead(presentationModel as IBead);
+
+                (_listArea as IParent).addElement(list as IChild);
+                _lists.push(list);
+            }
+
+            host.dispatchEvent(new Event("layoutNeeded"));
+        }
+    }
+}
+
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumn.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumn.as
index ead1b9c..0ef05e3 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumn.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumn.as
@@ -32,7 +32,7 @@ package org.apache.royale.jewel.supportClasses.datagrid
 	 *  @langversion 3.0
 	 *  @playerversion Flash 10.2
 	 *  @playerversion AIR 2.6
-	 *  @productversion Royale 0.9.4
+	 *  @productversion Royale 0.9.7
 	 */
 	public class DataGridColumn implements IDataGridColumn
 	{
@@ -42,7 +42,7 @@ package org.apache.royale.jewel.supportClasses.datagrid
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
+		 *  @productversion Royale 0.9.7
 		 */
 		public function DataGridColumn()
 		{
@@ -55,7 +55,7 @@ package org.apache.royale.jewel.supportClasses.datagrid
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
+		 *  @productversion Royale 0.9.7
 		 */
 		public function createColumn():IUIBase
 		{
@@ -71,7 +71,7 @@ package org.apache.royale.jewel.supportClasses.datagrid
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
+		 *  @productversion Royale 0.9.7
 		 */
 		public function get itemRenderer():IFactory
 		{
@@ -90,7 +90,7 @@ package org.apache.royale.jewel.supportClasses.datagrid
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
+		 *  @productversion Royale 0.9.7
 		 */
 		public function get columnWidth():Number
 		{
@@ -109,7 +109,7 @@ package org.apache.royale.jewel.supportClasses.datagrid
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
+		 *  @productversion Royale 0.9.7
 		 */
 		public function get label():String
 		{
@@ -129,7 +129,7 @@ package org.apache.royale.jewel.supportClasses.datagrid
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
+		 *  @productversion Royale 0.9.7
 		 */
 		public function get dataField():String
 		{
@@ -149,7 +149,7 @@ package org.apache.royale.jewel.supportClasses.datagrid
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
+		 *  @productversion Royale 0.9.7
 		 */
 		public function get className():String
 		{
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumnChangePropagator.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumnChangePropagator.as
new file mode 100644
index 0000000..4ef0ac1
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumnChangePropagator.as
@@ -0,0 +1,87 @@
+
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.supportClasses.datagrid
+{
+	import org.apache.royale.core.IBeadModel;
+	import org.apache.royale.core.IChangePropagator;
+	import org.apache.royale.core.IDataGridModel;
+	import org.apache.royale.core.ISelectionModel;
+	import org.apache.royale.core.IStrand;
+	import org.apache.royale.events.Event;
+	import org.apache.royale.events.IEventDispatcher;
+	import org.apache.royale.html.beads.IDataGridView;
+
+	/**
+	 *  The DataGridColumnChangePropagator picks up the dataProviderChanged event
+	 *  and lets the data grid columns know about it.
+	 *
+	 *  @viewbead
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9
+	 */
+	public class DataGridColumnChangePropagator implements IChangePropagator
+	{
+		public function DataGridColumnChangePropagator()
+		{
+		}
+		
+		private var _strand:IStrand;
+		/**
+		 * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+		 */
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			IEventDispatcher(_strand).addEventListener("beadsAdded", finishSetup);
+		}
+		
+		/**
+		 * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+		 */
+		protected function finishSetup(e:Event):void
+		{
+			var model:IEventDispatcher = _strand.getBeadByType(IBeadModel) as IEventDispatcher;
+			model.addEventListener('dataProviderChanged', handleDataProviderChanged);
+		}
+		
+		/**
+		 * @royaleignorecoercion org.apache.royale.core.IDataGridModel
+		 * @royaleignorecoercion org.apache.royale.core.ISelectionModel
+		 * @royaleignorecoercion org.apache.royale.html.beads.IDataGridView
+		 * @royaleignorecoercion org.apache.royale.html.supportClasses.DataGridColumnList
+		 */
+		protected function handleDataProviderChanged(e:Event):void
+		{
+			var dataGridView:IDataGridView = _strand.getBeadByType(IDataGridView) as IDataGridView;
+			var lists:Array = dataGridView.columnLists;
+			if (lists == null) return;
+			
+			var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
+			for (var i:int=0; i < lists.length; i++)
+			{
+				var list:DataGridColumnList = lists[i] as DataGridColumnList;
+				var listModel:ISelectionModel = list.getBeadByType(IBeadModel) as ISelectionModel;
+				listModel.dataProvider = sharedModel.dataProvider;
+			}
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumnList.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumnList.as
new file mode 100644
index 0000000..b8a451c
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumnList.as
@@ -0,0 +1,77 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.supportClasses.datagrid
+{
+    import org.apache.royale.jewel.List;
+    import org.apache.royale.html.supportClasses.IDataGridColumnList;
+    
+    //--------------------------------------
+    //  Events
+    //--------------------------------------
+    
+    /**
+     *  @copy org.apache.royale.core.ISelectionModel#change
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.9.7
+     */
+    [Event(name="change", type="org.apache.royale.events.Event")]
+    
+    /**
+     *  The DataGridColumnList class is the List class used internally
+     *  by DataGrid for each column.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.9.7
+     */
+	public class DataGridColumnList extends List implements IDataGridColumnList
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.7
+         */
+		public function DataGridColumnList()
+		{
+			super();
+			//typeNames = "jewel dataGridColumnList";
+		}
+		
+        /**
+         *  The DataGridColumn for this list
+         *  
+         *
+         *  @toplevel
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9
+         * 
+         *  @royalesuppresspublicvarwarning
+         */
+		public var columnInfo: DataGridColumn;
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridListArea.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridListArea.as
new file mode 100644
index 0000000..38bd6d8
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridListArea.as
@@ -0,0 +1,35 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "Licens"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.supportClasses.datagrid
+{
+    import org.apache.royale.jewel.Container;
+
+    public class DataGridListArea extends Container
+    {
+        public function DataGridListArea()
+        {
+            super();
+
+            // COMPILE::JS
+			// {
+			// 	typeNames = 'jewel dataGridListArea';
+			// }
+        }
+    }
+}
\ No newline at end of file