Select VirtualList item programatically

johncc · November 2012

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

Thank you

theryanjduffy · November 2012

there's a select method you can call which accepts the index as the first parameter. Source here

johncc · November 2012

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

rafa_bernad · November 2012

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.

johncc · November 2012

I must be doing something else wrong then.

rafa_bernad · November 2012

Attach your code, so we can take a view on it...

johncc · November 2012

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

rafa_bernad · 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).

johncc · November 2012

Thanks for looking into it. Gives an error VirtualList has no method clear. And with refresh() back in it does not select the row.

rafa_bernad · November 2012

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);
    }
  },

johncc · November 2012

Still no go. Apparently there's no deselect method either.

rafa_bernad · November 2012

Maybe I'm missing something, but look at line 357 of List.js

chrisvanhooser · November 2012

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

rafa_bernad · November 2012

Ouch, missed that. Sorry

johncc · November 2012

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.

chrisvanhooser · November 2012

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);
// ...
}

johncc · November 2012

Thanks Chris

Select VirtualList item programatically

Comments

Howdy, Stranger!

Categories

Select VirtualList item programatically

Comments

Howdy, Stranger!

Quick Links

Categories