Skip to content

Instantly share code, notes, and snippets.

@lsmith
Created March 29, 2012 22:38
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lsmith/2244450 to your computer and use it in GitHub Desktop.
Save lsmith/2244450 to your computer and use it in GitHub Desktop.
Keyboard navigable DataTable rows with selection
/*
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;
};
@danielryanswain
Copy link

Is this still valid? I am getting errors like table.getrow is not valid and table.delegate is not valid

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment