0 Replies Latest reply on Apr 29, 2014 12:17 PM by Rob Farrow

    Flex Spark DataGrid BUG skipping rows on refresh

    Rob Farrow

      I have a small one file example that demonstrates this Flex DataGrid bug.

      I tried to report it to Flex bugs and the page timed out.

       

      I am filling a column in a spark datagrid with checkboxes to select that row.

      In the header of that column is a checkbox to select ALL the rows.

      However, the middle row is not getting refreshed so the display is wrong.

      The checkbox looks empty when the backing value is correct.

       

      I have added a print to the code that sets the values in the data and it is setting everyone.

      But when I print the isSelected code it is NOT being called on ONE (the middle) visible row.

       

      If I move away or scroll up and down the check box shows the check mark.

      So My only conclusion is that refresh has a bug.

       

      Here is the example that demonstrates the problem.

      Simply select the header checkbox and the 3rd checkbox does not get updated on refresh.

       

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

      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                                       xmlns:s="library://ns.adobe.com/flex/spark"

                                       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

                <fx:Script>

                          <![CDATA[

                                    import mx.collections.ArrayCollection;

       

                                    private static var values:Array = [

                                              {selected: false, position: 1},

                                              {selected: false, position: 2},

                                              {selected: false, position: 3},

                                              {selected: false, position: 4},

                                              {selected: false, position: 5}

                                    ];

       

                                    [Bindable]

                                    public static var datalist:ArrayCollection = new ArrayCollection( values );

       

                                    public static function updateDataList( value:Boolean ):void

                                    {

                                              for each( var item:Object in datalist ) {

                                                        trace( "updated: " + item.position );

                                                        item.selected = value;

                                              }

                                              datalist.refresh();

                                    }

                          ]]>

                </fx:Script>

                <s:DataGrid dataProvider="{datalist}">

                          <s:columns>

                                    <s:ArrayList>

                                              <s:GridColumn dataField="position" width="200"/>

                                              <s:GridColumn width="34" >

                                                        <s:itemRenderer>

                                                                  <fx:Component>

                                                                            <s:GridItemRenderer textAlign="center">

                                                                                      <fx:Script>

                                                                                                <![CDATA[

                                                                                                          private function changeSelection( data:Object, event:MouseEvent ):void

                                                                                                          {

                                                                                                                    data.selected = ! data.selected;

                                                                                                          }

                                                                                                          private function isSelected( data:Object ):Boolean

                                                                                                          {

                                                                                                                    trace( "isSelected: " + data.position );

                                                                                                                    return data.selected;

                                                                                                          }

                                                                                                ]]>

                                                                                      </fx:Script>

                                                                                      <s:layout>

                                                                                                <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>

                                                                                      </s:layout>

                                                                                      <s:CheckBox id="selbox" label="" selected="{isSelected(data)}"

                                                                                                                    click="changeSelection(data, event)"/>

                                                                            </s:GridItemRenderer>

                                                                  </fx:Component>

                                                        </s:itemRenderer>

                                                        <s:headerRenderer>

                                                                  <fx:Component>

                                                                            <s:GridItemRenderer height="30">

                                                                                      <fx:Script>

                                                                                                <![CDATA[

                                                                                                          [Bindable]

                                                                                                          private static var selectAll:Boolean = false;

       

                                                                                                          private function changeAllSelection( event:MouseEvent ):void

                                                                                                          {

                                                                                                                    selectAll = ! selectAll;

                                                                                                                    Main.updateDataList( selectAll );

                                                                                                          }

                                                                                                ]]>

                                                                                      </fx:Script>

                                                                                      <s:layout>

                                                                                                <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>

                                                                                      </s:layout>

                                                                                      <s:CheckBox label="" selected="{selectAll}"

                                                                                                                    click="changeAllSelection(event)"/ >

                                                                            </s:GridItemRenderer>

                                                                  </fx:Component>

                                                        </s:headerRenderer>

                                              </s:GridColumn>

                                    </s:ArrayList>

                          </s:columns>

                </s:DataGrid>

      </s:Application>

       

      Here is an image of the failed result... after selecting the top checkbox.

       

      Flex Spark DataGrid refresh bug.jpg

       

      Below is an image of the output produced by the two traces.

      Notice that the refresh has not called isSelected on the 3rd element.

       

       

      Flex Spark DataGrid refresh bug output.jpg