No announcement yet.

Multi column scrolling list problems!

  • Filter
  • Time
  • Show
Clear All
new posts

    Multi column scrolling list problems!


    I'm trying to get at a multi column Scrolling List to work but without any luck.

    list2.dataProvider = [{col1: "something", col2:"another thing"}];
    returns [object object] in the list...

    Do I need to define the columns? And how do I do that if that's the case?

    And one more how do I retrieve the data filed from the selected index?

    Thanks in advance

    The ScrollingList component by default uses the ListItemRenderer to display the row contents. However the ListItemRenderer only supports a single textField. There are many cases in which a list item may have more than one textField to display, or even non-textField resources such as icons. This example demonstrates how to add two textFields to a list item.

    First, let us define the requirements. The objective will be to create a custom ListItemRenderer that will support two textFields. This custom ListItemRenderer should also be compatible with the ScrollingList. Since the plan is to have two textFields per list item, the data should also be more than just a list of single strings. Let us use the following dataProvider for this example:

    list.dataProvider = [{fname: "Michael", lname: "Jordan"},
    {fname: "Roger", lname: "Federer"},
    {fname: "Michael", lname: "Schumacher"},
    {fname: "Tiger", lname: "Woods"},
    {fname: "Babe", lname: "Ruth"},
    {fname: "Wayne", lname: "Gretzky"},
    {fname: "Usain", lname: "Bolt"}];
    This data provider contains objects with two properties: fname and lname. These two properties will be displayed in the two list item textFields.

    Since the default ListItemRenderer only supports one textField, it will need added functionality to support two textFields. The easiest way to accomplish this is to subclass the ListItemRenderer class. The following is the source code to a class called MyItemRenderer, which subclasses ListItemRenderer and adds in basic support for two textFields.

    (Put this code in a file called in the C:\UDK\UDK-2010-12\Development\Flash\CLIK\gfx\controls directory):

    import gfx.controls.ListItemRenderer;
    class gfx.controls.MyItemRenderer extends ListItemRenderer 
        public var textField1:TextField;
        public var textField2:TextField;
        public function MyItemRenderer() { super(); }
        public function setData(data:Object):Void 
   = data;
            textField1.text = data ? data.fname : "";
            textField2.text = data ? data.lname : "";
        private function updateAfterStateChange():Void 
            textField1.text = data ? data.fname : "";
            textField2.text = data ? data.lname : "";
    The setData and updateAfterStateChange methods of ListItemRenderer are overridden in this subclass. The setData method is called whenever the list item receives the item data from its container list component (ScrollingList, TileList, etc.). In the ListItemRenderer, this method sets the value of the one textField. MyItemRenderer instead sets the values of both textFields and also stores a reference to the item object internally. This item object is reused in updateAfterStateChange, which is called whenever the ListItemRenderer’s state changes. This state change may require the textFields to refresh their values.

    Thus far, the dataProvider with the complex list items and a ListItemRenderer class that supports rendering of those list items have been defined. To hook up everything with the list component, a symbol must be created to support this new ListItemRenderer class. For this example, the fastest way to accomplish this would be to modify the prebuilt ListItemRenderer symbol (C:\UDK\UDK-2010-12\Development\Flash\CLIK\components\ListItemRende rer.fla) to have two textFields with the intance names ‘textField1’ and ‘textField2’. Next this symbol’s identifier and class must be changed to MyItemRenderer in the library.
    1. Right click the ListItemRenderer in the library and choose properties.
    2. Change Name to: MyItemRenderer
    3. Change Identifier to: MyItemRenderer
    4. Change Class to: gfx.controls.MyItemRenderer
    5. Hit OK.
    6. Right click the ListItemRenderer again and choose Component Definition.
    7. Change Class to: gfx.controls.MyItemRenderer
    8. Copy the symbol into the library of the Flash file that contains your list.

    To use the MyItemRenderer component with your list, a copy of it must of course exist in the library. Change the itemRenderer inspectable property of your list instance to ‘MyItemRenderer’. (via either the Component Inspector window (CS4) or Component Parameters rollout (CS5))

    Run the FLA now. The list should be visible containing list elements that display two labels: the fname and lname properties that were set in the dataProvider.


      Matt Doyle... Awesome! And Thank you very much!


        One more thing... How do I retrieve the data?


        I solved it...



          I tried this out however its not working for me. I'm using the ScrollingList Demo. I followed everything to the tee, however when I try to change the ListItemRenderer Variable to INFItemRenderer in the inspector it just reverts back to the original.

          So it just displays [Object Object] On the list. Any Ideas?


            Matt, from Matt to Matt, I'm a little bit ******. You posted this tutorial also on UDN( and if a guy sees a tutorial on an official udk site, than he should trust this tutorial. But your tutorial is not complete and its not working. I'm a little bit ****** because it takes me 3h to find a working solution. You skipped the whole rename-the-textfield-of-the-MyItemRenderer.fla part. If I not change the textfield into "textField1", than my datas for the list will not be shown. And I'm not that far, but I believe I also have to add a new textfield (the textField2) to get my second column showing & working.
            Correct me if I am wrong, but without this changes, this tutorial will never work.

            This tutorial is almost a year old and never noticed this. Strange!



              Game development is not always easy. The instructions I gave do work, and were tested working at the time of writing. FYI, I have no control over what Epic decides to put on UDN from here. That being said, the instructions clearly indicate the names of the two textfields. Here's the snippet of text where it mentions them:

              For this example, the fastest way to accomplish this would be to modify the prebuilt ListItemRenderer symbol (C:\UDK\UDK-2010-12\Development\Flash\CLIK\components\ListItemRende rer.fla) to have two textFields with the intance names ‘textField1’ and ‘textField2’.