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

By Peter deHaan On August 7, 2008 · 10 Comments

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>

Tagged with: columnCount

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

10 Responses to Setting a specific number of columns in a TileList control in Flex

Yogini says:

June 1, 2009 at 12:01 am

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?

Reply

Peter deHaan says:

June 1, 2009 at 8:08 am

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&quot;
        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

Shah says:

June 1, 2009 at 9:25 pm

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

Reply
Yogini says:

June 2, 2009 at 2:25 am

ohh it worked…
Thanks :)
it was really helpful.
-Yogini.

Reply

Peter deHaan says:

June 3, 2009 at 12:27 am

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

shridevi says:

December 7, 2009 at 1:57 am

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.

Reply

chandra shekar says:

July 31, 2009 at 2:57 am

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

Reply
Rohit Bhatia says:

September 1, 2009 at 4:14 am

2) smooth scrolling

Yes I did

Reply
nirud says:

September 16, 2009 at 7:13 am

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?

Reply
nirud says:

September 16, 2009 at 7:42 am

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.

Reply