3 Replies Latest reply on Jun 20, 2007 12:22 PM by ntsiii

    Access to Data Grid Item Renderer Component Programmatically

    ronaldruly
      Hi All.

      I have a problem. I declare a datagrid item renderer with mxml like below:

      <mx:DataGrid id="adg" dataProvider="{dp}" >
      <mx:columns>
      <mx:DataGridColumn>
      <mx:itemRenderer>
      <mx:Component>
      <mx:Button id="checkBtn" enabled="false"/>
      </mx:Component>
      </mx:itemRenderer>
      </mx:DataGridColumn>
      </mx:columns>
      </mx:DataGrid>

      Obviously, the output of this mxml will be a datagrid with a button named "checkBtn".

      I have another function in the same file, private function enableCheckBtn():void which will enable the checkBtn.

      My question is how the function 'reaches' the checkBtn and set the enabled="true" ?

      in other words...please help me to replace the question mark below.
      private function enableCheckBtn:void{
      ????.enabled=true;
      }

      Thanks and Best Regards
      Ronald
        • 1. Re: Access to Data Grid Item Renderer Component Programmatically
          ntsiii Level 3
          You cannot do it that way.

          You must have the checkbox state set by the itemRenderer from a property in the dataProvider, and have it update the dataProvider property when the user interacts with the check box. To programmatically set a checkbox, find the item in the dataProvider and use the collection API to update it.

          This is because itemRenderers are re-used by Flex whenever you scroll, or the data changes. Only the visible rows even have an itemRenderer. The renderer is like a window to your data and you can't mow the lawn by scraping on the window glass.

          Tracy
          • 2. Re: Access to Data Grid Item Renderer Component Programmatically
            ronaldruly Level 1
            Hi Tracy

            I still don't know how to solve my problem.

            Let me give more details on my problem.

            <mx:DataGrid id="adg" dataProvider="{dp}">
            <mx:DataGridColumn id="lockedByCol" dataField="lockedBy" headerText="Locked By" />
            <mx:DataGridColumn headerText="Action" >
            <mx:itemRenderer>
            <mx:Component>
            <mx:HBox>
            <mx:Button label="Check In" id="checkBtn"/>
            <mx:Button label="Delete" id="delBtn" />
            </mx:HBox>
            </mx:Component>
            </mx:itemRenderer>
            </mx:DataGridColumn>
            </mx:columns>
            </mx:DataGrid>

            Assume that the ArrayCollection 'dp' has 1 column and 4 rows.
            [lockedBy]
            1. Michael
            2. Ronald
            3. ""
            4. Ronald

            Then I want the datagrid to show like below:
            locked By | Action |
            ---------------+--------------------------------------
            Michael | [Delete] |
            Ronald | [Check In] [Delete] |
            | [Check Out] [Delete] |
            Ronald | [Check In] [Delete] |
            ------------------------------------------------------

            that means the if statements are
            if lockedBy=="Michael", then no button
            if lockedBy=="Ronald", then the checkBtn label is set to "Check In"
            if lockedBy="", then the checkBtn label is set to "Check Out".

            I don't know how to link/obtain the lockedBy data per each row in the datagrid and then set the checkBtn per each row respectively.
            Could you help me to solve my problem?

            Thanks very much in advance
            Best Regards
            Ronald


            • 3. Re: Access to Data Grid Item Renderer Component Programmatically
              ntsiii Level 3
              What you want to do is sufficiently complex that doing it in an in-line renderer is not reasonable. so, start off by creating an itemRenderer in a separate mxml file.

              Here is an example that uses a check box:
              http://www.cflex.net/showFileDetails.cfm?ObjectID=559&ChannelID=1

              Your renderer could use "states", or you can just manipulate the visibility and label of the button. This logic will happen in the overrides set data() method.

              Post back if you get stuck.

              Tracy