Spark Checkbox DataGrid With Drag and Drop Support

The Spark DataGrid is almost ready to ship. We ran out of time to do some of the things MX DataGrid could do, including popular things like drag and drop of columns to change the order of the columns, and drag and drop of items to copy or move items to and from other DataGrids and Lists or within the same DataGrid.

I found some time to show how to add that to the DataGrid. I was able to do it without subclassing, which indicates that we got the public APIs right, but if you want to have multiple DataGrids in your app, I would fold the drag/drop code into a subclass anyway. In the demo, there is an empty list below the DataGrid you can drag to or drop from.

If you’re wondering why we couldn’t bake this into DataGrid even though I had time to code it up on my blog, it is because of the time required to test and debug and handle drag/drop of cell selection. It is a prototype, not finished code. But I’ll bet we’ll integrate code like this into a future release.

I also created the Spark version of the CheckBox in MX DataGrid post. I like this implementation of using CheckBoxes in DataGrid when the dataProvider doesn’t have a slot to store the selected state. You can use the selectedIndices or selectedItems to access which items are checked without having to loop through your dataProvider. In creating this post, I also created the Spark version of the tri-state CheckBox (a CheckBox with a partially filled check box that indicates that not all items are selected in the DataGrid. It was pretty easy to do because the skin parts are easily accessible and it is easy to add a new state to the CheckBox.

Usual caveats apply: not officially supported, may not fix bugs, etc.

Run Demo
Download Source

15 Responses to Spark Checkbox DataGrid With Drag and Drop Support

  1. Hi Alex,

    I just found a bug: Try dragging Gordon, for exemple, to the bottom box. Then, select all itens using the top checkbox, and drag the FirstName label to below any item.

  2. Dmitry says:


    What’s release date of spark datagrid?

  3. Alex says:

    Hi Alex, great examples with Spark Datagrid. Do you know any solution to draw row background depending of the data. Drawing the background in each renderer of the row makes bad perfomance. Thanks

    • Alex Harui says:

      I would imagine you can draw anything you want into the layers in the Spark Grid component.

  4. bobi says:

    ok, that was 10 days ago.
    Any news ?
    how to get the new framework ?

  5. Vander says:

    Hi Alex, it´s me…
    i´ve got how to do checkbox in grid, without having to stuck on selected… i´ve just did another kind of trick… 🙂

  6. Pingback: Spark DataGrid component with Drag & Drop « Flex Black Belt

  7. wren says:

    spark datagrid in 4.5.1 ahipped without drag and drop.. any idea when we will actually see it?

  8. kaissun says:

    draggableColumns property does not exist in the spark DataGrid.
    Could you give the equivalent functionality please ?

    Thanks in advance.

    • Alex Harui says:

      Column dragging is on by default. I guess you could subclass GridColumnHeaderGroup to disable it

  9. sabka says:

    this slows down with large datasets? any solution to this?

    • Alex Harui says:

      I haven’t tried it myself, but I saw there is a call to getItemIndex that might be slowing things down. If you can find another way to compute the dropIndex it might speed things up.