Select VirtualList item programatically

Can I select/highlight an item in a VirtualList programatically using the index number of the item.

Thank you

Comments

  • there's a select method you can call which accepts the index as the first parameter. Source here
  • Thanks, but I don't think that it's as simple as that. I have tried that among other things without success. I have tried updateRow(), refresh() etc
  • It's as simple as that. but you need to render again the row after doing it.

    Obviously, you'll need to have the appropiate css rules to apply.
  • I must be doing something else wrong then.
  • Attach your code, so we can take a view on it...
  • Thanks for the offer. It is probably too big to post.
    I am working on an application on GitHub. (MySongBook) and the attempt to select the row is a about line 180 in this file

    https://github.com/michote/MySongBook/blob/master/mysongbook.application/source/MySongBook.js

  • edited November 2012
    Following your flow:

    currentIndexChanged: function () {
    if (this.currentIndex >= 0) {
    this.$.songListPane.$[this.currentList].select(this.currentIndex);
    this.openSong(this.currentIndex);
    } else {
    this.$.songListPane.$[this.currentList].clear();
    }
    },
    Also, I think you can delete line 187: this.$.songListPane.$.libraryList.updateRow();

    (BTW, you should handle stuff between components differently, without calling components from child kinds directly, it's easier to maintain the code without having to deal with code changes in different kinds, and it's the way Enyo encourages).
  • Thanks for looking into it. Gives an error VirtualList has no method clear. And with refresh() back in it does not select the row.
  • Forgot that List doesn't expose the clear() method. This should work:
    currentIndexChanged: function (inOldIndex) {
    if (this.currentIndex >= 0) {
    this.$.songListPane.$[this.currentList].select(this.currentIndex);
    this.openSong(this.currentIndex);
    } else {
    this.$.songListPane.$[this.currentList].deselect(inOldIndex);
    }
    },
  • Still no go. Apparently there's no deselect method either.
  • Maybe I'm missing something, but look at line 357 of List.js

  • This is posted in the enyo 1 forum, I don't think the virtual list has an option for handling selections. You would need to apply the selected class in your setup row function
  • Ouch, missed that. Sorry
  • Yes it is enyo 1. But the API reference, which I get to via developer.palm.com and so would be enyo 1, does show the VirtualList as having a select() method.
  • Aw yes, i see that. I've never used that method on it before, i always used the other way they say you can do that:


    ##Modifying List Rows

    Sometimes a list row will need to be modified. For example, if a user clicks on a row, the application
    might want to indicate that the row has been selected by making a color change. In this case,
    a row item could have an onclick handler that stores the index of the selected row. The onSetupRow
    handler would use this information to decorate the selected row. To instruct the list to render, call the
    refresh method. Here's an example:

    itemClick: function(inSender, inEvent) {
    this.selectedRow = inEvent.rowIndex;
    },
    setupRow: function(inSender, inIndex) {
    // check if the row is selected
    var isRowSelected = (inIndex == this.selectedRow);
    // color the row if it is
    this.$.item.applyStyle("background", isRowSelected ? "blue" : null);
    // ...
    }

Sign In or Register to comment.