Using a Slider control as a DataGrid column item renderer in Flex

The following example shows how you can use an HSlider control as an item renderer in a Flex DataGrid control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/09/using-a-slider-control-as-a-datagrid-column-item-renderer-in-flex/ -->
<mx:Application 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="Student A" score="85" />
                <mx:Object label="Student B" score="48" />
                <mx:Object label="Student C" score="71" />
                <mx:Object label="Student D" score="88" />
                <mx:Object label="Student E" score="24" />
                <mx:Object label="Student F" score="64" />
                <mx:Object label="Student G" score="76" />
                <mx:Object label="Student H" score="76" />
                <mx:Object label="Student I" score="93" />
                <mx:Object label="Student J" score="88" />
                <mx:Object label="Student K" score="48" />
                <mx:Object label="Student L" score="76" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            selectable="false"
            rowCount="6"
            width="500">
        <mx:columns>
            <mx:DataGridColumn dataField="label" />
            <mx:DataGridColumn dataField="score" />
            <mx:DataGridColumn dataField="score">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:HBox horizontalScrollPolicy="off"
                                verticalScrollPolicy="off">
                            <mx:Script>
                                <![CDATA[
                                    import mx.events.SliderEvent;

                                    private function slider_change(evt:SliderEvent):void {
                                        data.score = evt.value;
                                        outerDocument.arrColl.refresh();
                                    }
                                ]]>
                            </mx:Script>

                            <mx:HSlider minimum="0"
                                    maximum="100"
                                    value="{data.score}"
                                    liveDragging="true"
                                    snapInterval="1"
                                    width="100%"
                                    change="slider_change(event);" />
                        </mx:HBox>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

Tagged as: itemRenderer, outerDocument