I am writing custom code for the rowSelectionChanging and checkBoxStateChanging events to handle selection when the user clicks rows in the grid and having trouble determining when the user wants to select multiple rows by holding down the SHIFT key. When the row itself is clicked, I can tell that the user has SHIFT held down because the "ui" object parameter passed into the rowSelectionChanging event has startIndex and endIndex properties set to the first selected row and the row the user is shift-clicking on. However, when the user holds SHIFT down and clicks a checkbox, the equivalent checkBoxStateChanging event and its equivalent ui object do not have those same startIndex and endIndex properties for me to examine. I browsed around the API documentation as well as the object itself in a JavaScript debugger and couldn't find properties to help handle programmatic selection of rows in checkBoxStateChanging as is possible in rowSelectionChanging.
Is there a way to handle multiple row selection via the SHIFT key in the checkBoxStateChanging event?
Hi James,
sure, you can get that from the event argument in your event handler:
rowSelectionChanging: function (evt, ui) {
rowSelectionChanging:
function
(evt, ui) {
if (evt.shiftKey) { // can also do evt.ctrlKey
}
Hope it helps. Thanks,
Angel
I'm afraid I don't see that property exposed on the "evt" object in either the rowSelectionChanging event (which is what your code sample shows) or the checkBoxStateChanging event (which is where I'm unable to see the state of the SHIFT key). I'm attaching a watch window screenshot of the properties I do see on the "evt" object passed into the checkBoxStateChanging event.
For now checkBoxStateChanging does not expose an event which can detect shiftKey whether it is pressed. So I will log this as internal bug. But for now I can propose you a simple workaround. Just you can bind to keydown and keyup of document and detect whether shift is pressed.
Here it is a sample:
$(function () {
$('#grid1').igGrid({
...
features: [
{
name: "RowSelectors",
enableCheckBoxes: true,
enableRowNumbering: true,
checkBoxStateChanging: function (evt, ui) {
if (_shifted) {
// you can apply your logic
console.log('checkbox clicked with shift')
},
name: "Selection",
mode: "row",
multipleSelection: true,
if (ui.endIndex !== undefined) {
rowSelectionChanged: function (evt, ui) {
name: "Updating"
],
});
var _shifted = false;
$(document).bind({
'keydown': function (e) {
if (e.keyCode === $.ui.keyCode.SHIFT) {
_shifted = true;
'keyup': function(e){
_shifted = false;
I have tested this and it is working. I hope this will help you.
Thanks,Miro
Oh, and if it's useful because we may or may not be using the same version of igGrid, here's the version header from my infragistics.ui.grid.selection.js file:
* Infragistics.Web.ClientUI Grid Selection (and Keyboard navigation) 12.1.20121.2049
*
* Copyright (c) 2011-2012 Infragistics Inc.