Keyboard Accessible Select All Checkbox?

[Mark]

Hi,

I'm trying to add a "select all" checkbox to a grid (along with a column of checkboxes). Using the several samples available, this works fine for a mouse. I was also able to get the table body checkboxes working using the technique in the grid walkthru. However, this doesn't seem to work on the table header. Is there anyway to get this to work? The only thing that even comes close is setting tabindex=0 on the header checkbox, but this results in the header and body behaving differently, which isn't very good either.

Mark

Sources:

http://www.telerik.com/support/code-library/select-grid-rows-using-checkboxes-and-preserve-it-between-the-pages
http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#keyboard-navigation

Fiddle: http://jsfiddle.net/e2x9g/7/

[Mark]

I'll partially answer my own question...looking at the source code, even though the headers skip the logic around giving focus to the cell, they do call .k-link.click() [this is for sorting].  So I wired up an empty span in my checkbox header, listen to that event and then basically copied the code around giving focus to the object inside of the cell.

Other than the hackish nature of this, the one thing that still behaves differently is that you don't need to press ESC to navigate away.

Anyone have any better ideas or ways to complete this? I wish the grid supported this OOB since it's a pretty common requirement.

Thanks,

Mark

http://jsfiddle.net/e2x9g/23/

[Petur Subev]

Hello Mark,

I do not really understand your exact question, could you please clarify it? Basically if you want to check all the checkboxes you can use the approach used in this code library article:

http://www.telerik.com/support/code-library/checkbox-column-and-incell-editing

Kind Regards,
Petur Subev
Telerik

 

 

[Mark]

Hi Petur,

I don't have ASP.NET, but my question is around using the keyboard with the checkbox in the header (the checkAll in the example). It doesn't look like the header works in the same way as the body cells when using a keyboard. Based on my research, the checkbox in the header isn't editable at all with a keyboard.  You'll see this in my original fiddle

dle.net/e2x9g/7/
Mark

[Mark]

Sorry my last post got cut off. In my original fiddle (which seems to more or less duplicate the example @ http://www.telerik.com/support/code-library/checkbox-column-and-incell-editing), there is no ability to check the checkbox in the header cell using a keyboard. No key combination at all works, which I believe is because the grid is intercepting all keyboard commands.  In my later fiddle, I believe thatr I fixed it by using a bit of a hack.

Original: http://jsfiddle.net/e2x9g/7/
Fix:
http://jsfiddle.net/e2x9g/23/

[Petur Subev]

Hello Mark,

Based on your examples I created the following JsBin example:

http://jsbin.com/unatic/78/edit

I used your approach to make the checkbox in the headerTemplate focusable with the keyboard.

I hope this is what you are searching for.

Kind Regards,
Petur Subev
Telerik

 

 

[Mark]

Hi Petur,

Absolutely - this seems to work reasonably well - I just feel a little squimish of using the k-link style in a way that it really isn't intended for. I hope that the grid provides a native checkbox implementation some day. While the "select a row" design is pretty slick, alot of people prefer checkboxes (for good or bad).  I'll add it to the client wishlist but hopefully this will help anyone else who finds this.

Mark