Adding Dynamic Rows To Flex DataGrid

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.

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.

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.

We also need to tell the DataGrid to use the ArrayCollection as the dataProvider. Here is the updated opening DataGrid tag.

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.

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.

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.

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. If anyone has any questions just leave a comment.