One of the many things people want to do when using a DataGrid is adding new rows to the data. Now this can be done a bunch of different ways. One method is using a popup to handle adding items to the collection the grid is bound to. Another method is to add another row directly into the grid. This tutorial is going to focus on the second of the above methods.
To demonstrate what we are going to build today you can check out the below example application. The demo is a basic task application which you can add to by clicking on the row entitled "Click to Add Task". Once the task has been added to the list you can modify its other attributes. That pretty much sums up the capabilities of the application. Now compared to using a popup this is slightly more complicated but I assure you that it isn't too bad. You can grab the source code for this example also.
To get things rolling we are going to throw together a very quick
interface that we will use for the demo application. You can see the
code below, but basically we have the root application tag and then a
DataGrid
which fills the rest of the area. The grid has three pretty self
explanatory columns. One item of note is that I have set
sortableColumns equal to false. I have done this because with using
a row to add more items the sorting will not work quite right unless
some extra code is added. If anyone would like to see the code needed to
make that work simply leave comment letting me know and I will cover it
in a later tutorial.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="400" height="200">
<mx:DataGrid id="grid" width="100%" height="100%"
sortableColumns="false" editable="true">
<mx:columns>
<mx:DataGridColumn headerText="Title" dataField="title" width="250" />
<mx:DataGridColumn headerText="Priority" dataField="priority" width="60" />
<mx:DataGridColumn headerText="Due Date" dataField="due"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
The next thing we will do is actually create a new class for holding the task information. This is done to make life easier for creating tasks and referencing the information inside them.
package
{
[Bindable]
public class Task
{
public function Task(title:String, priority:int, due:String)
{
this.title = title;
this.priority = priority;
this.due = due;
}
public var title:String;
public var priority:int;
public var due:String;
}
}
Now we can start building the rest of the code beginning with code to
initialize the task list. To do this I add an event handler to the main
application for the creationComplete event. The handler function for
this, init, is put inside a Script tag. Along with the function we
also need an
ArrayCollection
to hold our tasks. Inside the init function I create a new
ArrayCollection and add a few tasks to it.
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var tasks:ArrayCollection;
private function init():void
{
tasks = new ArrayCollection();
tasks.addItem(new Task("Write Tutorial", 4, "today"));
tasks.addItem(new Task("Make Breakfast", 1, "tomorrow"));
}
]]>
</mx:Script>
We also need to tell the DataGrid to use the ArrayCollection as the
dataProvider. Here is the updated opening DataGrid tag.
<mx:DataGrid id="grid" width="100%" height="100%" editable="true"
dataProvider="{tasks}" sortableColumns="false" >
Everything up to this point has been pretty normal when building a
DataGrid but now we need to start entering pieces to handle adding new
rows. A dummy row for adding new items is the first item to add. To
accomplish this we modify the init function and also add a constant to
hold the text we use for the dummy row. Following the code below I will
explain the addItem call a little bit more.
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var tasks:ArrayCollection;
private static const ADD_TASK:String = "Click to Add Task";
private function init():void
{
tasks = new ArrayCollection();
tasks.addItem(new Task("Write Tutorial", 4, "today"));
tasks.addItem(new Task("Make Breakfast", 1, "tomorrow"));
tasks.addItem({title: ADD_TASK});
}
]]>
</mx:Script>
You can see the object that is added to the collection is a simple
object with the title set to our constant. We set the title because
it is the dataField property that the first column in our grid is
using. Next up is handling two events on the DataGrid itself, these are
itemEditBeginning
and
itemEditEnd
which are handled by the functions checkEdit and editEnd
respectively. We will go over checkEdit first.
private function checkEdit(e:DataGridEvent):void
{
// Do not allow editing of Add Task row except for
// "Click to Add" column
if(e.rowIndex == tasks.length - 1 && e.columnIndex != 0)
e.preventDefault();
}
This function above does one thing. It checks to make sure if you are
adding a task by clicking the last row you are not trying to change
anything except the first column. The second function is a little more
complicated. Let's take a look at editEnd.
private function editEnd(e:DataGridEvent):void
{
// Adding a new task
if(e.rowIndex == tasks.length - 1)
{
var txtIn:TextInput = TextInput(e.currentTarget.itemEditorInstance);
var dt:Object = e.itemRenderer.data;
// Add new task
if(txtIn.text != ADD_TASK)
{
tasks.addItemAt(new Task(txtIn.text, 0, ""), e.rowIndex);
}
// Destroy item editor
grid.destroyItemEditor();
// Stop default behavior
e.preventDefault();
}
}
At the top of the function you can see that we first check to make sure
the row being edited is the last one, otherwise we just let it go do its
default behavior - which is to update the data provider. Once we know
that the last row is being changed we need to check what the text is in
the item editor. This is done by getting the itemEditorInstance and
then we can cast it as a TextInput to get the text. If the text is not
equal to the "Click to Add Task" text then we add a new task to the
tasks ArrayCollection to the current row position - this means it will
move the "Click to Add Task" item down. Then we destroy the item editor
to make sure everything it kosher and cancel the default event handling.
That is pretty much it, this tutorial outlined what it takes to dynamically add row to a DataGrid or really any list based control.
Source Files:
Hi, I tryed it. but, it didn't work. First, i put as file on the lib folder(Flex Builder pro 3). Then, i set the main.mxml file to src filder. next, i run. but, it didn't work. I need your help.
and I need your dataGrid lib. Please explain.
No libraries are needed for this, just the code. Just download or copy/paste the source from here.
Great example! thanks!
tab key functionality is whack, i am trying to figure out how to correct that, not having much luck.
what are you looking to do with the tab key? I feel it works as expected.
well, after clicking on the "add new row" and editing the first cell I would expect the tab key to shift the focus to the next cell to the right, instead the focus is sent to the next row down.
i changed the editEnd function to the following to get what I expected.
*edited for formatting
Thanks for giving us an update and sharing the your code bilbo.
hi. quick question....works really well...just wanted to know with a datagrid on a panel where would you place buttons...like print, save, open...ideally i thought it would be best to place them at the top of the panel but don't seem to be allowed to. Thanks! (and if u get the chance to describe how to delete the rows that would be gr8!)
I'm new to Flex. Will this method work for a Grid container as well? I understand that a Grid container does not have a dataProvider property instead it has a property call data. My qoal to create componments during runtime within a grid.
Thanks, Wayne
wayne, you can use a component called a repeater to do what your looking for.
I've been searching for days for an example of this... can anyone help? Thanks for your time, and all this code..
I have put up a tutorial on that exact subject.
Hi.. Thanx for your example.. It works. btu i have a problem when i change the itemEditor to CheckBox and DateField after i change the value for CheckBox and DateField the other column cannot edit anymore and cannot add new row.. can anyone help?
Thnx. Abid
Hi! Thank you for the tutorial, it's been very helpful. However, I would also like to set the 'sortableColumns' property to true even when performic this dynamic adding of rows. Could you please help me on that? Thank you, Lorena
Well, the quick answer is you have to write all your own sorting functions with specific logic to handle the add row. I can try and put something together in the next couple of days to try and demonstrate it if you think that would help.
Thank you for your suggestion. I will first try to do it myself :) I hope I can manage. Thank you
I'm new to Flex and I've been using your above example. It works great.
On top of this, I would like to add a remove/delete icon like this:
Based on this example: http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=12387
However I don't see how I can hide this icon when the row is ADD_TASK one.
Could you help?
You would have to have a little more complicated item renderer. Probably a custom component that overrides
and checks to see if the data is the ADD_TASK one. Then you can make the delete button invisible.
So I got the delete behavior working with the following code snippet -
Hi! I want to build an application similar to this. But i want to display the content of the datagrid as plane text as well. But i dont know how to data bind the datagrid. Is this possible?
Thanks
I am not quite sure what you mean, the data is show as plain text.
hi guyz! The Fattest ! i am a big fan of u.
plz help me , i am trying to make a datagrid that can provide a blank cell structure in editable mode like we have in MS Excel sheet.
any input from ur side would be helpful.
plz reply soon
gopal, this is going to be a big endeavor to do something like excel has, basically though I would start with filling the table with blank rows that have edit enabled. Then you might override the edit end events on the datagrid to handle edits and commits of information. That would at least get you started.
thanks for replying, Charlie!
m trying the same, filling the blank rows would also work anyways, rest of the work i am also trying @ my end
i am new to Flex and Actionscript, so plz keep updating us with your useful topics and tutorials
hi Fattest!
so have u done with some blank cells in datagrid? actually i am working on the same but not succeeded yet
i am suggesting you the method what i am following, in datagrid if we capture a click event or tab event for cells and wherever we click or press tab, that cell should be editable,
is it possible by adding some action script ?
Hi,
Thanks for the code, its very helpful but I am in need to have itemEditor's for one of the columns, for ex: the "due date" could be a DateField or a dropdown to select.
Can you please show how to achieve this?
Thanks.
Besides the data provider you need to create a factory for the item editor. It should be bindable.
[Bindable] private var automatedDP:ArrayCollection = new ArrayCollection();
[Bindable] private var comboFactoryAutomated:ClassFactory;
You should initialize your factory as follows:
private function initializeComboFactoryAutomated():void{
automatedDP = new ArrayCollection(booleanArray); comboFactoryAutomated = new ClassFactory(ComboBox); comboFactoryAutomated.properties= {dataProvider:automatedDP}; }
In your datagrid definition you must the factory as itemEditor:
i hope it help you florentino ...
hi I got Array from DB and I populated that Array in DataGrid.My problem is how can i save total DataGrid values not single row all the rows simultanously in DB. please can you sugggest.
Thanks In Advance, Rukku.
Rukk, I'm new to flex too.
I was thinking if you added a save function in your service layer that you called from your remote object on a button click. Then you could handle the array on the server side and should solve your problem.
Let me know if that works
Hi this blog has been super helpful. I ran into it while googling and it has come in handy several times. Lately, I have been trying to implement this dynamic row addition without any luck.
My situation is exactly like yours except that I am pulling in data from the database.
When I run my app, I get an error stating that my object constructor received no arguments when expecting 6.. error # 1063. After that my grid appears with no data.
When I comment out my constructor the data loads properly, except in the Add task row I am only able to edit the column with the add task.
I am lost, the data seems to be trying to go through the constructor without success but I haven't been able to get to it using the debugger.
Any thoughts?
Thanks, Samuel M.
I reworked my code and got it working, It turns out that I didn't have to mirror my PHP class exactly (in terms of the constructor, since you can't pass more than one item when creating... well you could but this was not how I solved my issue)
So basically my php class constructor had more parameters than my flex one did.
Did anyone faced this issue: itemEditEnd event gets fired twice ?
Very new to flex so I don't know if this will make any sense. I am trying to create several dynamic data grids per form and I was wondering if there is a way to handle this without hard coding in the grids? is there a property that will give me the ID for the grids that I can use in the commands i.e. @id.destroyItemEditor(); where @id would be the a variable containing the control name?
Thanks for the code. I got the project to work and even added columns and changed the column names. My question: now that I've added data, how can it be saved so more rows and more data added and saved?
hi friends, iam new to flex, this blog is nice and reply is good, i had a task in the proj, that i get data and columns names dynamically and able to populate to the Dgrid, but the prob is ,i want to add 2 columns with contains textbox and checkbox, for each row , un able to do that dynamically , num of cols and data is unknown,intailizing grid in actionscript. here is my code snippet:
for the reportdatagrid i want to add checkboxes under the Check column, columnlistdata is data for the columns and selectedcolumns are the headers fro the dg waiting for the suggetions , thanks kiran
Tell how to do dynamic pagination in flex
1 2 3 4 5 6 import mx.collections.ArrayCollection; import mx.events.ItemClickEvent; private var aryTotalCollection:ArrayCollection; [Bindable] private var aryCurrentCollection:ArrayCollection; private var pageSize:int =10; private var startIndex:int =0; private var endIndex:int =0; private function onInit():void { aryTotalCollection = new ArrayCollection(); var obj:Object; for(var i:int =1;i\<=100 ;i++) { obj = new Object(); obj.LabelText = "LabelText "+i.toString(); obj.LabelData = "LabelData "+i.toString(); aryTotalCollection.addItem(obj); } } private function onItemClick(evt:ItemClickEvent):void { endIndex = (myTogglebar.selectedIndex +1)*10; startIndex = endIndex - pageSize; if(startIndex \< 0) { startIndex = 0; } aryCurrentCollection = new ArrayCollection(aryTotalCollection.toArray().slice(startIndex,endIndex)); }
is there a version of this example that works with FlashBuilder 4? (the example is exactly what I was looking for, but doesn't compile)
hi all
how to crate spreadsheet in flex by using datagrid?
hi All ...Will u plz help me i want to add an image in dynamic Datagrid grid . For Ex- like there is one column header name is EDIT and i want to add image of edit pic dinamicaly in all rows.
Hi fellow Anonymous,
To add an image to a row, you need an itemRenderer for the image column like this (sorry for the ugly code listing):
override public function set data(value:Object):void { if(value != null) { super.data = value; dgImage.source = value.source; } }
Hi your most excellent and helpful Fattest !
I was hoping you might have some insights on 'cell-aware' datagrid drag-n-drop.
I have a data grid that is built dynamically and visually by adding columns and rows via drag/drop from lists.
Once the columns and rows are added, I need to drag/drop images into cells of extant grid rows/columns, not create new rows or put into 'next available' cell of a row.
list A = Column Builder (drag/drop from list to build columns)
list B = Row Builder (drag/drop from list to build rows, with column 1 as the row label)
list C = Cell Contents (drag an image into any cell of an existing row except first column)
The DragEvent does not appear to have knowledge of dataGrid columns, only rows.
It is easy to add images to cells by using click events from the source Image list and the dataGrid, but not a good interaction design since users are drag/dropping the rest of the grid.
Will I need to create a custom DataGrid for 'cell aware' drag and drop ? if so, any pointers on where to start looking in the DataGrid code would be most appreciated.
Thanks !!!
great job friends.. this post ss very useful
in flex 4.5 how I can to add rows dinamically???? please help me??? I don't know how use itemEditorBeginning in flex 4.5 with spark datagrid....
How can I do this with XML as the bounded data provider. I need to display an image in the last column where there are blank rows in the dataGrid. Here is my mxml xode:
For example, when an image is found in the XML from "imageURL" (last column) is displays it. I need to fill in the rest of the column's blank rows to show an image that say's "No Image" or "Add Image". This XML is loaded from the server, so I can't modify it in Flex.
Sorry, code here:
thank you, your tutorials are the best you can find online
How do we specify color of newly added rows.
Suppose I have a datagrid with 4 rows. Suppose I want to add 2 more rows at index 1. The color of newly added rows should be red.
Can this be done in Flex Datagrid or any other component or any other way?
Any help will be highly appreciated. This is pretty urgent for me.
Excellent article and example. I couldn't find anything that made sense in any book I read. Your example and code were perfect
Thanks
This blog was of great help. I wanted to figure out a way to validate the entered text on changing focus, is there a way?
Hi Friend
Great example
works great on its own but when I start adding other components like other text Inputs it stops working I think it a conflict of versions I,m using Flex 4.5 so the data grid feature are depreciated so you have to use the mx version of the grid this causes the Text Inputs to clash is there a new version or how can we get this to work with the spark components.
Hope this makes sense .
Thanks in advance
Hi Fattest,
Can you please provide the code to disable auto-sorting? I want the sort to work only when the user clicks the column headers, not when new rows are added or when a value is edited.
Thanks!
This articel was of great help
http://sharepointsolution2010.blogspot.com/2012/01/situation-silverlight-datagrid-to-given.html