problema con un id en un DataGridColumn

hola buen dia:

antes que nada les agradesco su tiempo en por leer este post, pues bien mi problema es el siguiente:

tengo este datagrid en el cual tengo un canvas al cual deseo ponerle un id, esto es para que por medio de una funcion en as3 pueda ir insertando N numero de checkbox al canvas.
Pero al momento de hacerlo me marca el siguiente error:

"id attribute is not allowed on the root tag of a component"

en este caso como podria lograr poner este id al canvas para realizar esta operacion??
aqui les dejo como esta conformado el codigo

datagrid:

<mx:DataGrid left="126.5" right="98.5" top="160" height="271" id="tarifaView" dataProvider="{tarifasdata}" draggableColumns="false" >
<mx:columns>
<mx:DataGridColumn headerText="Fechas" dataField="fechas" />
<mx:DataGridColumn headerText="opcion" >
<mx:itemRenderer>
<mx:Component>
<mx:Canvas id="Habitaciones" >

</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>

Desafortunadamente, no te puedes referir al itemrenderer de una celda directamente desde afuera del datagrid, lo que podrías hacer es crear un componente que extienda canvas para que haga de itemrenderer, ponerlo ahí y que él mismo reciba eventos localizados en un lugar único común, como un singleton, y cree los checkboxes. No lo he probado, pero teoricamente debería funcionar.

q tal mis estimados:

antes q nada gracias por la respuesta Xyrer, antes de leer tu cometario encontramos algo en google q es fue crear el xml del componente por separado y llamarlo desde el itemRenderer de la siguiente manera:

itemRenderer="modules.mi archivo"

y ahi solamente inclui las fucniones q ya tenia y funciona sin problema alguno hasta el momento, salvo q me he encontrado q al momento de desplazarme de arria hacia abajo o del sentido contrario algunos de los checkbox desaparecen y al subir o bajar aparece de nuevo pero otro checkbox desaparece y asi se la pasa
y auno no he visto cual es el fallo

bueno, básicamente lo que describes es la misma solución que te di, el problema está en que los itemrenderers son reciclados, osea que dentro de el código interno deben poder autogenerarse independientemente cada vez que son creados, sin interacción externa, no puedes evitar el reciclaje de estos, pero puedes tener un labelfunction que se encargue de decirle a cada uno como debe comportarse en el momento que flex los cree de nuevo porque deben ser visibles.

upss cierto xyrer fue la misma solucion omiti comentar esa parte jejejejeje.

labelfunction te refieres a aplicarlo al itemrenderer o al checkbox?

al itemrenderer, un labelfunction puede contener una linea de texto que puedes luego procesar dentro del componente y de esa forma, cada vez que el itemrenderer se recicle, el labelfunction va a entregarle los datos necesarios, algo parecido a esto: http://xyrer.wordpress.com/2010/09/27/color-de-celdas-de-un-datagrid-determinado-por-el-labelfunction/

ya estas xyrer lo voy a verificar entonces

hola mis estimados:

bueno mi estimado Xyrer este el mismo problema con el cual me encontrado:
http://foros.cristalab.com/problema-vertical-scroll-en-datagrid-con-itemrenderer-t70760/

y con la opcion de labelfunction no mas no encuentro la manera de implementarlo para solucionar el problema o no se si con esa funcion se pueda solucionar

Pues tengo un demo funcionando, el problema es que es de flex 4 aunque no creo que tengas problemas descargando el sdk 4 e implementándolo, o si puedes usa flash builder 4, no se si sea la mejor solución, pero fue lo mejor que pude lograr en el corto tiempo que tengo, el demo es así (entiéndelo y acomódalo a tu caso, cualquier duda me dices)

