working with Spark Datagrid selectionChange and Keyboard Array

Question

I have a Spark DataGrid with a listener to selectionChange event. The function listening to the dataGrid checks if the new selected row has a different partner_id from the partner loaded. If it is different, it calls the server (PHP) and asks for the partner with the given id. My problem is that if the user uses the arrow keyboard to navigate through the dataGrid, the changes happens too fast and at some given moment, the call fails to retrieve the partner object, which ends up as null (better than showing up a wrong partner), but still a problem for me, because after this happens, a new partner is never loaded. Is there a way to wait a couple of milliseconds before making the call to see if the user will change it again or any other work around? Thanks.

score 2 · Answer 1 · answered Mar 03 '13 at 17:07

I would suggest you to try another approach. You should not avoid loading of the new info from server. You can load it and save for the future need. If you wait for the respond from the server, it is not a good way, because the response time can be different and sometimes pretty long.

So I think you can just try to ignore new requests by filtering very quick user's actions. You can use a timer to do it. Say, you define the shortest switch between records as 300ms. Just start a timer and wait, either or not it can stop till user changes the selection again.

Here is a simple code to demonstrate this way:

<?xml version="1.0" encoding="utf-8"?>
<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" 
           minWidth="955" minHeight="600" creationComplete="init()">
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import org.osmf.events.TimeEvent;
        import spark.events.GridSelectionEvent;

        [Bindable]private var collection:ArrayCollection = new ArrayCollection([
            {field01:"field01", field02:"field02"},
            {field01:"field01", field02:"field02"},
            {field01:"field01", field02:"field02"},
            {field01:"field01", field02:"field02"},
            {field01:"field01", field02:"field02"},
            {field01:"field01", field02:"field02"},
            {field01:"field01", field02:"field02"},
            {field01:"field01", field02:"field02"}
        ]);

        private var delay:Number = 300;
        private var timer:Timer = new Timer(delay, 1);

        private function init():void
        {
            timer.addEventListener(TimerEvent.TIMER, onTimer);
        }

        private function onTimer(event:TimerEvent):void
        {
            processCurrentSelection();
        }

        protected function onSelectionChange(event:GridSelectionEvent):void
        {
            timer.stop();
            timer.start();
        }

        private function processCurrentSelection():void
        {
            taCurrentIndex.text += dgMain.selectedIndex.toString() + String.fromCharCode(13);
        }
    ]]>
</fx:Script>

<s:HGroup x="10" y="10" height="240">
    <s:DataGrid 
        id="dgMain" 
        width="300" height="100%" 
        dataProvider="{collection}" 
        selectionChange="onSelectionChange(event)">

        <s:columns>
            <s:ArrayList>   
                <s:GridColumn dataField="field01" headerText="Field 1"/>
                <s:GridColumn dataField="field02" headerText="Field 2" width="100"/>
            </s:ArrayList>                  
        </s:columns>                
    </s:DataGrid>

    <s:VGroup width="200" height="100%">
        <s:Label text="Current Index:"/>
        <s:TextArea id="taCurrentIndex" width="100%" height="100%"/>
    </s:VGroup>

</s:HGroup>
</s:Application>

score 0 · Answer 2 · answered Mar 01 '13 at 14:15

I'm still accepting other solutions, a possible one that is doing the job for me is the event selectionChanging() along with event.preventDefault(). I added one function as listener to the selectionChanging() in which I check if there's a call from the server in process, if there is, I call event.preventDefault() which doesn't allow the user from moving the selection down or up. When the server responds and the user tries to change the selection again, it goes normally and makes another call. Long story short, every time the selection is changed, the server is called and the grid is 'blocked' to be changed, when the server responds, the grid is set free.

working with Spark Datagrid selectionChange and Keyboard Array

2 Answers2