CODEWITHSUNDEEP
apache-flexdatagridtabsflex-spark
Gav
Gav

Reputation: 71

Flex Spark datagrid - tab focus on a custom GridItemRenderer

I have a spark datagrid with a custom itemrenderer which contains two buttons. I would like to allow the user to access those two buttons when tabbing through the controls in my page, is that possible?

I have put together a simple example application illustrating what I have attempted so far (just try tabbing through the buttons to see what i mean). Do i have to use a GridItemEditor?

Thanks in advance

Gav

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\sparkdpcontrols\SparkDGStyledIR.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               width="450" height="450">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;

            // Data includes URL to album cover.
            [Bindable]
            private var initDG:ArrayCollection = new ArrayCollection([
                {Artist:'Pavement', Album:'Slanted and Enchanted', 
                    Price:11.99, Cover:'../assets/slanted.jpg', tabIndex:2},
                {Artist:'Pavement', Album:'Slanted and Enchanted', 
                    Price:11.99, Cover:'../assets/slanted.jpg', tabIndex:3},
                {Artist:'Pavement', Album:'Slanted and Enchanted', 
                    Price:11.99, Cover:'../assets/slanted.jpg', tabIndex:4},
                {Artist:'Pavement', Album:'Brighten the Corners', 
                    Price:11.99, Cover:'../assets/brighten.jpg', tabIndex:5}
            ]);
        ]]>
    </fx:Script>
    <s:layout>
        <s:VerticalLayout />
    </s:layout>

    <s:DataGrid id="myGrid" 
                hasFocusableChildren="true" tabEnabled="true" tabChildren="true" focusEnabled="true" tabFocusEnabled="true"
                dataProvider="{initDG}" selectionMode="singleCell" tabIndex="1"
                variableRowHeight="true">   
        <s:columns>
            <s:ArrayList>
                <s:GridColumn dataField="Artist" rendererIsEditable="true">
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer hasFocusableChildren="true" tabEnabled="true" tabChildren="true" focusEnabled="true" tabFocusEnabled="true" 
                                                selectAll="meBtn.setFocus()">
                                <fx:Script>
                                    <![CDATA[
                                        import mx.controls.Alert;
                                    ]]>
                                </fx:Script>
                                <s:Button id="meBtn" label="{this.data.tabIndex} Click me" click="Alert.show('clicked','info')" tabIndex="{this.data.tabIndex}"
                                          tabEnabled="true" tabChildren="true" focusEnabled="true" tabFocusEnabled="true"/>
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>    
                </s:GridColumn>
                <s:GridColumn dataField="Album"/>
                <s:GridColumn dataField="Price"/>
            </s:ArrayList>
        </s:columns>       
    </s:DataGrid>

    <s:Button label="Some other button" tabIndex="100" click="Alert.show('this button below the grid is tab enabled fine','note')"  />
</s:Application>

Upvotes: 0

Views: 2139

Answers (1)

Alexander
Alexander

Reputation: 3247

datagrid

editable = true

On the columns of you buttons you set

rendererIsEditable="true"

non editable columns

editable = false

Tabbing should work with these settings when you use a custom GridItemRender

Upvotes: 1

Related Questions