Spark Datagrid in Mobile – Basics Part 1

Here is the code created to use Spark DataGrid in Mobile application. The new Spark Datagrid gives so much freedom to a designer that it can revamp the entire look and feel of a datagrid. Although ADOBE discourages the use of Datagrid in Mobile application, I decided to give it a go just for exploring purpose.

Let’s jump on the example directly.

The Example is a Checklist for your day to day work. This article is the first installment of the entire series of Checklist application development. Here, I will add the contents in the datagrid at runtime which includes checkbox and a text.

Here, I have a mobile project with a Datagrid named “dgTaskGrid”.

<s:DataGrid id="dgTaskGrid" skinClass="skins.DatagridSkin"
					width="100%" height="100%"
					 verticalScrollPolicy="on" />

Let’s create an arrayCollection “taskItems” in the script part, which will be a Dataprovider for the Grid .

private var taskItems : ArrayCollection = new ArrayCollection();

In the declarations tab, I have a ArrayList named “checkList” which will have a two GridColumn child inside it.

<s:ArrayList id="checkList">
	<s:GridColumn width="50">
		<s:itemRenderer>
		<fx:Component>
			<s:GridItemRenderer textAlign="center" >
				<s:CheckBox label="" selected="{data.isFinished}" horizontalCenter="0"/>
			</s:GridItemRenderer>
			</fx:Component>
				</s:itemRenderer>
			</s:GridColumn>
			<s:GridColumn headerText=""
				  dataField="text"/>
		</s:ArrayList>

I have added checkbox component in the GridItemRenderer of the first column and second column will represent my text for the new task to be added.

I need to set the dataProvider and columns property of the grid “dgTaskGrid” to feed in the data. So updated Datagrid will have following code.

<s:DataGrid id="dgTaskGrid"
	    skinClass="skins.DatagridSkin"
	    width="100%" height="100%"
	    dataProvider="{taskItems}"
	    columns="{checkList}"
	    verticalScrollPolicy="on" />

If you look closely to my sample application, I am adding a row in the Datagrid at rumtime when I click the “Add” button. All I have to do is create an object which will include my new task text. Following is the code of the same.

protected function btnAddTask_clickHandler(event:MouseEvent):void
{
	var taskItem : Object = new Object();
	taskItem.text = txtTaskName.text;
	taskItem.isFinished = false;
	taskItems.addItem(taskItem);
	txtTaskName.text = "";
}

This includes pretty much everything to display the newly added task in the Datagrid.

Now, something about the styling part where I don’t want to show the usual look of the datagrid that includes the rows and columns.

For this purpose I have created a styleClass for the spark Datagrid where I have disable the following skin.

-        columnSeparator

-        rowSeparator

-        headerSeparator

Moreover, I  don’t have anything to show in the header part of the grid. So I am just setting the visible property of ”GridColumnHeaderGroup” to make it disappear.

That’s it. You can see how the application looks in the below screen shot when add a list of tasks to be completed.