4 Replies Latest reply on Oct 21, 2009 9:36 PM by Phoenix_Guru

    Hiding the Item Renderer???

    Phoenix_Guru Level 1

      Hi,

       

      I have a datagrid with checkboxes in a column:

       

      <mx:DataGridColumn dataField="dValue" editable="false">
       
      <mx:itemRenderer>
         
      <mx:Component>
           
      <mx:CheckBox selected="{data.dValue == 'true'}"/>
         
      </mx:Component>
       
      </mx:itemRenderer>
      </mx:DataGridColumn>

      Now what I want is to hide the checkBox when the dValue is false. How do i do that? I tried visible="{data.dValue=='false'}" but it did not work.

      How do I hide my checkbox when dValue is false??

       

      Please Help!!

       

      Thanks,

      Saurabh

        • 1. Re: Hiding the Item Renderer???
          JeffryHouser Level 4

          First off, the code you wrote:

           

          visible="{data.dValue=='false'}"

           

          Will set the visible property to true when data.DValue is false.  Is that your problem?

           

          That said, using binding in an itemRenderer is generally frowned upon for performance reasons.  Write some ActionScript and respond to the dataChange event

           

          <mx:DataGridColumn dataField="dValue" editable="false">
           
          <mx:itemRenderer>
             
          <mx:Component>
               
          <mx:CheckBox selected="{data.dValue == 'true'}" creationComplete="init()>

             <mx:Script>

              public function init():void{  this.addEventListener(FlexEvent.DATA_CHANGE,onDataChange) }

           

            public function onDataChange(e:FlexEvent):void{

              if(data.dValue == false){

              this.visible = false;

             }

          }

          </mx:Script>

             </mx:CheckBox>
             
          </mx:Component>
           
          </mx:itemRenderer>
          </mx:DataGridColumn>

           

           

          I wrote this code off the top of my head, it is untested.

          • 2. Re: Hiding the Item Renderer???
            Phoenix_Guru Level 1

            Hi Jeff,

             

            I tried you approach of using data change event but it still does not seem to work. Can you please check your code once. I corrected my condition to check data.dValue==true for visibility. The selection part of is working like a charm. Its just the visiblity part that I am not able to get working.

             

            Thanks,

            Saurabh

            • 3. Re: Hiding the Item Renderer???
              Flex harUI Adobe Employee

              You can't use visible to hide renderers.  The recycling system use visible to control off-screen renderers.  Try using alpha instead, but keep in mind that having a blank cell is sort of strange.

               

              Alex Harui

              Flex SDK Developer

              Adobe Systems Inc.

              Blog: http://blogs.adobe.com/aharui

              • 4. Re: Hiding the Item Renderer???
                Phoenix_Guru Level 1

                I solved the problem by using an external itemrenderer. The code is below:

                 

                 

                 

                 

                 

                 

                 

                 

                 

                 

                 

                 

                 

                 

                 

                 

                 

                 

                 

                 

                 

                 

                <?xml version="1.0" encoding="utf-8"?>

                <mx:HBox

                 

                 

                 

                xmlns:mx="http://www.adobe.com/2006/mxml">

                 

                    <mx:Script>

                 

                 

                 

                 

                 

                          <![CDATA[

                 

                 

                 

                 

                 

                 

                 

                 

                 

                 

                              override public function set data(value:Object):void

                 

                 

                 

                 

                 

                 

                 

                 

                 

                 

                 

                 

                              {

                 

                 

                 

                 

                 

                 

                 

                 

                 

                 

                 

                                    super.data = value;

                 

                 

                 

                 

                 

                 

                 

                 

                                    if(value.vis == true)

                                    {

                 

                                         cb.visible =

                true;

                                         cb.selected =

                true;

                                    }

                 

                 

                 

                 

                 

                 

                 

                 

                                    else

                 

                 

                 

                                    {

                                         cb.visible =

                false;

                                         cb.selected =

                false;

                                    }

                              }

                 

                ]]>

                 

                 

                 

                 

                 

                 

                </mx:Script>

                 

                 

                 

                 

                 

                 

                 

                <mx:CheckBox id="cb"/>

                 

                </mx:HBox>

                 

                Do you see any possible issues with this code?

                 

                Thanks,

                Saurabh