# Attach Movieclip to Datagrid Cell (and detect mouse click on cellRenderer)

**URL:** <https://forum.kirupa.com/t/attach-movieclip-to-datagrid-cell-and-detect-mouse-click-on-cellrenderer/269507>\
**Category:** flash\
**Created:** [August 28, 2008, 1:10pm UTC](https://forum.kirupa.com/t/attach-movieclip-to-datagrid-cell-and-detect-mouse-click-on-cellrenderer/269507 "2008-08-28T13:10:43Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![EssenceLord](https://avatars.discourse-cdn.com/v4/letter/e/a698b9/32.png) [@EssenceLord](https://forum.kirupa.com/u/EssenceLord)\
**Post date:** [August 28, 2008, 1:10pm UTC](https://forum.kirupa.com/t/attach-movieclip-to-datagrid-cell-and-detect-mouse-click-on-cellrenderer/269507/1 "2008-08-28T13:10:43Z")

</div>

Not to certain how many people may need this script, but lo and behold I had need of it for my project. So, here’s my script on how to add a movie clip to a Datagrid Cell via CellRenderer

1. Create an Actionscript file (\*.as) and call it IconCellRenderer

2. Put the following code inside that file:

```auto
package
{
    import fl.controls.listClasses.CellRenderer;
    import flash.utils.getDefinitionByName;
    
    public class IconCellRenderer extends CellRenderer 
    {
        public function IconCellRenderer() 
        {
            // -------------- Attach MovieClip -----------------
            var instance = new (getDefinitionByName("MyMovie")); // Create Instance of "MyMovie"
            this.addChild(instance); // Add this instance to the CellRenderer
            instance.name = "MyMovieInstance"; // Name this new instance
            
            // Position Movie in Cell
            instance.x += 8;
            instance.y += 3;
        }
    }
}

```

1. Now set the cellRender for the cells that you want this to apply to:

MyDataGrid.getColumnAt(MyDataGrid.getColumnIndex(“ColumnName”)).cellRenderer = IconCellRenderer; // load IconCellRenderer

Extra Tid Bid:  
Here is a little extra on detecting when someone clicks on a cell utilizing the above cellRenderer: (I’m sure there’s a better way to do it, but here you go)

1. Add Event Listener to your datagrid to detect a mouse click  
MyDataGrid.addEventListener(MouseEvent.CLICK, onClickCell);

2. Here’s the function called upon the Mouse Click:

```auto
function onClickEvent (E:Event)
{
    // if a record is selected
    if (eventGrid.selectedIndex != -1)
    {
       // Check if user clicked on the Info Icon CellRender of the selected Row
        var Row = eventGrid.selectedIndex; // get selected row
        var Col = eventGrid.getColumnIndex("Info"); // the column of cells with IconCellRenderer
        if (E.target == eventGrid.getCellRendererAt(Row, Col))
            MyFunction (); // function you want called when cellRenderer is clicked
    }
}

```