Setting the selected index of a Flex LinkBar control

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>

12 thoughts on “Setting the selected index of a Flex LinkBar control

  1. 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. 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…

  3. 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);
    }
    
  4. 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

  5. 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!

  6. Try something like this….

    linkBar.invalidateDisplayList();
    linkBar.selectedIndex = 2

    It works for ToggleButtonBar

Comments are closed.