Capture keypressed event on the Datatable.

denne

I'm having a lot of trouble trying to capture keypressed event on my datatable.
I have tried jQuery("#mytable").keypress, jQuery("#mytable").live("keypressed") and keydown as well but the event handler is not executed.
I added the keypressed event to jQuery(document).keypress which worked very well but doesn't help me because I only want to capture the event from the datatable when the user has set focus on it pressed some key.

Im trying to implement a ctrl-a, select all, functionality for my table. Would be extremely happy if anyone could give me a hint on how to solve this.

allan

keypress on a non-form element? Are you referring to KeyTable? Or are you trying to bind keypress to the table itself? The table cannot receive focus, so it cannot have key events assigned to it. So I'm not quite clear on what you are looking for.

Allan

denne

Im trying to bind keypress events to the table. Which I see now is not possible.
Trying to figure out an alternative way to do ctrl-a, select all, function to the table.

Maybe bind the keypress event, and if any of the rows in the datatable has css style "selected" and is visible, then ctrl-a should add the class "selected" to all tr's of the table and at the same time prevent the default action of ctrl-a and propagation of the ctrl-a

denne

--

dwaddell

Here is my code for ctrl+a. I am using the jquery ui selectable function to make the rows selectable.

[code]

// When ctrl+a is typed on the keyboard select all the rows in the table (the table has to have focus)
$('.dataTables_scrollBody').keydown
(
function(event)
{
if ((event.ctrlKey) && (event.which === 65))
{
event.preventDefault();

$('tbody tr' ,this).addClass('ui-selected').each( function(){ that.fnSetSelected(this); } );

that.fnSetButtonState(that);
}
}
);

[/code]

Hope this helps,
Drew

denne

I cant get any keyboard events to trigger if I try to add them to anything but jQuery(document).keypress.
Everything else is just ignored. How do you manage to get keydown to work on dataTables_scrollBody? do you use any extra plugins?

dwaddell

It has been awhile since I wrote this specific piece of my table but I do set focus to the table when selecting a row using the jquery ui selectable function.

[code]
var oEvent;
$('.dataTables_scrollBody tbody')
.selectable
(
{
filter : 'tr',
selecting : function (event, ui)
{

// Set the focus to the scroll body so that we can do a ctrl+a on the table
$('.dataTables_scrollBody').focus();

....

[/code]

denne

my god, it works! :)
I tried something very similar earlier today but I missed ".dataTables_scrollBody tbody" and tried to bind it directly to the table. That didnt work. Thanx!

dwaddell

FYI,

The jquery ui team is working on an update for the selectable command that will have more keyboard functionality including ctrl+a and up and down arrows, as well as shift and ctrl clicking.

http://wiki.jqueryui.com/Selectable

Absolutely no idea when they will have it released though.

denne

I wonder, why did it work to focus and catch the keyboard event when using .dataTables_scrollBody tbody and not when using directly on the ?

allan

Without digging into the selectable code I couldn't say. I guess they are binding on the document as a whole and then parsing down through the DOM to see if the 'user space' event should be fired. Either way, good to hear it is working.

Allan

denne

I didnt use Selectable at all. What worked for me was just plain datatables 1.7.3, jquery 1.3.2 and:

I put a click event on the tr-rows of the datatable, which focused on the table with
$('.dataTables_scrollBody').click(function(e){
$('.dataTables_scrollBody').focus();
});

and then put a keypress eventhandler like this:
$('.dataTables_scrollBody').keypress(function(e){
// if A and cmd/ctrl select all trs.
// else do nothing
});

with focus on the table, keypress actually worked.
mind that the code above is a little psuedo code that I have never executed.

allan

Fair enough - thanks for the code. I'll have a look at that - curious to know how it works :-)

Allan