Datagrid checkbox renderer

Hi all,
I have a datagrid with checkbox as item renderers and
checkbox as header renderer in one of its columns.
I created a custom datagrid column extending from datagrid
column.
The visible property of checkbox in a row is based on a
condition.
All works fine if there are only 7 rows in a datagrid,i get
three rows with checkbox and the other without checkbox.
but,if i have more than 7 rows(with vertical scrollbar) i see
all the checkboxes visible which should not happen.
Thanks

thanks for the reply sreenivas
but i have already done that..
here is my set data method
override public function set data(value:Object):void{
if(value != null){
super.data = value;
checkDelPermission(null);
public function checkDelPermission(event:FlexEvent =
null):void{
var checkpermissioninstance:CheckPermission = new
CheckPermission();
checkpermissioninstance.permissions = [8];
if(data.hasOwnProperty("permission")){
checkpermissioninstance.permBit = data.permission;
var delpermission:ArrayCollection =
checkpermissioninstance.getPermissions()
if(delpermission!=null){
if(delpermission[0]==true){
this.visible = true;
else{
this.visible=false
else{
this.visible = false;
MittoApp.logMessage("permission"+data.permission +" and
visible=="+this.visible);
the message is always printed with the correct values but the
display is not.
Thanku

Similar Messages

  • Datagrid checkbox renderer refresh?

    I am using a checkbox renderer for one of the columns in a
    flex datagrid.
    When i scroll up or down, the checkboxes i have alread
    clicked, change to different boxes (records). ????
    Not sure if this is a redraw issue. Tried to validate, but
    did not help.
    Please help.

    When we add a customized checkbox column to a datagrid in .net (windows application) , the default property allows to check or uncheck the column using a double click. On the first click it selects the column and on the second click the column is either checked or unchecked.
    To change this default property, we need to handle the click event on grid and modify the selected cell value. Here is the sample code to achieve this.
    [C#.NET VS 2003 , Code to add checkbox column to grid using table style property]
    dgItemDetails.TableStyles.Clear(); // clears the tablestyle (dgItemDetails is the name of grid)
    DataGridTableStyle dgt = new DataGridTableStyle();
    dgt.MappingName = "ItemDetails";
    DataGridBoolColumn dgbCol = new DataGridBoolColumn(); // creates the checkbox column
    dgbCol.MappingName = "Select";
    dgbCol.HeaderText = "";
    dgbCol.Width = 40;
    dgbCol.AllowNull = false;
    dgbCol.Alignment = HorizontalAlignment.Left;
    dgt.GridColumnStyles.Add(dgbCol);
    dgItemDetails.TableStyles.Add(dgt); // add
    Eliza

  • Checkbox rendere in datagrid

    Hi all,
    I have a datagrid with checkbox as renderer.
    after selecting few checkboxes,if i scroll the datagrid
    checkboxes are selected at random.
    my renderer code is attached..
    thanks

    Hi karnatis,
    Just like Alex told you, we can do it easily by
    for (var i:int = 0; i < dg.selectedItems.length; i++) {   
         Alert.show(dg.selectedItems[i].lastName);
    dg.selectedItems  -> contains all checked items
    dg.selectedItem    -> contains last checked item
    Hope this help!

  • Checkbox renderer problem

    Hi all,
    I have a checkbox renderer in datagrid .The dataprovider does
    not have the selected property of the checkbox.
    how do i retain the selection of the checkbox,when i scroll
    the datagrid?
    please help.
    Thanks

    thank u very much..
    in set data method,i added the following
    override public function set data(value:Object):void{
    if(value != null){
    super.data = value;
    if((data.chkselected==null) ||
    (data.chkselected=="undefined")){
    data.chkselected = false;
    this.selected = data.chkselected;
    this works when i change checkbox selection in each row..
    i have another problem..can u please help me in solving this
    i have a checkbox as header renderer..
    On click, it is selectiing/deselecting only the checkboxes of
    rows which are visible and when i scroll the datagrid,other
    checkboxes are not selected/deselected
    thanks

  • Datagrid Image Renderer Broken in CS SDK but not Flex project

    Within a Photoshop Extension, I have a DataGrid which has an inline custom image renderer whose dataprovider is an ArrayCollection called "photos"  representing a list of photos and some metadata properties.  One of the properties "fileName" is concatenated with a path to a thumbnail image such as source="{'LR_AUTO/imported/thumbs/' + data.fileName}".
    The dataprovider is bound to a LCDS DataService. When the extension is first launched, the dataservice initializes the dataprovider with the existing values for the "photos" arraycollection.  The thumbnail images are correctly shown.
    However, when the DataService receives a new row and updates the photos dataprovider, the datagrid's new row shows a broken image for the thumbnail even though the path is correct.  I have dumped the photos dataprovider and verified that all information is correct.  When I close Photoshop and relaunch it from Flash Builder, once again LCDS initializes the photos ArrayCollection and THEN the thumbnail that previously showed as broken show up correctly.
    I have a ColdFusion Directory Watcher Gateway that watches a directory where Lightroom auto-imports images from a tethered capture session.  When the camera sends Lightroom a new image, the new image is processed by Lightroom and moved to a target directory, and since ColdFusion's Directory Watcher is watching that targeted directory, ColdFusion will create a thumbnail image in a subfolder and notifiy LCDS that of the new image and related metadata.
    *** This is the interesting part *** When Lightroom places new images in the target directory, this is propogated to the Photoshop Extension's datagrid, and the new row shows up as described earlier, showing a broken image for the thumbnail.  BUT, instead of Lightroom, if I manually copy images to the folder where ColdFusion is watching, then exact same code path is exectuted and in the Photoshop Datagrid the new row appears and THE THUMBNAIL IMAGE shows up correctly.
    The difference seems to be only in how the images are put in the original target location.  The problem is when Lightroom puts them there, but it works when I put them there as a user.
    *** More Interesting Info *** I have the Flex code for the Photoshop Extension duplicated in a standalone, non-CSSDK project using Flex 3.4 which I launch in a browser.  I have mirrored the code in the Photoshop extension, but in this manner, the problem does not exist.  With plain Flex 3.4 in a browser, whenever LCDS notifies the datagrid of a new photo record, the datagrid's new row ALWAYS shows the thumbnail correctly.
    A primary difference in how the thumbnail image is rendered is that in a browser, the Flex 3.4 project accesses the image assets over the network, however, in the Photoshop Extension, the image asset WITH THE SAME RELATIVE PATH is accessed over the local file system.
    source="{'LR_AUTO/imported/thumbs/' + data.fileName}"
    So in the case of the browser, this path is a relative URL and the image is retrieved over HTTP, however, in the PS Extension, the same path represents a file system path relative to the project folder.
    Unfortunately, because the Flash Player (including APE) cannot access BOTH the network and the local filesystem, so I cannot change the Extension to use network access.
    ** The important part to remember is that when I stop the Flash Builder debug session and close Photoshop, then relaunch the debug with Photoshop, then all the images show up correctly in the Extension.
    Your advice is appreciated.
    Thank you!
    Steve
    ====================================================
    Environment
    ====================================================
    Photoshop CS5 Extended 12.01 x32
    Flash Builder 4
    CS SDK 1.02
    Extension Builder SDK 3.4
    MacBook Pro / OS X 10.5 / Intel Core 2 Duo 2.66 GHz / Procs: 1 / Cores: 2 / Memory: 8 GB
    App configured for Photoshop CS5 and Photoshop CS5 Extended
    ====================================================
    NewsAgencyPhotoshop.mxml
    ====================================================
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="com.stevenerat.news.*"
                    horizontalScrollPolicy="off" verticalScrollPolicy="off" verticalGap="0"
                    layout="vertical" horizontalAlign="left"  backgroundColor="#353535"
                    historyManagementEnabled="false"
                    creationComplete="init();">
        <mx:Script>
                public function handlePhotoClick(data:Object):void {
                    this.PreviewImageWindow = PreviewImage(PopUpManager.createPopUp(this,PreviewImage,true));
                    var filePath:String = data.dirPath + data.fileName;
                    PreviewImageWindow.addEventListener("imageOpenEvent",imageOpenListener);
                    PreviewImageWindow.addEventListener("imageCloseEvent",imageCloseListener);
                    PreviewImageWindow.addEventListener("imageSavedEvent",imageSaveListener);
                    PreviewImageWindow.setFileName(data.fileName);
                    PreviewImageWindow.setFilePath(filePath);
                    PreviewImageWindow.y = 0;
                    PreviewImageWindow.x = 0;
            ]]>
        </mx:Script>
        <mx:ArrayCollection id="photos"/>
        <NewsPhoto/>
        <mx:DataService id="ds" destination="NewsAgencyPhotos" autoSyncEnabled="true" autoCommit="true" conflict="conflictHandler(event)"/>
        <mx:Label text="News Agency Photos" fontSize="20" paddingBottom="30"/>
        <mx:Label text="Available Images" fontSize="15"/>
        <mx:DataGrid id="photoIPTC" dataProvider="{photos}" editable="true" width="220" rowCount="5" rowHeight="75" wordWrap="true">
            <mx:columns>
                <mx:DataGridColumn headerText="id" dataField="fileName" width="40" editable="false" sortDescending="true"/>
                <mx:DataGridColumn dataField="psLock" width="65" headerText="Status" editable="false" editorDataField="value">
                    <mx:itemEditor>
                        <mx:Component>
                            <mx:ComboBox editable="false">
                                <mx:dataProvider>
                                    <mx:String>New</mx:String>
                                    <mx:String>Open</mx:String>
                                    <mx:String>Edited</mx:String>
                                </mx:dataProvider>
                            </mx:ComboBox>
                        </mx:Component>
                    </mx:itemEditor>
                </mx:DataGridColumn>
                <mx:DataGridColumn headerText="Photo" dataField="fileName" width="80" editable="false">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:HBox horizontalAlign="center" horizontalScrollPolicy="off" verticalScrollPolicy="off">
                                <mx:Image click="outerDocument.handlePhotoClick(data);" source="{'LR_AUTO/imported/thumbs/' + data.fileName}" width="75" height="75"/>
                            </mx:HBox>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
            </mx:columns>
        </mx:DataGrid>
    </mx:Application>
    ====================================================
    A DUMP OF THE DATAPROVIDER
    in this case, one array item existed when launched, then a second was added
    while running.  The first has its thumbnail show, the second item has broken image
    ====================================================
    ------------------DUMP----------------------------
    (mx.collections::ArrayCollection)#0
      filterFunction = (null)
      length = 2
      list = (mx.data::DataList)#1
        fillParameters = (Array)#2
        length = 2
        localItems = (Array)#3
          [0] (com.stevenerat.news::NewsPhoto)#4
            aperture = "F10"
            cameraLens = "EF24-70mm f/2.8L USM"
            cameraModel = "Canon EOS 7D"
            city = ""
            copyrightNotice = "¬© Steven Erat 2011"
            country = ""
            creator = "Steven Erat"
            description = ""
            dirPath = "/Users/stevenerat/LR_AUTO/imported/"
            fileName = "ERAT_STEVEN_20110122_162.jpg"
            focalLen = "42.0 mm"
            headline = ""
            id = 1
            iso = "100"
            keywords = "Alt, Dramatic, Fashion, Girl, Glamorous, Glamour, Inked, Model, Portrait, SOPHA"
            psLock = "New"
            shutterSpeed = "1/128 sec"
            state = ""
          [1] (com.stevenerat.news::NewsPhoto)#5
            aperture = "F10"
            cameraLens = "EF24-70mm f/2.8L USM"
            cameraModel = "Canon EOS 7D"
            city = ""
            copyrightNotice = "¬© Steven Erat 2011"
            country = ""
            creator = "Steven Erat"
            description = ""
            dirPath = "/Users/stevenerat/LR_AUTO/imported/"
            fileName = "ERAT_STEVEN_20110122_163.jpg"
            focalLen = "42.0 mm"
            headline = ""
            id = 2
            iso = "100"
            keywords = "Alt, Dramatic, Fashion, Girl, Glamorous, Glamour, Inked, Model, Portrait, SOPHA"
            psLock = "New"
            shutterSpeed = "1/128 sec"
            state = ""
        uid = "8BAC025E-60D1-11F1-3654-44BDB0D218CE"
        view = (mx.collections::ArrayCollection)#6
          filterFunction = (null)
          length = 2
          list = (mx.data::DataList)#1
          sort = (null)
          source = (null)
      sort = (null)
      source = (null)
    ------------------END_DUMP------------------------

    I expected that if my extension uses the local filesystem AND the network that I would get a Security Sandbox Exception as I recently described in this thread:
    http://forums.adobe.com/thread/791918?tstart=0
    However, I just tried changing my datagrid image renderer to access the thumbnail via HTTP and the thumbnail issue after Lightroom export does not happen.
                <mx:DataGridColumn headerText="Photo" dataField="fileName" width="80" editable="false">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:HBox horizontalAlign="center" horizontalScrollPolicy="off" verticalScrollPolicy="off">
                                <mx:Image click="outerDocument.handlePhotoClick(data);" source="{'http://localhost:8500/LR_AUTO/imported/thumbs/' + data.fileName}" width="75" height="75"/>
                            </mx:HBox>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
    Furthermore, I can also open the image via the Photoshop DOM, and it does open correctly.  It seems that I do have a solution now, although I'm not certain as to why I'm not getting a Security Sandbox Exception as I described in the other post.
    Thanks for reading.

  • DataGrid Item Renderer loading duplicates after scroll

    HI,
    I have a report that loads into a datagrid, these reports are
    about thumbnail images that are on a server.
    I have a datagrid item renderer that loads the thumb nails.
    When the grid first loads the first set of rows that are visible
    display the correct images. But after I scroll the new rows have
    images that are repeated and not the correct ones.
    ?xml version="1.0" encoding="utf-8"?>
    <HBox xmlns="
    http://www.adobe.com/2006/mxml"
    horizontalScrollPolicy="off" verticalScrollPolicy="off"
    creationComplete="{init()}">
    <Script>
    <![CDATA[
    import mx.controls.Image;
    [Bindable]
    [Embed(source="/images/folderBlack.png")]
    private var folderIcon:Class;
    private function suffix(url:String):String {
    var i:Number;
    if ((i = url.lastIndexOf(".")) > -1) {
    url = url.substr(i+1);
    return url;
    private function init():void {
    var fileSuffix:String = new String;
    fileSuffix = '';
    fileSuffix = suffix(data.filename);
    var staticPortalImage:String = new String;
    staticPortalImage = '/PULLIMAGE.php?type=small&id=' +
    data.FileID +
    '&path=' + data.filename +
    '&server=MTI3LjAuMC4x&siteurl=L0F1dGhNb2R1bGU=';
    var thumbNailImage:Image = new Image();
    thumbNailImage.height = 80;
    switch(fileSuffix){
    case 'jpg':
    thumbNailImage.source = staticPortalImage;
    break;
    imageContainer.addChild(thumbNailImage);
    texttest.text = fileSuffix;
    ]]>
    </Script>
    <Text id="texttest" />
    <HBox id="imageContainer" height="80" />
    </HBox>

    Thanks
    Great article I ended up getting rid of the creationcomplete
    changing my init():void too override public function set data(
    value:Object ) : void
    and adding
    super.data = value;
    I was able then to clean up my code considerably.
    Once again Thanks
    Dean

  • Datagrid Item renderer Help

    Hi all,
    I need a help/suggestion in a datagrid item renderer. In a datagrid, for one particular cell (particular column of a row) i need to change the background color depending upon the condition.The color for particular cell not for the entire row or entire column, how can i achieve this ?
    Thanks in advance.
    Heman

    Here is my Scenario, in my datagrid the second column of the first row (987.93) background color depends upon some condtion. The remaning rows of column B depends upon the column C . If "the column C is OK" it will be green , "NOT OK" red. But the first row's second column color depends upon some other condition. How can i achieve this ?

  • Datagrid Checkbox item renderer Issue.

    Hi There
    Recently I faced a  requirement to have a checkbox inside a datagrid where I need to develop a music module with playlist management for ADOBE AIR based application.
    For this I have searched and found a source to use Datagrid and Checkbox components which overrides some inbuild methods to give the required result..
    But Finally I ended with one strange issue
    When the check box is placed in the datagrid at 0 column index it works firne but if we place at any index ( I need it to be last colum ) the checkbox is not updating the display.
    Source Flex Air project attached.
    From the sample... While clicking on a row the left column checkbox is getting updated but Right remains same... when you scroll the Datagrid then the checkboxes are getting update when they are redrawn. I didn't found where to call the redraw for the right checkbox column.
    Cany any one faced this strange issue. and found any solution ?????
    If the Logic what I am following for a Playlist module is not good one then suggest if you guys know any other mechanism to develop a playlist management with datagrid and Checkboxes.
    Message was edited by: ChintuBabu

    Hi There
    Recently I faced a  requirement to have a checkbox inside a datagrid where I need to develop a music module with playlist management for ADOBE AIR based application.
    For this I have searched and found a source to use Datagrid and Checkbox components which overrides some inbuild methods to give the required result..
    But Finally I ended with one strange issue
    When the check box is placed in the datagrid at 0 column index it works firne but if we place at any index ( I need it to be last colum ) the checkbox is not updating the display.
    Source Flex Air project attached.
    From the sample... While clicking on a row the left column checkbox is getting updated but Right remains same... when you scroll the Datagrid then the checkboxes are getting update when they are redrawn. I didn't found where to call the redraw for the right checkbox column.
    Cany any one faced this strange issue. and found any solution ?????
    If the Logic what I am following for a Playlist module is not good one then suggest if you guys know any other mechanism to develop a playlist management with datagrid and Checkboxes.
    Message was edited by: ChintuBabu

  • Datagrid and checkbox renderer

    I'm looking to have a datagrid have a dataprovider from a coldfusion remote object in which i want to save a boolean value for checkboxes. i want the user to be able to select and deselect checked items and submit to a back end DB where their changes are saved.
    Then on load I want the checkbox value to be selected or deselected based on their previously saved prefs. Checkbox item renderers are a re-occuring problem for me. There seems to be so many ways to implement them and so far using online examples they don't show how to save results to a DB and reload them based on a DB. please help
    code i'm currently trying to use (where ITEM_TYPE is a DB value of true or false) and the getCheckList.lastResult is made up of 7 rows with ITEM_TYPE and DESCRIPTION (the checkbox description for the user):
    <mx:DataGrid id="myDG" dataProvider="
    {parentApplication.ATService.getCheckList.lastResult}" variableRowHeight="
    true" width="
    500" height="250" editable="
    true">
    <mx:columns>
    <mx:DataGridColumn textAlign="center" width="25" dataField="ITEM_TYPE" itemRenderer="
    mx.controls.CheckBox" rendererIsEditor="
    true"editorDataField="
    selected"/>
    <mx:DataGridColumn dataField="DESCRIPTION" />
    </mx:columns >
    </mx:DataGrid>

    I tried that Blog. It doesn't show how to preload from a database the checked or unchecked values. I did figure it out on my own though after some hard work. Using the <mx:Component> tag is nice... but i found it can't reference anything in the component its in b/c anything under <mx:Componenet> is not of the same class. trick here is to add the parentDocument. prefix and you call anything you want. also found that a DB string value (or varchar) of "true" or "false" is not recognized as boolean by flex. So to check or uncheck based on a DB result set from a CF componenet you need to actually check the value. I've attached my sample code for anyone else having trouble with this:
    <mx:DataGrid id="chkListDG" dataProvider="{parentApplication.ATService.getCheckList.lastResult}"width="
    100%" height="100%">
    <mx:columns>
    <mx:DataGridColumn textAlign="center" headerText="" dataField="CHKLIST_ID" width="30">
    <mx:itemRenderer>
    <mx:Component>
    <mx:CheckBox selected="{data.CHK_STATUS == 'true'}" click="dbChange()">
    <mx:Script>
    <![CDATA[
    import mx.controls.Alert; 
    private function dbChange():void{ 
    if (parentDocument.chkListDG.selectedItem.CHK_STATUS == 'false'){parentDocument.chkListDG.selectedItem.CHK_STATUS =
    'true'}
    else{parentDocument.chkListDG.selectedItem.CHK_STATUS =
    'false'};
    parentApplication.ATService.chkListSave(parentDocument.chkListDG.selectedItem.CHKLIST_ID,p arentDocument.chkListDG.selectedItem.CHK_STATUS);
    ]]>
    </mx:Script>
     </mx:CheckBox>  
    </mx:Component>  
    </mx:itemRenderer>
     </mx:DataGridColumn>
     <mx:DataGridColumn headerText="Description" dataField="DESCRIPTION"/>
     <mx:DataGridColumn headerText="Value" dataField="CHK_STATUS"/>
     </mx:columns>  
    </mx:DataGrid>

  • Datagrid checkbox headerrenderer check off problem

    I have a datagrid where one column has select option like what we have in mail inboxes. User can select one or many row items to perform any actions by selecting the checkbox. It has also one select all option which is shown in the header renderer of that particular column. If user clicks on that all checkboxes gets selected.
    I have done that but the problem is that whenever i am performing any action by selecting all(header checkbox) and as a result the datagrid sometimes sets visible off or switches to some other mxml component from the component which is holding the datagrid and after coming back from that scenario again to the datagrid, its seen that the checkbox is still checked ... i want that checkbox to set to non-checked.
    help me.

    Hi subhajit nag,
    Say the below is your mxml component in viewStack...
    <your component>
    <mx:Script>
    <![CDATA[
    [Bindable]private var headerChecked:Boolean = false;
    private function onShow():void
         headerChecked = false;
    ]]>
    </mx:Script>
    </your component>
    <mx:DataGrid x="35" y="10" id="mydg">
            <mx:columns>        
                <mx:DataGridColumn editable="true" sortable="false">
                 <mx:headerRenderer>
                  <mx:Component>
                            <mx:CheckBox selected="{outerDocument.headerChecked}" click="checkUnCheckCheckBoxes()">
                             <mx:Script>
                      <![CDATA[
                       import mx.collections.ArrayCollection;
                   private function checkUnCheckCheckBoxes():void
                      // You can handle your logic what you want to do when header check box is clicked....   
                      ]]>
                  </mx:Script>
                            </mx:CheckBox>
                        </mx:Component>
                 </mx:headerRenderer>
                    <mx:itemRenderer>                
                        <mx:Component>
                            <mx:CheckBox selected="{data.isSelected}" click="{data.recselected = !data.recselected}"/>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
                <mx:DataGridColumn headerText="Column 1" dataField="firstName"/>
                <mx:DataGridColumn headerText="Column 2" dataField="lastName"/>           
            </mx:columns>
        </mx:DataGrid>
    So you just need to change the value of the headerChecked  bindable variable to false..in show event for your first scenario...and your header check box is automatically unselected because this check box is binded to a bindable variable to which you are setting to false...
    For your second scenario....you can use the same changing the headerChecked value to false...
    You need to set this varibale to false in your second scenario where you know that your Header Render datagrid is making it visible after you made it unvisible...
    say you have clicked header check box and you made this datagrid invisible and this header checkbox datagrid will be visible once again when you click toggle button so set the value to false in the toggle button click function....
    private function toggleButtonClickHandler():void
         headerChecked = false;
         yourHeaderChkDataGrid.visible = true;
         yourAnotherDG.visible = false;
    Hope this is clear for you now...Try this and let me know...
    Thanks,
    Bhasker Chari

  • Checkbox renderer

    Hi
    i have a data grid with one of its column having check box as
    renderer.
    check box is visible for only some rows based on a
    condition.and this condition is in a function which is called from
    updateDiaplayList() function.
    but,the checkbox some how appears twice only for the first
    row in the data grid.
    the condition function is
    public function checkDelPermission():void{
    var checkpermissioninstance:CheckPermission = new
    CheckPermission();
    checkpermissioninstance.permissions = [8];
    if(data.hasOwnProperty("permission")){
    checkpermissioninstance.permBit = data.permission;
    var delpermission:ArrayCollection =
    checkpermissioninstance.getPermissions()
    if(delpermission!=null){
    this.logmessage("==== "+data.id+" =========del permisison
    =="+ delpermission[0]);
    if(delpermission[0]==true){
    this.visible = true;
    else{
    this.visible = false;
    else
    this.visible = false;
    and updatedisplaylist() is
    override protected function
    updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
    super.updateDisplayList(unscaledWidth,unscaledHeight);
    checkDelPermission();
    var n:int = numChildren;
    for (var i:int = 0; i < n; i++)
    var c:DisplayObject = getChildAt(i);
    if (!(c is TextField))
    c.x = (unscaledWidth - c.width) / 2;
    c.y = 0;
    the log message is printed twice for the first row data..and
    for all other rows in a datagrid,every thing appears as expected.
    and this happens randomly and not alwayss..
    Thanks
    chandana

    thank u very much..
    in set data method,i added the following
    override public function set data(value:Object):void{
    if(value != null){
    super.data = value;
    if((data.chkselected==null) ||
    (data.chkselected=="undefined")){
    data.chkselected = false;
    this.selected = data.chkselected;
    this works when i change checkbox selection in each row..
    i have another problem..can u please help me in solving this
    i have a checkbox as header renderer..
    On click, it is selectiing/deselecting only the checkboxes of
    rows which are visible and when i scroll the datagrid,other
    checkboxes are not selected/deselected
    thanks

  • Datagrid Item Renderer not displaying correct data

    I have a datagrid that displays information from a web service, which is refreshed every 60 seconds.
    When the status is no 0 for a line a corresponding color is used to fill in the background.  I created a Item Renderer to fill in the background color.
    When the table is initially created, the colors are correct.  After the data is refreshed, then the background color value is carried over to the next row.
    The Spark DataGrid works better than the MX AdvancedDateGrid or DataGrid.  This was working in Flex 3, but I used an function which replaced the DataGridColumn that doesn't work in Flex 4.
    protected function init(event:FlexEvent):void
                    var showBackground:Boolean = false;
                    var backgroundColor:uint = new uint();
                    var labelTextColor:uint = new uint();
                    var dgListData:DataGridListData = listData as DataGridListData;
                    var dataGrid:DataGrid = dgListData.owner as DataGrid;
                    // comment this out if you want to see the background over the
                    // selection and highlight indicators
                    if (dataGrid.isItemSelected(data) || dataGrid.isItemHighlighted(data))
                        // clear the background so you can see the selection/highlight colors
                        showBackground = false;
                        return;
                    switch(data["MessageLevel"])
                        case 0:
                            showBackground = false;
                            backgroundColor = 0xFFFFFF;
                            labelTextColor = 0x000000;
                            break;
                        case 1:
                            showBackground = true;
                            backgroundColor = 0x00FF00;  // light green
                            labelTextColor = 0x000000;
                            break;
                        case 2:
                            showBackground = true;
                            backgroundColor = 0x015F00; // dark green
                            labelTextColor = 0xFFFFFF;
                            break;
                        case 3:
                            showBackground = true;
                            backgroundColor = 0xFDFF00; // yellow
                            labelTextColor = 0x000000;
                            break;
                        case 4:
                            showBackground = true;
                            backgroundColor = 0x7F6E3F; // tan
                            labelTextColor = 0xFFFFFF;
                            break;
                        case 5:
                            showBackground = true;
                            backgroundColor = 0xFF8A00; // orange;
                            labelTextColor = 0x000000;
                            break;
                        case 6:
                            showBackground = true;
                            backgroundColor = 0xFFDFE0; // rose
                            labelTextColor = 0x000000;
                            break;
                        case 7:
                            showBackground = true;
                            backgroundColor = 0xFF0000; //red
                            labelTextColor = 0xFFFFFF;
                            break;   
                    if(showBackground) {
                        var bgFill:SolidColor = new SolidColor();
                        bgFill.color = backgroundColor;
                        dataContainer.setStyle("backgroundColor",backgroundColor);
                        lblData.setStyle("color", labelTextColor);

    I added an "else" statement to make sure that a color was always added, even if the level was 0.  I also added a backgroundAlpha style to both, to turn the value off or on.
    So far, this seems to be the solution.
    if(showBackground) {
    var bgFill:SolidColor = new SolidColor();
    bgFill.color = backgroundColor;
    dataContainer.setStyle("backgroundColor",backgroundColor);
    labelDisplay.setStyle("color", labelTextColor);
    dataContainer.setStyle("backgroundAlpha",1);
    } else {
    dataContainer.setStyle("backgroundColor",backgroundColor);
    labelDisplay.setStyle("color", labelTextColor);
    dataContainer.setStyle("backgroundAlpha",0);

  • COMBOBOX & CHECKBOX RENDERER IN JTABLE

    Hi,
    I created JXTable by using swingx palette in Netbeans IDE. In two columns of my table, for each row I want to put checkboxes and comboboxes. I searched the ways on internet and I finalise my code. However, because I used cell editor, I just see my checkboxes and comboboxes when I enter a specific cell. I read all tutorials but unfortunately I cannot learn how to use renderer to show comboboxes and checkboxes all the time. In below you could check my code and if possible please teach how to use renderers and try to give feedback to my code by fixing it. Thank you.
    *(P.S Please don't send any web site for tutorial, i searched almost all of them; but I can't understand the logic of it.)*
    // SET UP THE COMBO BOX
    public void setUpOverwriteValueColumn(JXTable table, TableColumn overwriteValCol) {
    valueCombo = new JComboBox();
    Field field = new Field();
    ArrayList values = new ArrayList();
    values = field.getValues();
    for(String a:values){
    valueCombo.addItem(a);
    overwriteValCol.setCellEditor(new DefaultCellEditor(valueCombo));
    DefaultTableCellRenderer renderer = new DefaultTableCellRenderer();
    renderer.setToolTipText("Click for combo box");
    overwriteValCol.setCellRenderer(renderer);
    // SET UP THE CHECK BOX
    public void setUpOverwriteColumn(JXTable table, TableColumn overwriteCol) {
    valueChk = new JCheckBox();
    overwriteCol.setCellEditor(new DefaultCellEditor(valueChk));
    DefaultTableCellRenderer renderer = new DefaultTableCellRenderer();
    renderer.setToolTipText("Click for check box");
    overwriteCol.setCellRenderer(renderer);
    setUpOverwriteColumn(monitorTable, monitorTable.getColumnModel().getColumn(3)); //add checkbox to 3rd column
    setUpOverwriteValueColumn(monitorTable, monitorTable.getColumnModel().getColumn(4)); //add combobox to 4th column

    Finally I can add renderers. But, now I have different question. When user clicks on the checkbox I want to enable the combo box. I mean if user clicks the checkbox in row 3; only the combo box which placed in row 3 should be enabled; other combos in other rows should not be enabled. Please help if you know the answer. Here is my code:
    public class ComboBoxRenderer extends JComboBox implements TableCellRenderer{
        public ComboBoxRenderer(Vector items) {
            super(items);
            setOpaque(false);
        public Component getTableCellRendererComponent(
                                                    JTable table,
                                                    Object value,
                                                    boolean isSelected,
                                                    boolean hasFocus,
                                                    int row,
                                                    int column){
            if (isSelected && !hasFocus){
                setBackground(table.getSelectionBackground());
                setForeground(table.getSelectionForeground());
            }else{
                setBackground(table.getBackground());
                setForeground(table.getForeground());
              setSelectedItem(value);
            return this;
    public class CheckBoxRenderer extends JCheckBox implements TableCellRenderer
      public CheckBoxRenderer() {
        setOpaque(false);
        setHorizontalAlignment(CENTER);
        setVerticalAlignment(CENTER);
      public Component getTableCellRendererComponent(
                                                        JTable table,
                                                        Object value,
                                                        boolean isSelected,
                                                        boolean hasFocus,
                                                        int row,
                                                        int column) {
        if (value != null) {
          this.setSelected( ( (Boolean) value).booleanValue());
        return this;
    }To show:
    public void setUpOverwriteValueColumn(JXTable table,
                                     TableColumn overwriteValCol) {
            Vector v = new Vector();
            Field field = new Field();
                ArrayList <String> values = new ArrayList<String>();
                values = field.getValues();
                for(String a:values){
                    v.addElement(a);
                ComboBoxRenderer renderer = new ComboBoxRenderer(v);
                overwriteValCol.setCellRenderer(renderer);
        // SET UP THE CHECK BOX
        public void setUpOverwriteColumn(JXTable table, TableColumn overwriteCol) {
                CheckBoxRenderer renderer = new CheckBoxRenderer();
                overwriteCol.setCellRenderer(renderer);
        }Edited by: duygu_simsek on Jun 18, 2009 11:27 AM

  • DataGrid not rendering images during scrolling

    I've created a "Reusable Inline Item Renderer" to display an
    image in a DataGrid's column, as is shown here:
    http://www.adobe.com/devnet/flex/quickstart/using_item_renderers/#reusable_item
    With one difference: In the example the source of the Image
    component in the item rendered is being set to the URL of an image
    file. In mine I am setting the source as a Bitmap object, the
    Bitmap being a public and Bindable property of an Object in an
    Array. This Array of Objects is the DataGrid's dataProvider.
    And it works fine, except that when I scroll the DataGrid,
    any images that have been scroll off screen and then back on again
    are blank where the image used to be. I've tried tracing out the
    source of each Image when it renders and it still has a Bitmap
    object as it's source even though it is no longer displaying
    it.

    I have been beating my head against the wall on this problem too for awhile now.  There is precious little mentioned anywhere about it.
    I tried to recreate your code, as follows, to solve my problem but now am getting compilation errors.
    Can you please share your code segment on how you did it?    (It would also be helpful to see how you call it too.)  I am loading images from the web with Loader.
    This does not compile:
            public function get data():BitmapData {
                return _data;
            public function set data(value:BitmapData):void {
                _data = value;
                 var newBitmap:Bitmap = new Bitmap(value);
                source = newBitmap;
    In my main class, the data provider is already populated, so I am replacing the cell with the bitmap.
    Thanks for any help you can give.

  • Datagrid Checkbox - Select All Headerrenderer

    i have a datagrid that utilizes an itemrenderer and headerrender for the same column to have checkboxes and also a select all checkbox in the column header...as such:
    <mx:DataGrid width="100%" height="100%" id="dg" dataProvider="{employees}" sortableColumns="false"
                                draggableColumns="false">
                                <mx:columns>
                                    <mx:DataGridColumn width="30" textAlign="center">
                                        <mx:headerRenderer>
                                            <mx:Component>
                                                <mx:CheckBox/>
                                            </mx:Component>
                                        </mx:headerRenderer>
                                        <mx:itemRenderer>
                                            <mx:Component>
                                                <mx:CheckBox selected="{(data.@isSelected == 'true')?true:false}" click="{data.@isSelected = (data.@isSelected != 'true') ? 'true' : 'false';}"/>
                                            </mx:Component>
                                        </mx:itemRenderer>
                                    </mx:DataGridColumn>
                                    <mx:DataGridColumn headerText="Item ID" dataField="@id" width="60"/>
                                    <mx:DataGridColumn headerText="Date" dataField="@date" width="85"/>
                                </mx:columns>
                            </mx:DataGrid>
    my XMLList is as follows (that populates the datagrid):
    <mx:XMLList id="employees">
            <request id="720" date="Aug 21 09" isSelected="false"/>
            <request id="721" date="Aug 21 09" isSelected="false"/>
            <request id="722" date="Aug 21 09" isSelected="false"/>
            <request id="723" date="Aug 21 09" isSelected="false"/>
    </mx:XMLList>
    Now, if I select a rows checkbox, it works fine and updates the XMLList with the new value of isSelected for that row.
    My question is this: how do I make it so that clicking on the checkbox inside the headerrenderer selects all the checkboxes in the itemrenderer?  I know that Flex doesn't build rows that are not in view yet, so what needs to happen here in order to a) select the itemrenderer checkboxes and b) update the related XMLList so all isSelected update to either true/false.
    Thanks!

    Thanks for putting me on the right track for this...quick question:
    My arrayCollection looks like this:
    [Bindable]
    private var myAC:ArrayCollection = new ArrayCollection([
        {id:1, date: 'Bob Jones', isSelected: true},
        {id:2, date: 'Jane Smith', isSelected: true},   
        {id:3, date: 'Doug Johnson', isSelected: false},
        {id:4, date: 'Bob Jones', isSelected: true},
        {id:5, date: 'Jane Smith', isSelected: true},   
        {id:6, date: 'Doug Johnson', isSelected: false},
        {id:7, date: 'Bob Jones', isSelected: true},
        {id:8, date: 'Jane Smith', isSelected: true},   
        {id:9, date: 'Doug Johnson', isSelected: false},      
    And the datagrid displays this correctly, so no problems there.
    Now, I have a function that gets called when the checkbox in the header is selected, but am stuck here as to how to update all of the isSelected values in myAC to true.
    This is what I tried with no success...any thoughts?
    public function checkAll():void {
        for(var i:int=0; i < myAC.length; i++){
            myAC.itemUpdated(myAC.getItemAt(i).isSelected, false, true);
    Thanks!

Maybe you are looking for