Setting a specific number of columns in a TileList control in Flex

The following example shows how you can resize a Flex TileList control to a certain number of columns by setting the columnCount property in MXML or ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/07/setting-a-specific-number-of-columns-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_columnCount_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="One" />
                <mx:Object label="Two" />
                <mx:Object label="Three" />
                <mx:Object label="Four" />
                <mx:Object label="Five" />
                <mx:Object label="Six" />
                <mx:Object label="Seven" />
                <mx:Object label="Eight" />
                <mx:Object label="Nine" />
                <mx:Object label="Ten" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="columnCount:">
                <mx:HSlider id="slider"
                        minimum="1"
                        maximum="5"
                        value="5"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TileList id="tileList"
            dataProvider="{arrColl}"
            columnCount="{slider.value}"
            columnWidth="100"
            rowCount="2"
            rowHeight="100"
            verticalScrollPolicy="on" />

</mx:Application>

View source is enabled in the following example.

You can also set the columnCount property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/07/setting-a-specific-number-of-columns-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_columnCount_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                tileList.columnCount = evt.value;
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="One" />
                <mx:Object label="Two" />
                <mx:Object label="Three" />
                <mx:Object label="Four" />
                <mx:Object label="Five" />
                <mx:Object label="Six" />
                <mx:Object label="Seven" />
                <mx:Object label="Eight" />
                <mx:Object label="Nine" />
                <mx:Object label="Ten" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="columnCount:">
                <mx:HSlider id="slider"
                        minimum="1"
                        maximum="5"
                        value="5"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TileList id="tileList"
            dataProvider="{arrColl}"
            columnCount="5"
            columnWidth="100"
            rowCount="2"
            rowHeight="100"
            verticalScrollPolicy="on" />

</mx:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/07/setting-a-specific-number-of-columns-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_columnCount_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.HSlider;
            import mx.controls.TileList;
            import mx.core.ScrollPolicy;
            import mx.events.SliderEvent;

            private var arrColl:ArrayCollection;
            private var slider:HSlider;
            private var tileList:TileList;

            private function init():void {
                arrColl = new ArrayCollection();
                arrColl.addItem({label:"One"});
                arrColl.addItem({label:"Two"});
                arrColl.addItem({label:"Three"});
                arrColl.addItem({label:"Four"});
                arrColl.addItem({label:"Five"});
                arrColl.addItem({label:"Six"});
                arrColl.addItem({label:"Seven"});
                arrColl.addItem({label:"Eight"});
                arrColl.addItem({label:"Nine"});
                arrColl.addItem({label:"Ten"});

                slider = new HSlider();
                slider.minimum = 1;
                slider.maximum = 5;
                slider.value = 5;
                slider.snapInterval = 1;
                slider.tickInterval = 1;
                slider.liveDragging = true;
                slider.addEventListener(SliderEvent.CHANGE, slider_change);

                var formItem:FormItem = new FormItem();
                formItem.label = "columnCount:";
                formItem.addChild(slider);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem);

                var appControlBar:ApplicationControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                Application.application.addChildAt(appControlBar, 0);

                tileList = new TileList();
                tileList.dataProvider = arrColl;
                tileList.columnCount = 5;
                tileList.columnWidth = 100;
                tileList.rowCount = 2;
                tileList.rowHeight = 100;
                tileList.verticalScrollPolicy = ScrollPolicy.ON;
                addChild(tileList);
            }

            private function slider_change(evt:SliderEvent):void {
                tileList.columnCount = evt.value;
            }
        ]]>
    </mx:Script>

</mx:Application>

