Getting Started

The dndDataGrid component is very easy to setup. In fact we can do it simply in 5 minutes.

The datagrid is made up of rows and columns. Each individual column in a row is called a cell. The datagrid uses an associative array to layout the content of each row. An associative array is an array made up of objects. The array is assigned to the dataProvider property. When the datagrid receives an associative array it displays the associative array data.

If you have an array like this:

var myArray = [{first_name:"Shasta",last_name:"Perez"},{first_name:"Fresca",last_name:"Estaban"}];
dg.dataProvider = myArray;

Then the grid will look like this:

The datagrid reads the properties in the objects and generates the columns from them. Each property gets it's own column. These columns can be accessed through the columns array. 

// this references the first column
dg.columns[0]

In some situations you will have an object that contains more properties than you want to show. What if you do not want to show all the properties in your datagrid? In this situation you can use the columnNames array. This property prevents the datagrid from showing any other columns except the ones you specify.

var myArray = [{first_name:"Shasta",last_name:"Perez"},{first_name:"Fresca",last_name:"Estaban"}];
dg.columnNames = ["first_name"];
dg.dataProvider = myArray;

Will cause the grid to look like this:

You will notice that the default width does not always show the full header text. We can use the columns width property to stretch the column out. 

var myArray = [{first_name:"Shasta",last_name:"Perez"},{first_name:"Fresca",last_name:"Estaban"}];
dg.columnNames = ["first_name"];
dg.columns[0].width = 100;
dg.dataProvider = myArray;

Will cause the grid to look like this:

After you set up the source of the datagrid content you may want to change the names of the header text. You can do that by setting the columns.headerText property. This property is part of the DataGridColumn that every column is made up of 

var myArray = [{first_name:"Shasta",last_name:"Perez"},{first_name:"Fresca",last_name:"Estaban"}];
dg.columnNames = ["first_name", "last_name"];
dg.columns[0].headerText = "First Name";
dg.columns[1].headerText = "Last Name";
dg.columns[0].width = 100;
dg.columns[1].width = 100;
dg.dataProvider = myArray;

Notice the datagrid header text:

The rename feature allows you to edit the text. The Macromedia DataGrid has a built in editable property for the datagrid and columns. The rename feature is a separate way to edit the cell data. It is neither better or worse but it is available as alternative. To use this feature we need to set the name of the labelField.

var myArray = [{first_name:"Shasta",last_name:"Perez"},{first_name:"Fresca",last_name:"Estaban"}];
dg.columnNames = ["first_name", "last_name"];
dg.columns[0].headerText = "First Name";
dg.columns[1].headerText = "Last Name";
dg.columns[0].width = 100;
dg.columns[1].width = 100;
dg.labelField = "first_name";
dg.dataProvider = myArray;

It is common to want to show images or movieclips in a datagrid. For this we must use a cell renderer. A cell renderer gives you the ability to design the look and feel of the datagrid cell. A cell is the column space inside the row of the datagrid. You are able to layout and position the elements in the cell by attaching movieclips or components with ActionScript code.

Using a cellrender you can add icons to your datagrid. In this picture we have also enabled alternating row colors.

An example of setting up a cellrender has been included in the example folder.

We can make an working datagrid file in 5 minutes like the ones described above,

  1. Create a new project and drag the dndDataGrid component to the stage and give it the instance name "theDataGrid".
  2. Save the file as datagrid_example.fla
  3. Now go into the actions panel on frame 1. Do not go into the actions for the dndDataGrid but for the frame.

    Type in this code and follow along
    // create the associative array for the datagrid
var myArray = [{first_name:"Shasta",last_name:"Perez"},{first_name:"Fresca",last_name:"Estaban"}];
// show the first_name and last_name columns in that order
theDataGrid.columnNames = ["first_name", "last_name"];
    // set the column header text
    theDataGrid.columns[0].headerText = "First Name";
    theDataGrid.columns[1].headerText = "Last Name";
    // set the column width
theDataGrid.columns[0].width = 100;
theDataGrid.columns[1].width = 100;
// assign the associate array and assigning it to the datagrid
theDataGrid.dataProvider = myArray;

Test the movie. Try dragging and dropping. Try double-clicking on a item's label. There is a similar finished example of this tutorial in the examples folder.

The dndDataGrid has many more features and benefits. Many examples are included and the help documentation provides numerous code snippets.

More information is available on the dndDataGrid through the help files included with the distribution and online. It is extended off the Macromedia DataGrid component and inherits all of it features. You can also learn and follow any Macromedia DataGrid example.

Numerous examples have been included and will show you how to do the following:

It also comes with drag and drop classes. These allow you to drag and drop a movieclip onto a dndDataGrid and insert new items to the grid. You can also use these classes to drag and drop a movieclip onto another movieclip and generate events. View the "drag & drop from a movieclip to a grid" example to see this process in action.

© Drumbeat Insight 2005 - 2006