Wrong set spot control in DataGridList

Hi all,
I have a moon.DataGridList that have 2 row moon.GridListImageItem
{ kind:"moon.DataGridList", name:"resultList", minWidth:250, minHeight:300, space:20, fit:true, ontap:'itemSelected', scrollerOptions:{ vertical:'hidden', horizontal:'hidden' }, components:[ { kind:"moon.GridListImageItem", centered:false, useSubCaption:false, imageSizing:"cover", spotlightType:'img', style:"width:271px; height:271px", } ] },

then i custom spotlithRightChange to catch when at item 6th press right it next to 7th item, but spotlight jum to 8th item.
spotlightRightChanged:function(inSender,inEvent){ console.log(inEvent.index); if(inEvent.index == 5){ var components = this.getComponents(); console.log(this.$.resultList.childForIndex(6)); enyo.Spotlight.setCurrent(this.$.resultList.childForIndex(6)); }else if(inEvent.index == 11){ if(this.currentPage+1<=this.totalPage) { this.set("currentPage",this.currentPage+1); console.log('Next trang'); enyo.Spotlight.spot(this.$.resultList.childForIndex(0)); this.$.resultList.reset(); this.collection.set("offset", 100 * Math.random()); } } },</code> Please help me fix it,


  • My guess is you need to return true; in your onSpotlightRight handler. Without that, the event will bubble up to the main spotlight handler which will try to focus the control to the right of the currently spotted (which you programmatically set to the 7th) which is the 8th.
  • Many thanks @theryanjduffy, it solved my problem.
  • Hi @theryanjduffy and all, how to catch event moon.DataGridList finished render all item?
    I try to use rendered function to raise event to parent component but not working
    .. components:[ { kind:"moon.DataGridList", name:"resultList", minWidth:250, minHeight:334, classes:"item-square", space:20, fit:true, style:'margin-top:20px', ontap:'itemSelected', scrollOptions:{ vertical:'hidden', horizontal:'hidden' }, events:{ onRenderFinished:'' }, rendered:function(){ this.inherited(arguments); this.doRenderFinished(); }, components:[ { kind:"moon.GridListImageItem", centered:false, useSubCaption:false, imageSizing:"cover", spotlightType:'img', style:"width:271px; height:271px", scrollOptions:{ vertical:'hidden', horizontal:'hidden' }, bindings:[ {from:"model.title", to:"caption"}, {from:"model.tv_thumb_url",to:"source"}, { from:"model.vip_mode", to:"vip", transform:function(data){ this.removeClass('vip'); if(data>0) { this.addClass('vip'); } return data; } } ] } ] }, ]
  • DataList employs a deferred rendering strategy to improve rendering performance. Unfortunately, it doesn't have a public API to hook into completing that rendering.

    You have a couple options: set renderDelay to null and leave your code as is (the public API way) or override didRender instead of rendered (the private API way).
  • Thanks @theryanjduffy, i check DataGridList not have rendered function, when i move code events:{ onRenderFinished:'' }, rendered:function(){ this.inherited(arguments); this.doRenderFinished(); }, into moon.GridListImageItem i can catch onRenderFinished event in parent, but it show warning log.

    enyo.kind.inherited: unable to find requested super-method from -> undefined in moon.GridListImageItem, how to fix that warning?
  • @theryanjduffy : i have a moon.Panels with CarouselArranger kind and include 2 panels (HomePanel and ListPanel). ListPanel is paginator page, when active panel is ListPanel (ListPanel show, HomePanel hide) and i next page, i see a problem that in loading data of new page, panels lost focus current panel (ListPanel) and HomePanel is showed after loaded data, it show ListPanel again and hide HomPanel. How to fix not show HomePanel when i loading data new page in ListPanel?? Thank you somuch:smile:
    { name: "panels", kind: "moon.Panels", animate:false, arrangerKind: "CarouselArranger", classes: "enyo-fit full", components:[ { name:'HomePanel', kind:'clip.HomePanel' }, { name:'ListPanel', kind:'clip.ListPanel' } ] }
  • I'm not sure what the problem is based on your description. Are you able to reproduce it within jsfiddle?
  • edited May 2016
    Hi @theryanjduffy how to set spot in focus event, in my code i check if item2 focus, i set spotlight item1, but not working.
    enyo.kind({ name:'test', classes:'moon enyo-fit', components:[ { name:'item', kind:'moon.Item', content:'item 1' }, { name:'item2', kind:'moon.Item', content:'item 2' } ], handlers:{ onSpotlightFocus:'focus' }, focus:function(inSender, inEvent){ if(inEvent.originator.name =="item2"){ console.log('focus 2 '); enyo.Spotlight.spot(this.$.item); } } });

  • edited May 2016
    There are a couple ways to control spotlight. If you want to prevent a control from being spotted, you can either set spotlightDisabled: false on it which will cause Spotlight to skip it or you can return true; from the onSpotlightFocus handler either on that control on one of its ancestors. If you do the latter, you should also programmatically spot something otherwise spotlight focus will disappear. In the former case, Spotlight correctly handles spotting a different control.

    Similar to your code above, you can also programmatically spot another control in the onSpotlightFocused handler which would effectively move the focus to that control after the first had focus. The nuanced difference here is that in handling onSpotlightFocus and returning true, the control never receives spotlight focus (iow, control != enyo.Spotlight.getCurrent()) whereas when handling onSpotlightFocused, the control receives focus (control == enyo.Spotlight.getCurrent()) and then it is immediately moved to another control.

    Hope that helps!
  • thank you @theryanjduffy so much, i call spot in onSpotlightFocused event and success spotlight to item, many thanks for your support
    spotlightFocused:function(inSender,inEvent){ if(inEvent.originator.for == 'item2') { enyo.Spotlight.spot(this.$.item); } },
Sign In or Register to comment.