Código Flex :

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx" 
            minWidth="955" minHeight="600"
            creationComplete="application1_creationCompleteHandler(event)">
   <fx:Script>
      <![CDATA[
         import mx.collections.ArrayCollection;
         import mx.events.FlexEvent;
         
         import clases.Singleton;
         
         [bindable] private var singleton:Singleton = Singleton.getInstance();
         [bindable] private var testDP:ArrayCollection = new ArrayCollection([
            {col1:123,col3:"hola mundo"},
            {col1:123,col3:"hola mundo"},
            {col1:123,col3:"hola mundo"},
            {col1:123,col3:"hola mundo"},
            {col1:123,col3:"hola mundo"},
            {col1:123,col3:"hola mundo"},
            {col1:123,col3:"hola mundo"},
            {col1:123,col3:"hola mundo"},
            {col1:123,col3:"hola mundo",col2:2},
            {col1:123,col3:"hola mundo"},
            {col1:123,col3:"hola mundo"},
            {col1:123,col3:"hola mundo"},
            {col1:123,col3:"hola mundo"},
            {col1:123,col3:"hola mundo"}
            ]);

         protected function application1_creationCompleteHandler(event:FlexEvent):void
         {
            //los id DEBEN ser strings, el orden de los números se debe ajustar a los índices del array
            singleton.myItems = new ArrayCollection ([
               {label:"primero",id:"0"},{label:"segundo",id:"1"},
               {label:"primero",id:"2"},{label:"segundo",id:"3"}
               ]);
         }

      ]]>
   </fx:Script>
   <mx:DataGrid x="134" y="68" width="601" height="155" dataProvider="{testDP}" variableRowHeight="true" wordWrap="true">
      <mx:columns>
         <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
         <mx:DataGridColumn headerText="Column 2" dataField="col2" itemRenderer="renderers.CheckBoxCanvas"/>
         <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
      </mx:columns>
   </mx:DataGrid>
</s:Application>

Y este es el itemrenderer:

Código Flex :

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark" 
                    xmlns:mx="library://ns.adobe.com/flex/mx" 
                    focusEnabled="true"
                    dataChange="dataChangeHandler(event)">
   <fx:Script>
      <![CDATA[
         import mx.events.FlexEvent;
         
         import clases.Singleton;
         
         [bindable] private var singleton:Singleton = Singleton.getInstance();

         protected function dataChangeHandler(event:FlexEvent):void
         {
            if (Number(dataGridListData.label) == 2)
               rp.dataProvider = singleton.myItems;
            else
            {
               rp.dataProvider = null;
               rp.validateNow();
            }
         }

         protected function checkbox1_changeHandler(event:Event):void
         {
            singleton.myItems.getItemAt(Number(event.target.name)).selected = event.target.selected;
         }

      ]]>
   </fx:Script>
   <mx:Tile direction="horizontal" horizontalGap="5" verticalGap="5">
      <mx:Repeater id="rp">
         <s:CheckBox name="{rp.currentItem ? rp.currentItem.id : 'blank'}" label="{rp.currentItem.label}" selected="{rp.currentItem.selected}" change="checkbox1_changeHandler(event)"/>
      </mx:Repeater>
   </mx:Tile>
</s:MXDataGridItemRenderer>

el singleton es como cualquier otro, pero lo pongo como referencia

Código ActionScript :

package clases
{
   import flash.events.EventDispatcher;
   
   import mx.collections.ArrayCollection;

   [Bindable] public class Singleton extends EventDispatcher
   {
      private static var instance:Singleton = new Singleton();
      
      public var myItems:ArrayCollection;
      
      public function Singleton()
      {
         if(instance)
         {
            throw new Error ("We cannot create a new instance. Please use Singleton.getInstance()");
         }
      }
      
      public static function getInstance():Singleton
      {
         return instance;
      }
   }
}

Así tal cual funciona con 1 celda porque al fin y al cabo es solo una prueba de concepto, si quieres varias celdas con conjuntos diferentes de checkboxes y sus valores a diestra y siniestra, tendrás que elaborar un poco más y usar un arraycollection con arraycollections internos o algo así.

