DataGrid's. I have not tried the below recommendation from iko_knyphausen
but I can offer my own experience.
For me, I wanted to center the Checkbox in the DataGrid column. Using the
DataGridColumn itself yield no positive results. So, like for many things an
ItemRender was needed (just like you set up). However, when using the
item renderer (serving as the renderer and the item editor: rendererIsEditor = "true")
I would get property errors when interacting with the Checkbox. The solution
I employed was to create a custom item renderer class instead of a drop-in
renderer. When doing this, you create a property of the class to hold the
value of the Checkbox selection and then you bind this value to the grid column.
The code looked like this (and it's the VBox that aids in centering):
--Assume this mxml file is called CheckboxRenderer.mxml
<x-tad-smaller><?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Script>
<![CDATA[
[Bindable]
public var cbSelected:Boolean;
]]>
</mx:Script>
<mx:CheckBox id="cbGeneric" selected="{cbSelected}" click="cbSelected = cbGeneric.selected" updateComplete="cbSelected = cbGeneric.selected"/>
</mx:VBox>
Then, to bind the value of the cbSelected boolean to the grid column your
datagrid column would look like this:
<mx</x-tad-smaller>:D<x-tad-smaller>ataGridColumn id="yourID" headerText="Column Header" dataField="yourValue" itemRenderer="CheckboxRenderer" rendererIsEditor="true" editorDataField="cbSelected"/></x-tad-smaller>
Now, we have a custom item renderer that also functions as our item editor
(so there aren't 2 different states). The value of the editorDataField attribute -
set to cbSelected - allows the datagrid column to keep up with the Checkbox
selected value correctly. Implementing this custom mxml item renderer
eliminated the error "Property selected not found in blah blah and no default
value is set."
While this solved the problem of centering the Checkbox in the grid what
happens if you want another column to use a centered Checkbox. Using
the above method (mxml component) you cannot make the code generic
enough where you can reuse it. I further solved this problem by dumping the
mxml component and creating a custom ActionScript class that extended the
Checkbox class. I essentially rewrote the mxml to equivalent AS3.
This is prob. way more info than any of you wanted, but it's something that
I struggled with for a few days and having figured out, may save you some
time.
| Aaron West
| aaron AT trajiklyhip DOT com
| http://www.trajiklyhip.com/blog/
| Certified Advanced Adobe ColdFusion MX 7 Developer
| Certified Macromedia FlashMX Developer
| Adobe Community Expert
On Oct 13, 2006, at 11:37 PM, iko_knyphausen wrote:
I finally got around to testing your suggestion.
<mx:DataGridColumn editable="false" width="65" headerText="Member" textAlign="center">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:CheckBox selected="{data.member}" change="data.member=selected" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
….
The inline data.member works well but you have to switch "editable" property off, and update the listitem data manually via change event. Unfortunately, checkbox population fails the moment you wrap an HBOX around the checkbox. Works great without the HBOX.
Any ideas....?
--- In flexcoders@yahoogroups.com, "haravallabhan" <[EMAIL PROTECTED]> wrote:
>
> Iam just wondering How a Layout component has some affect on data?.
> It works for me.. selected = {data.ColumnDataField} shoue populate
> the value.
>
>
> --- In flexcoders@yahoogroups.com, "Iko Knyphausen" iko@ wrote:
> >
> > I tried that, and indeed it will help align the checkbox,
> unfortunately the
> > data binding stops working. In other words, the moment you have an
> hbox
> > around the checkbox, the checkbox does not show as "checked" in
> those rows
> > that have "true" as data value.
> >
> > Hi,
> > You can use HBox component or anoother layout compnent to say,
> inside
> > the itemRenderer like
> >
> > <mx:DataGridColumn width="65" headerText="Member" dataField="member"
> > textAlign="center" >
> > <mx:itemRenderer>
> > <mx:Component>
> > <HBox>
> > <mx:CheckBox labelPlacement="left"/>
> > </HBox>
> > </mx:Component>
> > </mx:itemRenderer>
> > </mx:DataGridColumn>
> >
> > thanks.
> >
> > --- In [EMAIL PROTECTED] <mailto:flexcoders%40yahoogroups.com>
> ups.com,
> > "iko_knyphausen" <iko@> wrote:
> > >
> > >
> > > Hi,
> > >
> > > I am trying to use checkboxes in my datagrid, and everything
> works
> > fine,
> > > except I cannot vertically align the "bugger". I played with
> > >
> > > textAlign=""
> > > horizontalCenter =""
> > > paddingLeft =""
> > > left=""
> > > etc.
> > >
> > > all the usual style candidates. The only thing that will make a
> > > difference, is the labelPlacement attrribute. The values "top" and
> > > "bottom" will center the checkbox nicely, unfortunately they will
> > also
> > > add space for the label (either above or below) even if the label
> > > attribute is empty.
> > >
> > > See code below. Help is greatly appreciated... Thx
> > >
> > > <mx:DataGridColumn width="65" headerText="Member"
> dataField="member"
> > > textAlign="center" >
> > > <mx:itemRenderer>
> > > <mx:Component>
> > > <mx:CheckBox labelPlacement="left"/>
> > > </mx:Component>
> > > </mx:itemRenderer>
> > > </mx:DataGridColumn>
> > >
> >
>
__._,_.___
--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com
<image.tiff>
SPONSORED LINKS
Software development tool
Software development
Software development services
Home design software
Software development company
<x-tad-smaller> Your email settings: Individual Email|Traditional</x-tad-smaller>
<x-tad-smaller>Change settings via the Web</x-tad-smaller><x-tad-smaller> (Yahoo! ID required) </x-tad-smaller>
<x-tad-smaller> Change settings via email: </x-tad-smaller><x-tad-smaller>Switch delivery to Daily Digest</x-tad-smaller><x-tad-smaller> | </x-tad-smaller><x-tad-smaller>Switch to Fully Featured</x-tad-smaller><x-tad-smaller> </x-tad-smaller>
<x-tad-smaller> Visit Your Group </x-tad-smaller><x-tad-smaller> </x-tad-smaller><x-tad-smaller>| </x-tad-smaller><x-tad-smaller>Yahoo! Groups Terms of Use </x-tad-smaller><x-tad-smaller> </x-tad-smaller><x-tad-smaller>| </x-tad-smaller><x-tad-smaller>Unsubscribe </x-tad-smaller>
__,_._,___
