Set default focus on first item in grid list

Once a grid is rendered how can I set focus to the first item. I am running into a problem where when the grid is updated (collection changes) then focus is lost for the entire application .


I am using the moonstone library.
 { 
                        kind: "ameba.DataGridList", name: "gridList", fit: true, spacing: 20, minWidth: 300, minHeight: 270, spotlight : 'container',
                        scrollerOptions: 
                        { 
                            kind: "moon.Scroller", vertical:"scroll", horizontal: "hidden", spotlightPagingControls: true
                        }, 
                        components: [
                            {kind : "custom.GridItemControl", spotlight: true}
                        ]
                    }

Comments

  • Off the cuff ...
    
    enyo.Spotlight.spot(this.$.gridList.childForIndex(0))
  • edited December 2014
    @theryanjduffy‌ Tried that , it throws the following error:

    Cannot read property 'childForIndex' of undefined

    Uncaught TypeError: Cannot read property 'height' of undefined VerticalDelegate.js:532 enyo.DataList.delegates.vertical.height VerticalDelegate.js:203 enyo.DataList.delegates.vertical.controlsPerPage VerticalGridDelegate.js:106 (anonymous function) VerticalDelegate.js:214 enyo.DataList.delegates.vertical.pageForIndex VerticalDelegate.js:306 enyo.DataList.delegates.vertical.childForIndex DataList.js:342 enyo.kind.childForIndex AmebaControls.js:1535 enyo.kind.rendered Marquee.js:1 (anonymous function)rendered.js:35 enyo.addToRoots.root.renderedControl.js:523 enyo.kind.renderInto AmebaControls.js:2141 onFeatureCallback AmebaMaster.js:1786 jQuery.ajax.success jquery-1.9.1.js:1 b.Callbacks.c jquery-1.9.1.js:1 b.Callbacks.p.fireWith jquery-1.9.1.js:3 kjquery-1.9.1.js:3 b.ajaxTransport.send.r
  • Try using
    enyo.Spotlight.highlight(this.$.gridList.childForIndex(0));
    I added a rendered() function to the Moonstone DataGridList sample in the Sampler and I found that this works:
        rendered: function() {
            this.inherited(arguments);
            this.startJob("waitforit", function() {
                enyo.Spotlight.highlight(this.$.gridList.childForIndex(0));
            }, 400);
        },
    
    It didn't work without the delay.
  • Just guessing here as I don't use Moonstone, but the plain enyo.Datalist doesn't actually render its list content when the render method is called. Instead the actual rendering task is deferred and executed at a later point by the gridList's delegate. That's why the delay makes things work. If rendering takes longer than your delay tough, it'll still fail.

    You might want to dive in the code of the gridList's delegate and check out how it works. In my case, I'd probably create a custom delegate add the highlight hook in the reset and/or refresh methods. That's probably more reliable than using timeouts.
Sign In or Register to comment.