RadioButton inside Datagrid..Strange behaviour

Hi everyone
I am trying to add Radiobutton inside DataGrid and I am getting strange problems
This is my RadioClass.as:
[AS]

import mx.core.UIComponent;
import mx.controls.RadioButton

class RadioClass extends UIComponent {
var radio : MovieClip;
var listOwner : MovieClip;
var owner : MovieClip;
var getCellIndex : Function;
var getDataLabel : Function;
var i : Number;
var curr : MovieClip;

//Constructor
function RadioClass(){

}

function createChildren(Void) : Void
{
radio = createObject(“RadioButton”, “radio”, 1, {styleName:this,owner:this});
radio.addEventListener(“click”, this);
}

// as per doumentation u need to define 4 methods here… see help
//for details
function getPreferredHeight(Void):Number {
return 16;
}

function getPreferredWidth(Void):Number {
return 20;
}

function setSize(w:Number, h:Number):Void {
// you can set size of componets u r using inside the
//RadioCell MC
}

function setValue(val, item, selected) : Void{
// here u get the value in val
// item returns a custom optional object which u can pass while editing
//the data grid
// selected returns selected state of cell

// THIS METHOD is called on mouse move over grid, so any thing written
//here will keep on looping. tru to write minimum code here
}

function click(evtObj:Object)
{
trace("Radio value is: "+radio.value);
trace("You clicked on: "+radio);
}

}

[/AS]

And this is my fla code
Actionscript:

[AS]

import mx.controls.gridclasses.DataGridColumn;
import mx.controls.RadioButton
mi_grid.columnNames = [“tname”,“pname”,“lov”,“work”];

var col:mx.controls.gridclasses.DataGridColumn;
//
col = mi_grid.getColumnAt(0);
column.width = 140;
column.headerText = “Team Name”;
//var delta = mi_grid.width-totalWidth-18;
col = mi_grid.getColumnAt(1);
col.width = 140;
col.headerText = “Product Name”;

col = mi_grid.getColumnAt(2);
col.width = 100;
col.headerText = “LOV”;
col.editable=true;
col.cellRenderer=“RadioClass”;
col = mi_grid.getColumnAt(3);
col.width = 100;
col.headerText = “work”;
//col.editable=true;
//col.cellRenderer=“RadioClass”;
//mi_grid.setStyle(“alternatingRowColors”, Array(0xFFFFFF, 0xF7F7F7));
mi_grid.rowHeight = 100;
// my_array = new Array();
//my_array= new Array({testDate:“EG1313”, invil1:"…", invil2:“dj pekao studio”}, {testDate:“EG1001”, invil1:"…", invil2:“none”});
//my_array= new Array({tname:“Team1”, pname:“Base 1”,lov:“0”},{tname:“Team2”, pname:“Base 2”, lov:“0”}, {tname:“Team3”, pname:“Base 3”, lov:“0”}, {tname:“Team4”, pname:“Base 4”, lov:“0”});
my_array=new Array(
{tname:“Team1”, pname:“Base 1”,lov:“0”,work:“hello”},
{tname:“Team2”, pname:“Base 2”, lov:“0”,work:“hello”},
{tname:“Team3”, pname:“Base 3”, lov:“0”,work:“hello”},
{tname:“Team4”, pname:“Base 4”, lov:“0”,work:“hello”},
{tname:“Team5”, pname:“Base 5”, lov:“0”,work:“hello”},
{tname:“Team6”, pname:“Base 6”, lov:“0”,work:“hello”}
);
mi_grid.dataProvider = my_array;
trace(“Length of the grid:”+mi_grid.length +" array_length"+my_array.length);

[/AS]

Output:
Length of the grid:6 array_length6
Radio value is: true
You clicked on: _level0.mi_grid.content_mc.listRow10.fCell2.radio
Radio value is: true
You clicked on: _level0.mi_grid.content_mc.listRow11.fCell2.radio
Radio value is: true
You clicked on: _level0.mi_grid.content_mc.listRow12.fCell2.radio
Radio value is: true
You clicked on: _level0.mi_grid.content_mc.listRow13.fCell2.radio

Currently

  1. I am always getting one extra radio button added in the grid in the last
  2. Even if I comment the DataProvider part to add items to the grid I am getting one radio button inside grid
  3. When I click on the first radio button the fourth radio button automatically gets clicked(because first radio button and forth are getting the same name:
    _level0.mi_grid.content_mc.listRow10.fCell2.radio. …Dont know why this is happening.

Please help!!