Created
March 29, 2012 22:38
-
-
Save lsmith/2244450 to your computer and use it in GitHub Desktop.
Keyboard navigable DataTable rows with selection
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
This code should allow users to tab to the first row in the table, which will "select" it by | |
adding a class to it and storing a reference to the row node. Alternately, users can click | |
on a row to select it. Selection can be shifted to the next or previous row with the up and down arrow keys. The 'enter' key will fire a 'rowAction' custom event. | |
*/ | |
table.getRow(0).setAttribute('tabindex', table.get('tabIndex') || 0); | |
table.delegate('keydown', function (e) { | |
var selected = this._selectedRow, | |
tbody = this._tbodyNode, | |
selectedClass = this.getClassName('selected','row'), | |
moveSelection; | |
switch (e.keyCode) { | |
// up arrow | |
case 38: this.selectRow((selected && selected.previous()) || tbody.get('lastChild')); | |
break; | |
// down arrow | |
case 40: this.selectRow((selected && selected.next()) || tbody.get('firstChild')); | |
break; | |
// enter key | |
case 13: this.fire('rowAction', { | |
row: e.currentTarget, | |
record: this.getRecord(e.currentTarget.getData('yui3-record')) | |
}); | |
break; | |
} | |
}, '.yui3-datatable-data > tr', table); | |
table.delegate(['click', 'focus'], function (e) { | |
this.selectRow(e.currentTarget); | |
}, '.yui3-datatable-data > tr', table); | |
table.selectRow = function (row, nofocus) { | |
var selected = this._selectedRow; | |
selected && selected.removeClass(rowClass) | |
.removeAttribute('tabindex'); | |
if (row) { | |
row = row.ancestor('.yui3-datatable-data > tr', true); | |
} | |
if (row) { | |
this._selectedRow = selected = row; | |
if (selected) { | |
selected.addClass(rowClass).setAttribute('tabindex', this.get('tabIndex') || 0); | |
nofocus || selected.focus(); | |
} | |
} | |
return this; | |
}; | |
table.getSelectedRow = function () { | |
return this._selectedRow; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Is this still valid? I am getting errors like table.getrow is not valid and table.delegate is not valid