hola mis estimados pues aqui molestando de nuevo y con la novedada q aun no encontramos la manera de como solucionar este detalle, aun con la ayuda jejeje con sultando con el sr google llegana diferentes soluciones pero al implentarlas no mas no logramos solucionarlo

aqui les dejo como lo estamos implementando tal ves y estamos haciendo algo mal o nos falta algo q es lo mas seguro.

de antemano les agradeco su tiempo

itemrenderer de un canvas:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="422" height="48" creationComplete="onInit();">
<mx:Script source="as/canvasExterno.as" />
<mx:Canvas x="2.5" y="1" width="421" height="29" id="HabiCheck">
</mx:Canvas>
</mx:Canvas>

//*********************************************************************************************//
as del itemrenderer del canvas:

import events.StateEv;
import mx.states.State;
import flash.net.NetConnection;
import flash.net.Responder;

import mx.collections.*;
import mx.controls.*;

private var conexion:NetConnection;


private function onInit():void
{

conexion = new NetConnection();
conexion.connect("./amfphp/gateway.php");
parentApplication.addEventListener(StateEv.STATEEV,carga);




}


public function onFault(fault:String):void
{ Alert.show(fault,"ERROR",mx.controls.Alert.OK); }



private function carga(evento:StateEv):void
{

var obj:Object=new Object();

if(evento.label=="envio")
{
obj=evento.data;
var id:Number=obj.id_periodo;
gethabitacion(id);
}

if(evento.label=="envio id combo")
{
obj=evento.data;
var id_combo:Number=obj.id_combo;
Alert.show("combo"+id_combo);

}
}



public function gethabitacion(id:Number):void
{conexion.call("code.gethabitacion", new Responder(check,onFault),id);}


public function check(Result:Array):void
{
// Alert.show("prueba de que enbtra ");
//Alert.show("conteniod result ="+Result[0].toString());
if(Result[0]!=0)
{
var y:Number = 5;
var x:Number = 10;
var i:Number = 0;
HabiCheck.removeAllChildren();
while(i<Result.length)
{
for( var o:Number=0; o<3 && i<Result.length; o++)
{
//Alert.show("Dibuja check habitacion");
var check:CheckBox = new CheckBox();
check.name=Result[i].id_thab;
check.label=Result[i].nombre;
check.id="habitacion_"+i;
check.selected=false;
check.x=x;
check.y=y;

i=i+1;
HabiCheck.addChild(check);
x=x+120;
}
y=y+20;
x=10;
}
}
}

//*************************************************************************************************************//

itemrenderer del checkbox:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="82" height="38" >
<mx:CheckBox x="4" y="7" label="Cerrar" name="cierre_{data.fecha}" id="checkCierre" />
</mx:Canvas>

//*************************************************************************************************************//

estructura del datagrid


<mx:DataGrid horizontalCenter="20" id="contiene" top="84" width="490" height="355" dataProvider="{tarifasdata2}" creationComplete="onInit2();">
<mx:columns>
<mx:DataGridColumn width="110" id="fecha" headerText="Fechas Periodo" dataField="fecha"/>
<mx:DataGridColumn width="80" id="cierra" headerText="Cerrar" itemRenderer="modules.checkExterno"/>


<mx:DataGridColumn headerText="Habitaciones" dataField="col3" itemRenderer="modules.canvasExterno" />
</mx:columns>
</mx:DataGrid>

katsumoto escribió:

no entiendo esa parte, según el código es un componente que extiende el canvas, pero añades otro canvas dentro de este, no se cual es el punto y sobre todo porqué le llamas itemrenderer

katsumoto escribió:

Porqué el código de conexión está dentro de un componente?

katsumoto escribió:

Donde usas esto? como se llama este componente que no vi referencias en ninguna parte? porqué si solo es un checkbox, está dentro de un canvas?

katsumoto escribió:

Si estás agregando un montón de checkboxes, porqué no usas un repeater?