10 thoughts on “Setting a specific number of columns in a TileList control in Flex

  1. Hi, thanks for this code.
    I want to change column count without changing width of the list.
    I mean tilelist’s width should remain same, but number of columns should change dynamically.
    is it possible?

  2. Yogini,

    Instead of specifying the columnWidth property, set the width property on the TileList object:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application name="TileList_columnCount_test"
            xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            verticalAlign="middle"
            backgroundColor="white">
    
        <mx:ArrayCollection id="arrColl">
            <mx:source>
                <mx:Array>
                    <mx:Object label="One" />
                    <mx:Object label="Two" />
                    <mx:Object label="Three" />
                    <mx:Object label="Four" />
                    <mx:Object label="Five" />
                    <mx:Object label="Six" />
                    <mx:Object label="Seven" />
                    <mx:Object label="Eight" />
                    <mx:Object label="Nine" />
                    <mx:Object label="Ten" />
                </mx:Array>
            </mx:source>
        </mx:ArrayCollection>
    
        <mx:ApplicationControlBar dock="true">
            <mx:Form styleName="plain">
                <mx:FormItem label="columnCount:">
                    <mx:HSlider id="slider"
                            minimum="1"
                            maximum="5"
                            value="5"
                            snapInterval="1"
                            tickInterval="1"
                            liveDragging="true" />
                </mx:FormItem>
            </mx:Form>
        </mx:ApplicationControlBar>
    
        <mx:TileList id="tileList"
                dataProvider="{arrColl}"
                columnCount="{slider.value}"
                width="600"
                rowCount="2"
                rowHeight="100"
                verticalScrollPolicy="on" />
    
    </mx:Application>
    

    Peter

  3. Hello Peter,
    Is it possible to have “previous” and “next” button control the content in Tilelist control? I don’t want to show the scroll bar, but there are more items in the list that I can navigate.

    Thanks for your help,
    SHAH

  4. Shah,

    I believe you can set the horizontalScrollPolicy and/or verticalScrollPolicy properties to “off” and then just set the horizontalScrollPosition property to programmatically scroll the content. Something like this should do the trick (although you’ll have to tweak the code if you want it to scroll vertically instead of horizontally):

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="absolute">
     
        <mx:Script>
            <![CDATA[
                private function scrollPrev():void {
                    var value:Number = Math.max(tileList.horizontalScrollPosition-1, 0);
                    tileList.horizontalScrollPosition = value;
                }
     
                private function scrollNext():void {
                    var value:Number = Math.min(tileList.horizontalScrollPosition+1, tileList.maxHorizontalScrollPosition);
                    tileList.horizontalScrollPosition = value;
                }
            ]]>
        </mx:Script>
     
        <mx:HBox horizontalGap="0"
                horizontalCenter="0"
                verticalCenter="0">
            <mx:Button label="Prev"
                    click="scrollPrev();"
                    height="100%"
                    cornerRadius="0" />
            <mx:TileList id="tileList"
                    dataProvider="[One,Two,Three,Four,Five,Six,Seven,Eight,Nine,Ten]"
                    direction="vertical"
                    columnCount="3"
                    rowCount="2"
                    columnWidth="100"
                    rowHeight="80"
                    horizontalScrollPolicy="off"
                    verticalScrollPolicy="off"/>
            <mx:Button label="Next"
                    click="scrollNext();"
                    height="100%"
                    cornerRadius="0" />
        </mx:HBox>
     
    </mx:Application>

    Peter

    1. I have a component very close to the above example. I’m trying to use scrollToIndex with this.. It works with my stand alone example.
      But in my application scrollToIndex is not working. I dont see any difference between stand alone code and application.

  5. hi Peter deHaan

    i have a tilelist with four columns and variable rows.
    but now i need a gap between column cells and at the same time i need a smooth scrolling for tilelist
    when i have more no of items.for scrolling now i am using with variable row height. for my tilelist
    two bars are there one is upbar image above the tilelist and downbar below the tilelist. when we drag item
    near to the bars the tilelist wants to start action of scrolling smoothly
    these are twoissues i need ;
    1) columncells gap
    2) smooth scrolling

    thanks

  6. Hi,

    I have the same question like chandra shekar. Is that possible to add columnscell gap in some way?

    I have idea about blank element – but there’ll be problem with “selectable” of that kind of element…

    Maybe is some way without stupid, irracional combination?

  7. ok I got it.

    I had item renderer inside tile list, so I added VBox up to image (or other element) and there it’s possible to add gap.

Comments are closed.