Set first item as selected in enyo.List

Seems like this should be an easy one, but I can't figure out the correct incantation. I'm setting up a list which needs to be populated dynamically when the app is created. I've got all of that working, but I would like to set the first item in the list as selected after the list is rendered. I just can't seem to make it happen. Where do I put the this.$.myList.select(0) statement?

Here's the fiddle:
http://jsfiddle.net/cletustboone/rbasH/1/

Comments

  • I stuck it into the rendered callback for the kind, see http://jsfiddle.net/rbasH/2/.
  • First, a solution. Defer the selection until the render thread completes or move the selection to the rendered() method of your app
    enyo.asyncMethod(this.$.myMenu, "select", 0);
    rendered: function() {
      this.inherited(arguments);
      this.$.myMenu.select(0);
    }
    Second, the why ... normally, when you set the count of a list, it will render right away. The exception is when you set the count before the List itself has rendered (which is the case when you set it during your app's create()). In that case, List defers the item setup until it's rendered() method is called because it doesn't yet know how many rows to render. The first thing rendered() does is clear the selection. That's what's breaking your otherwise reasonable code. Moving the select() call after the clear occurs will fix it.
  • Thanks for the solution and thoughts everyone! I figured I had to be misunderstanding something about the list's lifecycle. @theryanjduffy, your comments helped me rethink the way I'm setting up my list. I'm populating it with items from localStorage, FYI, which may be empty or contain values on page load. New menu items can be added by user interactions as well, so I can set the list's count on page load as localStorage.length and then call this.setupMenu() when a user interaction adds a new menu item. No need to call this.setupMenu() in the create method.
Sign In or Register to comment.