Titanium Multiselect TableViewRows


/ Published in: JavaScript
Save to your folder(s)

**(Titanium) JavaScript**

Currently Ti.UI.TableViews don't have native multiple selection behaviour

This function will create and return TableView instance which tracks rows that are *selected* using a supplied array to store the selected indexes.
When a row is clicked it toggles its *selected* state and adds/removes from the array.
**Custom events added to the table**

* onrowselect(e)
* onrowunselect(e)

**e** will be the same event object the originating click event received.
## Example ##

var dataRows []; // collection of TableViewRows
var params = {data:dataRows}; // any normal TableView params
var indexes = [];
var tableview = NAMESPACE.tableViewMultiSelectRows(params,indexes);
tableview.addEventListener('onrowselect',function(e){
Ti.API.log('select');
e.row.backgroundColor = '#f00';
});
tableview.addEventListener('onrowunselect',function(e){
Ti.API.log('unselect');
e.row.backgroundColor = '#fff';
});
tableview.addEventListener('click',function(e){
Ti.API.log(indexes);
});
**NB: this is not suitable for tables where rows are added/removed dynamically - without modification**

Tried setting the array on the table itself but that does not work and always returns an empty array. Also storing the row itself in the array rather than index does not work as it never finds indexOf(e.row) so e.row must be a unique ref to the row each time???


Copy this code and paste it in your HTML
  1. NAMESPACE.tableViewMultiSelectRows = function(params,arr)
  2. {
  3. var table = Ti.UI.createTableView(params);
  4. table.addEventListener('click',function(e){
  5. e.rowData.selected = !e.rowData.selected;
  6. if(e.rowData.selected) {
  7. var pushed = arr.push(e.index);
  8. table.fireEvent('onrowselect',e);
  9. }else{
  10. var index = arr.indexOf(e.index);
  11. if(index>-1) {
  12. arr.splice(index,1);
  13. table.fireEvent('onrowunselect',e);
  14. }
  15. }
  16. });
  17. return table;
  18. };

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.