Setting an effect when the items in a data provider change on a List control in Flex

The following example shows how you can add a data effect when the items in a data provider change in a Flex List control by setting the itemsChangeEffect effect style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/29/setting-an-effect-when-the-items-in-a-data-provider-change-on-a-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function addItemToDataProvider():void {
                var obj:Object = {label:new Date().toTimeString()};
                var idx:int = Math.max(list.selectedIndex, 0);
                list.scrollToIndex(idx);
                arrColl.addItemAt(obj, idx);
            }

            private function removeItemFromDataProvider():void {
                if (arrColl.length == 0) {
                    return;
                }
                var idx:int = Math.max(list.selectedIndex, 0);
                list.scrollToIndex(idx);
                arrColl.removeItemAt(idx);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:DefaultListEffect id="defaultListEffect" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Add item"
                click="addItemToDataProvider();" />
        <mx:Button label="Delete item"
                click="removeItemFromDataProvider();" />
    </mx:ApplicationControlBar>

    <mx:List id="list"
            dataProvider="{arrColl}"
            itemsChangeEffect="{defaultListEffect}"
            variableRowHeight="true"
            width="200" />

</mx:Application>

View source is enabled in the following example.

You can also set the itemsChangeEffect effect in an external .CSS file or <mx:Style /> block, as seen in the following snippet:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/29/setting-an-effect-when-the-items-in-a-data-provider-change-on-a-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function addItemToDataProvider():void {
                var obj:Object = {label:new Date().toTimeString()};
                var idx:int = Math.max(list.selectedIndex, 0);
                list.scrollToIndex(idx);
                arrColl.addItemAt(obj, idx);
            }

            private function removeItemFromDataProvider():void {
                if (arrColl.length == 0) {
                    return;
                }
                var idx:int = Math.max(list.selectedIndex, 0);
                list.scrollToIndex(idx);
                arrColl.removeItemAt(idx);
            }
        ]]>
    </mx:Script>

    <mx:Style>
        List {
            itemsChangeEffect: ClassReference("mx.effects.DefaultTileListEffect");
        }
    </mx:Style>

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Add item"
                click="addItemToDataProvider();" />
        <mx:Button label="Delete item"
                click="removeItemFromDataProvider();" />
    </mx:ApplicationControlBar>

    <mx:List id="list"
            dataProvider="{arrColl}"
            variableRowHeight="true"
            width="200" />

</mx:Application>

Or, you can set the itemsChangeEffect effect using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/29/setting-an-effect-when-the-items-in-a-data-provider-change-on-a-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.effects.DefaultListEffect;

            private function init():void {
                list.setStyle("itemsChangeEffect", DefaultListEffect);
            }

            private function addItemToDataProvider():void {
                var obj:Object = {label:new Date().toTimeString()};
                var idx:int = Math.max(list.selectedIndex, 0);
                list.scrollToIndex(idx);
                arrColl.addItemAt(obj, idx);
            }

            private function removeItemFromDataProvider():void {
                if (arrColl.length == 0) {
                    return;
                }
                var idx:int = Math.max(list.selectedIndex, 0);
                list.scrollToIndex(idx);
                arrColl.removeItemAt(idx);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Add item"
                click="addItemToDataProvider();" />
        <mx:Button label="Delete item"
                click="removeItemFromDataProvider();" />
    </mx:ApplicationControlBar>

    <mx:List id="list"
            dataProvider="{arrColl}"
            variableRowHeight="true"
            width="200"
            initialize="init();" />

</mx:Application>

12 thoughts on “Setting an effect when the items in a data provider change on a List control in Flex

  1. Peter,

    Thanks so much for this post! I’ve been trying to use this effect with a list containing custom item renderers and it seems to perform and animate rather poorly. Do you know if the DefaultListEffect component accounts for renderers that don’t have an explicit height or has variableRowHeight set? Maybe it wasn’t meant for that and just fixed height renderers? Either way thanks!

  2. Hi I searched alot but couldn’t find any clue , As I understand I cant use this itemsChangeEffect
    on datagrid so what else can I use instead.

  3. This is perfect – and so simple.

    However, there’s one small detail that I find annoying. In my application, I have rows that are quite tall (about 80 pixels or so), and when the “delete” animation moves everything up, there is a small jump up at the very end. It makes the animation feel clunky.

    I noticed it is the same in your demo but your rows are not that tall so it’s not as noticeable – but still there.

    Is this something that can be fixed? I tried suspendbackgroundprocessing to see if that would help but no luck.

    Andrew.

  4. Thank you for this post. It seems to have all the elements that may lead to my answer:
    I have a flex list small enough to displays one item at a time and this list contains 12 items. I want to get rid of the scroll, and have the list switch display whenever calendar months are scrolled, however, initially, this list should display the item relative to the current month.

    I will use whatever help I can get. Please.

    Thank you.

    1. @Emmanuel,

      I’m not sure I understand your question, but if you’re trying to create a List that only displays 1 item at a time and doesn’t display a vertical scroll bar, this should get you started:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
       
          <mx:List id="lst" labelField="lbl" width="100" rowCount="1" verticalScrollPolicy="off">
              <mx:dataProvider>
                  <mx:Object lbl="One" />
                  <mx:Object lbl="Two" />
                  <mx:Object lbl="Three" />
                  <mx:Object lbl="Four" />
                  <mx:Object lbl="Five" />
                  <mx:Object lbl="Six" />
                  <mx:Object lbl="Seven" />
                  <mx:Object lbl="Eight" />
                  <mx:Object lbl="Nine" />
              </mx:dataProvider>
          </mx:List>
       
      </mx:Application>

      Peter

      1. @Peter

        Hello Peter,
        Thank you very much for your assistance, it’s been incredible, I have found the my answer in both of your versions. Again, thank you! you’ve been terrific.

        Thanks.
        Emmanuel

    2. Or, if you’re trying to update a List when the DateChooser changes it’s displayed month, you could try something like this:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
       
          <mx:Script>
              <![CDATA[
                  import mx.events.DateChooserEvent;
       
                  protected function scrollList():void {
                      lst.scrollToIndex(datChooser.displayedMonth);
                  }
              ]]>
          </mx:Script>
       
          <mx:List id="lst" labelField="lbl" width="100" rowCount="1" verticalScrollPolicy="off">
              <mx:dataProvider>
                  <mx:Object lbl="Jan - Item 1" />
                  <mx:Object lbl="Feb - Item 2" />
                  <mx:Object lbl="Mar - Item 3" />
                  <mx:Object lbl="Apr - Item 4" />
                  <mx:Object lbl="May - Item 5" />
                  <mx:Object lbl="Jun - Item 6" />
                  <mx:Object lbl="Jul - Item 7" />
                  <mx:Object lbl="Aug - Item 8" />
                  <mx:Object lbl="Sep - Item 9" />
                  <mx:Object lbl="Oct - Item 10" />
                  <mx:Object lbl="Nov - Item 11" />
                  <mx:Object lbl="Dec - Item 12" />
              </mx:dataProvider>
          </mx:List>
       
          <mx:DateChooser id="datChooser"
                  scroll="scrollList();"
                  creationComplete="scrollList();" />
       
      </mx:Application>

      Peter

Comments are closed.