This is a migrated thread and some comments may be shown as answers.

Keyboard Accessible Select All Checkbox?

6 Answers 97 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 04 Apr 2014, 04:33 AM
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/

6 Answers, 1 is accepted

Sort by
0
Mark
Top achievements
Rank 1
answered on 04 Apr 2014, 05:50 AM
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/
0
Petur Subev
Telerik team
answered on 07 Apr 2014, 03:12 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mark
Top achievements
Rank 1
answered on 07 Apr 2014, 04:16 PM
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
0
Mark
Top achievements
Rank 1
answered on 07 Apr 2014, 04:18 PM
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/
0
Petur Subev
Telerik team
answered on 09 Apr 2014, 09:03 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mark
Top achievements
Rank 1
answered on 11 Apr 2014, 10:17 PM
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
Tags
Grid
Asked by
Mark
Top achievements
Rank 1
Answers by
Mark
Top achievements
Rank 1
Petur Subev
Telerik team
Share this question
or