You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by gr...@apache.org on 2020/08/27 04:22:26 UTC

[royale-asjs] branch develop updated: Add a quick example of runtime column variations for Jewel Datagrid

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

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


The following commit(s) were added to refs/heads/develop by this push:
     new 3c594f1  Add a quick example of runtime column variations for Jewel Datagrid
3c594f1 is described below

commit 3c594f1d23cc23078e75acd21dc201c84239e5ce
Author: greg-dove <gr...@gmail.com>
AuthorDate: Thu Aug 27 09:57:54 2020 +1200

    Add a quick example of runtime column variations for Jewel Datagrid
---
 .../src/main/royale/DataGridPlayGround.mxml        | 64 ++++++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/examples/jewel/TourDeJewel/src/main/royale/DataGridPlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
index d358a07..43dadb6 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
@@ -34,6 +34,7 @@ limitations under the License.
         import org.apache.royale.html.util.getLabelFromData;
         import org.apache.royale.jewel.supportClasses.datagrid.IDataGridColumnList;
         import org.apache.royale.jewel.supportClasses.datagrid.IDataGridPresentationModel;
+		import org.apache.royale.jewel.supportClasses.datagrid.DataGridColumn;
 
         import vos.IconListVO;
         import vos.Product;
@@ -168,6 +169,34 @@ limitations under the License.
 				return item.sales + " €";
 			return getLabelFromData(column, item);
 		}
+
+		private function resequenceColumns(columnsArray:Array):Array{
+			if (columnsArray) {
+				if (columnsArray.length){
+					columnsArray.unshift(columnsArray.pop());
+				}
+			} else columnsArray = [];
+			return columnsArray;
+		}
+
+		private function isJewelCheck(val:Object):String{
+			return val.componentSet == 'Jewel'? 'yep':'nope';
+		}
+
+		private function toggleColumn(grid:DataGrid, target:DataGridColumn, insertionNeighbor:DataGridColumn):void{
+			var cols:Array = grid.columns;
+			var foundIdx:int = cols.indexOf(target);
+			if (foundIdx == -1){
+				foundIdx = cols.indexOf(insertionNeighbor);
+				if (foundIdx == -1) cols.push(target)
+				else cols.splice(foundIdx + 1, 0 ,target);
+			} else {
+				cols.splice(foundIdx,1);
+			}
+
+			grid.columns = cols;
+		}
+
 		]]>
 	</fx:Script>
 
@@ -570,6 +599,41 @@ limitations under the License.
 			</j:Card>
 		</j:GridCell>
 
+		<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+			<j:Card>
+				<j:CardHeader>
+					<html:H3 text="Column swapping" className="primary-normal"/>
+				</j:CardHeader>
+				<j:CardPrimaryContent>
+					<j:Label text="Provides example of changing column order and also removing/adding a column. "
+							 multiline="true"/>
+
+					<j:DataGrid localId="columns1Grid" width="100%" height="240" emphasis="secondary" rowHeight="42">
+						<j:beads>
+							<js:ConstantBinding
+									sourceID="listModel"
+									sourcePropertyName="iconDetailListData"
+									destinationPropertyName="dataProvider"/>
+						</j:beads>
+						<j:columns>
+							<j:DataGridColumn label="Icon"
+											  itemRenderer="itemRenderers.IconDataGridItemRenderer"/>
+							<j:DataGridColumn label="Label" dataField="label" align="center"/>
+							<j:DataGridColumn label="Is Jewel?" columnWidth="75" localId="isJewelCol1"
+											  itemRenderer="itemRenderers.CheckBoxDataGridItemRenderer"/>
+							<j:DataGridColumn label="Is Jewel?" columnWidth="75" localId="isJewelCol2"
+											  labelFunction="isJewelCheck"/>
+						</j:columns>
+					</j:DataGrid>
+				</j:CardPrimaryContent>
+				<j:CardActions>
+					<j:Button text="Resequence Columns" click="columns1Grid.columns = resequenceColumns(columns1Grid.columns)" emphasis="primary"/>
+					<j:Button text="Toggle column presence" click="toggleColumn(columns1Grid, isJewelCol2, isJewelCol1)" emphasis="primary"/>
+				</j:CardActions>
+			</j:Card>
+		</j:GridCell>
+
+
 	</j:Grid>
 
 </c:ExampleAndSourceCodeTabbedSectionContent>