The following example shows you how you can set the selected index of a LinkBar control in Flex by setting the selectedIndex property using MXML or ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/20/setting-the-selected-index-of-a-flex-linkbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="selectedIndex:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="{linkBar.dataProvider.length - 1}"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1"
                        dataTipPrecision="0" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:LinkBar id="linkBar"
            dataProvider="{arr}"
            selectedIndex="{slider.value}" />

</mx:Application>

View source is enabled in the following example.

You can also set the selectedIndex property in ActionScript, as shown in the following snippet:

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

        private function slider_change(evt:SliderEvent):void {
            linkBar.selectedIndex = evt.value;
        }
    ]]>
</mx:Script>
 
Tagged with:
 
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.

12 Responses to Setting the selected index of a Flex LinkBar control

  1. Anome says:

    There is a bug, try to click on the LinkBar’s items then use the slider : several items can be selected !
    to be honnest, i fixed the problem by setting the ‘enabled’ property of each LinkButton to false, except the one that should be selected.

  2. Zuhair says:

    Hi,

    the actionscript code is not working:

    Could you pleas check that

    Thanks

  3. Dom says:

    It seems that linkBar.selectedIndex = some_value is not supported if the linkbar is not paired with a viewstack, which is also the implicit dataprovider, thus the issue mentioned above.
    It’s a bit of a pain…

  4. Sohail says:

    True this will not work “linkBar.selectedIndex = some_value”. To do this make your own custom linkbar let say call it myLinkBar

    ==========================================================================

    ==========================================================================

    And then in the itemClick (itemClick="myFunc(event)") do the following:-

    private function myFunc(event:ItemClickEvent):void
    {
        mylinkbar.setIndex(event.index);
    }
    
  5. Alex says:

    You can try this code:

    linkBar.dataProvider=null;
    linkBar.dataProvider=arr;
    linkBar.selectedIndex=event.index;
    
  6. Flexman says:

    This allows you to use the LinkBar without a viewstack when selecting an index…

  7. Flexman says:

    Helps is I use the right tags… ;)

    &lt?xml version=”1.0″ encoding=”utf-8″?&gt
    &ltmx:LinkBar xmlns:mx=”http://www.adobe.com/2006/mxml” itemClick=”myFunc(event)”&gt

    &ltmx:Script&gt
    &lt![CDATA[

    import mx.events.ItemClickEvent;
    import mx.controls.Button;

    private function myFunc(event:ItemClickEvent):void
    {
    var n:int = this.numChildren;
    for (var i:int = 0; i
    &lt/mx:Script&gt

    &lt/mx:LinkBar&gt

  8. Drew says:

    I’m trying to remove all spacing between linkbar link buttons, I have a design that calls for the links to be stacked vertically with 5px of space between them, I’ve cleared out all padding, for the linkbuttonstyles, and removed vertical gap, and set separator width to zero. What am I missing it seems like this shouldn’t be that hard? Any help is much appreciated thanks!

  9. xylaq says:

    Try something like this….

    linkBar.invalidateDisplayList();
    linkBar.selectedIndex = 2

    It works for ToggleButtonBar

  10. HQ says:

    Thank Alex very much! It work for me.