9 Replies Latest reply on Aug 10, 2007 7:25 AM by kcell

    Flash/Flex itemEditor Rendering Problem!

    FlextasmicD Level 1
      Hi,

      I've created a simple checkbox itemEditer within a DataGrid control. It works swimmingly... you check the box and the data does what it's supposed to do (in this case just grab the ID's of the item's that are checked).

      However, the problem begins when a user decides to scroll up and down the DataGrid to have a peak at those item's not displayed. You can see an example here (click the 'Renew Contracts' button to see the Contract ID's of what you have checked) - click me!

      As you can see, when a user scroll's and flash renders the newly displayed items, it randomly checks and un-checks the checkboxes on the right but if you click the 'Renew Contracts' button again, you'll see that it hasn't actually affected what you litterally checked (which suggests it is infact a rendering issue).

      Any help on making flash behave itself and display check's in checkboxes that have actually been checked by the user would be much appreciated.
        • 1. Re: Flash/Flex itemEditor Rendering Problem!
          FlextasmicD Level 1
          ...and incase it is of any relivance to anybody, i'm using an rendererIsEditor
          • 3. Re: Flash/Flex itemEditor Rendering Problem!
            kcell Level 2
            thats looking very strange ... can you post some code, to get a more detailed idea what went wrong ?

            regards,
            kcell
            • 4. Re: Flash/Flex itemEditor Rendering Problem!
              FlextasmicD Level 1
              Yep, no problem...

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:InlineCheckbox="*">
              <mx:Script>
              <![CDATA[
              [Bindable]
              public var SelectedContracts;
              public function RenewContractsClick():void
              {
              SelectedContracts = "";
              if(ContractsRequest.Count > 1)
              {
              for(var i = 0; i < ContractsRequest.Contract.length; i++)
              {
              if(ContractsRequest.Contract .Selected == "true")
              {
              SelectedContracts += ContractsRequest.Contract
              .ContractID + ",";
              }
              }
              }
              else
              {
              if(ContractsRequest.Contract.Selected == "true")
              {
              SelectedContracts = ContractsRequest.Contract.ContractID + ",";
              }
              }
              }
              ]]>
              </mx:Script>
              <mx:Model id="ContractsRequest">
              <Contracts>
              <Contract>
              <ContractID>5657</ContractID>
              <OrganisationID>10332</OrganisationID>
              <OrganisationName>VBI GROUP PLC</OrganisationName>
              <StartDate>01/04/2002</StartDate>
              <EndDate>31/03/2003</EndDate>
              <Product>04253 HELPDESK SUPPORT FACTS 1 YEAR</Product>
              <SON>S026866</SON>
              <LineNumber>10</LineNumber>
              <SONLN>S026866/10</SONLN>
              <SiteCount>1</SiteCount>
              <Selected>true</Selected>
              </Contract>
              <Contract>
              <ContractID>1737</ContractID>
              <OrganisationID>10332</OrganisationID>
              <OrganisationName>VBI GROUP PLC</OrganisationName>
              <StartDate>01/08/2000</StartDate>
              <EndDate>31/07/2001</EndDate>
              <Product>04253 HELPDESK SUPPORT FACTS 1 YEAR</Product>
              <SON>S012877</SON>
              <LineNumber>40</LineNumber>
              <SONLN>S012877/40</SONLN>
              <SiteCount>1</SiteCount>
              <Selected>true</Selected>
              </Contract>
              <Contract>
              <ContractID>10242</ContractID>
              <OrganisationID>10332</OrganisationID>
              <OrganisationName>VBI GROUP PLC</OrganisationName>
              <StartDate>01/03/2004</StartDate>
              <EndDate>28/02/2005</EndDate>
              <Product>06979 SM TRISCAN 1 YEAR</Product>
              <SON>S041431</SON>
              <LineNumber>10</LineNumber>
              <SONLN>S041431/10</SONLN>
              <SiteCount>1</SiteCount>
              <Selected>true</Selected>
              </Contract>
              <Contract>
              <ContractID>18500</ContractID>
              <OrganisationID>10332</OrganisationID>
              <OrganisationName>VBI GROUP PLC</OrganisationName>
              <StartDate>27/05/2007</StartDate>
              <EndDate>26/08/2007</EndDate>
              <Product>SC001 VBI QTR SUPPORT CONTRACT </Product>
              <SON>S061685</SON>
              <LineNumber>10</LineNumber>
              <SONLN>S061685/10</SONLN>
              <SiteCount>1</SiteCount>
              <Selected>true</Selected>
              </Contract>
              <Contract>
              <ContractID>12996</ContractID>
              <OrganisationID>10332</OrganisationID>
              <OrganisationName>VBI GROUP PLC</OrganisationName>
              <StartDate>01/03/2005</StartDate>
              <EndDate>28/02/2006</EndDate>
              <Product>06979 SM TRISCAN 1 YEAR</Product>
              <SON>S049498</SON>
              <LineNumber>10</LineNumber>
              <SONLN>S049498/10</SONLN>
              <SiteCount>1</SiteCount>
              <Selected>true</Selected>
              </Contract>
              <Contract>
              <ContractID>376</ContractID>
              <OrganisationID>10332</OrganisationID>
              <OrganisationName>VBI GROUP PLC</OrganisationName>
              <StartDate>01/03/2000</StartDate>
              <EndDate>28/02/2001</EndDate>
              <Product>06979 SM TRISCAN 1 YEAR</Product>
              <SON>BN7511</SON>
              <LineNumber>10</LineNumber>
              <SONLN>BN7511/10</SONLN>
              <SiteCount>1</SiteCount>
              <Selected>true</Selected>
              </Contract>
              <Contract>
              <ContractID>14669</ContractID>
              <OrganisationID>10332</OrganisationID>
              <OrganisationName>VBI GROUP PLC</OrganisationName>
              <StartDate>06/11/2005</StartDate>
              <EndDate>31/01/2006</EndDate>
              <Product>08245 VBI SUPPORT 3 MONTHS</Product>
              <SON>S053098</SON>
              <LineNumber>10</LineNumber>
              <SONLN>S053098/10</SONLN>
              <SiteCount>523</SiteCount>
              <Selected>true</Selected>
              </Contract>
              <Contract>
              <ContractID>12997</ContractID>
              <OrganisationID>10332</OrganisationID>
              <OrganisationName>VBI GROUP PLC</OrganisationName>
              <StartDate>01/03/2005</StartDate>
              <EndDate>28/02/2006</EndDate>
              <Product>06979 SM TRISCAN 1 YEAR</Product>
              <SON>S049499</SON>
              <LineNumber>10</LineNumber>
              <SONLN>S049499/10</SONLN>
              <SiteCount>1</SiteCount>
              <Selected>true</Selected>
              </Contract>
              <Contract>
              <ContractID>10243</ContractID>
              <OrganisationID>10332</OrganisationID>
              <OrganisationName>VBI GROUP PLC</OrganisationName>
              <StartDate>01/03/2004</StartDate>
              <EndDate>28/02/2005</EndDate>
              <Product>06979 SM TRISCAN 1 YEAR</Product>
              <SON>S041432</SON>
              <LineNumber>10</LineNumber>
              <SONLN>S041432/10</SONLN>
              <SiteCount>1</SiteCount>
              <Selected>true</Selected>
              </Contract>
              <Contract>
              <ContractID>10674</ContractID>
              <OrganisationID>10332</OrganisationID>
              <OrganisationName>VBI GROUP PLC</OrganisationName>
              <StartDate>01/06/2004</StartDate>
              <EndDate>31/08/2004</EndDate>
              <Product>08210 VBI PERIODIC CHARGE FOR S/W SUP</Product>
              <SON>S042626</SON>
              <LineNumber>20</LineNumber>
              <SONLN>S042626/20</SONLN>
              <SiteCount>1</SiteCount>
              <Selected>true</Selected>
              </Contract>
              <Contract>
              <ContractID>10906</ContractID>
              <OrganisationID>10332</OrganisationID>
              <OrganisationName>VBI GROUP PLC</OrganisationName>
              <StartDate>01/06/2004</StartDate>
              <EndDate>31/08/2004</EndDate>
              <Product>08245 VBI SUPPORT 3 MONTHS</Product>
              <SON>S043294</SON>
              <LineNumber>10</LineNumber>
              <SONLN>S043294/10</SONLN>
              <SiteCount>1</SiteCount>
              <Selected>true</Selected>
              </Contract>
              <Contract>
              <ContractID>17070</ContractID>
              <OrganisationID>10332</OrganisationID>
              <OrganisationName>VBI GROUP PLC</OrganisationName>
              <StartDate>29/08/2006</StartDate>
              <EndDate>28/11/2006</EndDate>
              <Product>SC001 VBI QTR SUPPORT CONTRACT </Product>
              <SON>BN9230</SON>
              <LineNumber>10</LineNumber>
              <SONLN>BN9230/10</SONLN>
              <SiteCount>626</SiteCount>
              <Selected>true</Selected>
              </Contract>
              <Contract>
              <ContractID>3832</ContractID>
              <OrganisationID>10332</OrganisationID>
              <OrganisationName>VBI GROUP PLC</OrganisationName>
              <StartDate>01/09/2001</StartDate>
              <EndDate>31/08/2002</EndDate>
              <Product>06979 SM TRISCAN 1 YEAR</Product>
              <SON>S020524</SON>
              <LineNumber>10</LineNumber>
              <SONLN>S020524/10</SONLN>
              <SiteCount>1</SiteCount>
              <Selected>true</Selected>
              </Contract>
              <Count>83</Count>
              </Contracts>
              </mx:Model>
              <mx:DataGrid editable="true" right="10" left="10" top="40" bottom="40" dataProvider="{ContractsRequest.Contract}">
              <mx:columns>
              <mx:DataGridColumn editable="false" headerText="Contract" dataField="ContractID" width="70"/>
              <mx:DataGridColumn editable="false" headerText="Organisation" dataField="OrganisationName" width="250"/>
              <mx:DataGridColumn editable="false" headerText="Start Date" dataField="StartDate" width="100"/>
              <mx:DataGridColumn editable="false" headerText="End Date" dataField="EndDate" width="100"/>
              <mx:DataGridColumn editable="false" headerText="Product" dataField="Product"/>
              <mx:DataGridColumn editable="false" headerText="SON/Line No." dataField="SONLN" width="120"/>
              <mx:DataGridColumn editable="false" headerText="No. Sites" dataField="SiteCount" width="70"/>
              <mx:DataGridColumn editable="true" headerText="" dataField="Selected" width="70" rendererIsEditor="true" editorDataField="Value">
              <mx:itemRenderer>
              <mx:Component>
              <InlineCheckbox:InlineCheckbox/>
              </mx:Component>
              </mx:itemRenderer>
              </mx:DataGridColumn>
              </mx:columns>
              </mx:DataGrid>
              <mx:Button label="Renew Contract(s)..." right="10" bottom="10" click="RenewContractsClick()"/>
              <mx:Text x="10" y="12" text="{SelectedContracts}"/>
              </mx:Application>
              • 5. Flash/Flex itemEditor Rendering Problem!
                kcell Level 2
                try this code:
                - deleted the InlineCheckbox
                - changed parts in the actionscript

                Does this fit you needs?

                please note the that the array [ i ] ( ContractsRequest.Contract [ i ] )are removed by the editor in the forum

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:InlineCheckbox="*">
                <mx:Script>
                <![CDATA[
                import mx.controls.CheckBox;
                [Bindable]
                public var SelectedContracts:String;
                public function RenewContractsClick():void
                {
                SelectedContracts = "";
                if(ContractsRequest.Count > 1)
                {
                for(var i:int = 0; i < ContractsRequest.Contract.length; i++)
                {
                if(ContractsRequest.Contract .Selected == true)
                {
                SelectedContracts += ContractsRequest.Contract
                .ContractID + ",";
                }
                }
                }
                else
                {
                if(ContractsRequest.Contract .Selected == true)
                {
                SelectedContracts = ContractsRequest.Contract
                .ContractID + ",";
                }
                }
                }
                ]]>
                </mx:Script>
                <mx:Model id="ContractsRequest">
                <Contracts>
                <Contract>
                <ContractID>5657</ContractID>
                <OrganisationID>10332</OrganisationID>
                <OrganisationName>VBI GROUP PLC</OrganisationName>
                <StartDate>01/04/2002</StartDate>
                <EndDate>31/03/2003</EndDate>
                <Product>04253 HELPDESK SUPPORT FACTS 1 YEAR</Product>
                <SON>S026866</SON>
                <LineNumber>10</LineNumber>
                <SONLN>S026866/10</SONLN>
                <SiteCount>1</SiteCount>
                <Selected>true</Selected>
                </Contract>
                <Contract>
                <ContractID>1737</ContractID>
                <OrganisationID>10332</OrganisationID>
                <OrganisationName>VBI GROUP PLC</OrganisationName>
                <StartDate>01/08/2000</StartDate>
                <EndDate>31/07/2001</EndDate>
                <Product>04253 HELPDESK SUPPORT FACTS 1 YEAR</Product>
                <SON>S012877</SON>
                <LineNumber>40</LineNumber>
                <SONLN>S012877/40</SONLN>
                <SiteCount>1</SiteCount>
                <Selected>true</Selected>
                </Contract>
                <Contract>
                <ContractID>10242</ContractID>
                <OrganisationID>10332</OrganisationID>
                <OrganisationName>VBI GROUP PLC</OrganisationName>
                <StartDate>01/03/2004</StartDate>
                <EndDate>28/02/2005</EndDate>
                <Product>06979 SM TRISCAN 1 YEAR</Product>
                <SON>S041431</SON>
                <LineNumber>10</LineNumber>
                <SONLN>S041431/10</SONLN>
                <SiteCount>1</SiteCount>
                <Selected>true</Selected>
                </Contract>
                <Contract>
                <ContractID>18500</ContractID>
                <OrganisationID>10332</OrganisationID>
                <OrganisationName>VBI GROUP PLC</OrganisationName>
                <StartDate>27/05/2007</StartDate>
                <EndDate>26/08/2007</EndDate>
                <Product>SC001 VBI QTR SUPPORT CONTRACT </Product>
                <SON>S061685</SON>
                <LineNumber>10</LineNumber>
                <SONLN>S061685/10</SONLN>
                <SiteCount>1</SiteCount>
                <Selected>true</Selected>
                </Contract>
                <Contract>
                <ContractID>12996</ContractID>
                <OrganisationID>10332</OrganisationID>
                <OrganisationName>VBI GROUP PLC</OrganisationName>
                <StartDate>01/03/2005</StartDate>
                <EndDate>28/02/2006</EndDate>
                <Product>06979 SM TRISCAN 1 YEAR</Product>
                <SON>S049498</SON>
                <LineNumber>10</LineNumber>
                <SONLN>S049498/10</SONLN>
                <SiteCount>1</SiteCount>
                <Selected>true</Selected>
                </Contract>
                <Contract>
                <ContractID>376</ContractID>
                <OrganisationID>10332</OrganisationID>
                <OrganisationName>VBI GROUP PLC</OrganisationName>
                <StartDate>01/03/2000</StartDate>
                <EndDate>28/02/2001</EndDate>
                <Product>06979 SM TRISCAN 1 YEAR</Product>
                <SON>BN7511</SON>
                <LineNumber>10</LineNumber>
                <SONLN>BN7511/10</SONLN>
                <SiteCount>1</SiteCount>
                <Selected>true</Selected>
                </Contract>
                <Contract>
                <ContractID>14669</ContractID>
                <OrganisationID>10332</OrganisationID>
                <OrganisationName>VBI GROUP PLC</OrganisationName>
                <StartDate>06/11/2005</StartDate>
                <EndDate>31/01/2006</EndDate>
                <Product>08245 VBI SUPPORT 3 MONTHS</Product>
                <SON>S053098</SON>
                <LineNumber>10</LineNumber>
                <SONLN>S053098/10</SONLN>
                <SiteCount>523</SiteCount>
                <Selected>true</Selected>
                </Contract>
                <Contract>
                <ContractID>12997</ContractID>
                <OrganisationID>10332</OrganisationID>
                <OrganisationName>VBI GROUP PLC</OrganisationName>
                <StartDate>01/03/2005</StartDate>
                <EndDate>28/02/2006</EndDate>
                <Product>06979 SM TRISCAN 1 YEAR</Product>
                <SON>S049499</SON>
                <LineNumber>10</LineNumber>
                <SONLN>S049499/10</SONLN>
                <SiteCount>1</SiteCount>
                <Selected>true</Selected>
                </Contract>
                <Contract>
                <ContractID>10243</ContractID>
                <OrganisationID>10332</OrganisationID>
                <OrganisationName>VBI GROUP PLC</OrganisationName>
                <StartDate>01/03/2004</StartDate>
                <EndDate>28/02/2005</EndDate>
                <Product>06979 SM TRISCAN 1 YEAR</Product>
                <SON>S041432</SON>
                <LineNumber>10</LineNumber>
                <SONLN>S041432/10</SONLN>
                <SiteCount>1</SiteCount>
                <Selected>true</Selected>
                </Contract>
                <Contract>
                <ContractID>10674</ContractID>
                <OrganisationID>10332</OrganisationID>
                <OrganisationName>VBI GROUP PLC</OrganisationName>
                <StartDate>01/06/2004</StartDate>
                <EndDate>31/08/2004</EndDate>
                <Product>08210 VBI PERIODIC CHARGE FOR S/W SUP</Product>
                <SON>S042626</SON>
                <LineNumber>20</LineNumber>
                <SONLN>S042626/20</SONLN>
                <SiteCount>1</SiteCount>
                <Selected>true</Selected>
                </Contract>
                <Contract>
                <ContractID>10906</ContractID>
                <OrganisationID>10332</OrganisationID>
                <OrganisationName>VBI GROUP PLC</OrganisationName>
                <StartDate>01/06/2004</StartDate>
                <EndDate>31/08/2004</EndDate>
                <Product>08245 VBI SUPPORT 3 MONTHS</Product>
                <SON>S043294</SON>
                <LineNumber>10</LineNumber>
                <SONLN>S043294/10</SONLN>
                <SiteCount>1</SiteCount>
                <Selected>true</Selected>
                </Contract>
                <Contract>
                <ContractID>17070</ContractID>
                <OrganisationID>10332</OrganisationID>
                <OrganisationName>VBI GROUP PLC</OrganisationName>
                <StartDate>29/08/2006</StartDate>
                <EndDate>28/11/2006</EndDate>
                <Product>SC001 VBI QTR SUPPORT CONTRACT </Product>
                <SON>BN9230</SON>
                <LineNumber>10</LineNumber>
                <SONLN>BN9230/10</SONLN>
                <SiteCount>626</SiteCount>
                <Selected>true</Selected>
                </Contract>
                <Contract>
                <ContractID>3832</ContractID>
                <OrganisationID>10332</OrganisationID>
                <OrganisationName>VBI GROUP PLC</OrganisationName>
                <StartDate>01/09/2001</StartDate>
                <EndDate>31/08/2002</EndDate>
                <Product>06979 SM TRISCAN 1 YEAR</Product>
                <SON>S020524</SON>
                <LineNumber>10</LineNumber>
                <SONLN>S020524/10</SONLN>
                <SiteCount>1</SiteCount>
                <Selected>true</Selected>
                </Contract>
                <Count>83</Count>
                </Contracts>
                </mx:Model>
                <mx:DataGrid editable="true" right="10" left="10" top="40" bottom="40" dataProvider="{ContractsRequest.Contract}">
                <mx:columns>
                <mx:DataGridColumn editable="false" headerText="Contract" dataField="ContractID" width="70"/>
                <mx:DataGridColumn editable="false" headerText="Organisation" dataField="OrganisationName" width="250"/>
                <mx:DataGridColumn editable="false" headerText="Start Date" dataField="StartDate" width="100"/>
                <mx:DataGridColumn editable="false" headerText="End Date" dataField="EndDate" width="100"/>
                <mx:DataGridColumn editable="false" headerText="Product" dataField="Product"/>
                <mx:DataGridColumn editable="false" headerText="SON/Line No." dataField="SONLN" width="120"/>
                <mx:DataGridColumn editable="false" headerText="No. Sites" dataField="SiteCount" width="70"/>
                <mx:DataGridColumn editable="true" headerText="" dataField="Selected" width="70" itemRenderer="mx.controls.CheckBox" rendererIsEditor="true" editorDataField="selected"/>
                </mx:columns>
                </mx:DataGrid>
                <mx:Button label="Renew Contract(s)..." right="10" bottom="10" click="RenewContractsClick()"/>
                <mx:Text x="10" y="12" text="{SelectedContracts}"/>


                </mx:Application>
                • 6. Re: Flash/Flex itemEditor Rendering Problem!
                  FlextasmicD Level 1
                  Cheers for the response kcell, gave it a try but unfortunately that results in the same rendering/redraw problem (when a user scrolls up and down, check boxes appear to check and uncheck randomly) as my version does.

                  I know that when a DataGrid is scrolled, flex redraws the area that shows the values to save system recources... from rendering the parts of the DataGrid that arent even displayed because there's too much data to display every row. I'm guessing the solution lies with setting whatever rendering parameter there may be to render the entire DataGrid even though only a portion of the data in the DataGrid is being displayed.

                  If this is possible, it would obviously be extra strain on resources but if it solves this problem, I'll be a happy bunny even if my PC has to work that little bit harder!
                  • 7. Re: Flash/Flex itemEditor Rendering Problem!
                    kcell Level 2
                    ;) ... on my system I didn´t get the artefacts during up/down scrolling (with the code I have posted) ... of course the code didn´t use custom item render (the checkbox is not placed in the middle)
                    • 8. Re: Flash/Flex itemEditor Rendering Problem!
                      FlextasmicD Level 1
                      You don't get it? Very strange stuff!

                      I've tested both versions on 4 different PC's using both firefox and IE in case the issue is PC or browser related but still get the same problem. The only similarity between the different PC's is that they all have Flash Player 9.

                      So I can blame it on the PC's here, would be great to know if anybody else can or can't see this problem?
                      • 9. Re: Flash/Flex itemEditor Rendering Problem!
                        kcell Level 2
                        FYI:
                        I get flash player version 9.0.28 and also the debug version installed.

                        ( detected by http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15507 )