Deselect Rows using Ctrl+Click in Wijgrid

Wijgrid offers a great deal of flexibility in the way its rows/cells are selected. Please refer to this documentation link for a list of the selectionModes offered by wijgrid. We're going to focus on the 'multirow' selectionMode for this article. This selectionMode allows users to select multiple rows using the mouse and the Ctrl/Shift keys. However, once multiple rows have been selected, how do you deselect them? We're going to look at how to do that through this blog. Let's set up the wijgrid with its selectionMode set to multirow.

$("#gridview").wijgrid({  
   selectionMode: 'multirow',  
   showSelectionOnRender: false  
});

Here's how the wijgrid looks when multiple rows are selected : Now, what if the user selects a row(s) by mistake or what if he/she changes his/her mind. Well, it'll be a painful task to clear the selection and then select the rows again leaving out the one selected by mistake. Instead of making the user go through this rather tedious process, we can let the user deselect rows using Ctrl+click and save them some time. To accomplish this, we'll handle the CellClicked event of wijgrid and check if the clicked row is selected or not. If it is, we'll remove it from the selection object.

cellClicked: function (e, args) {  
   selection = $(this).wijgrid("selection");  
   //get previously selected rows  
   selectedRows = document.getElementById("hiddenField1").value;  
   if (selectedRows != "") {  
      var rows = selectedRows.split(',');  
      //check if ctrl key is pressed  
      if (event.ctrlKey) {  
         var i;  
         for (i = 0; i < rows.length; i++) {  
            //check if the current row is already selected  
            if (parseInt(rows[i]) === args.cell.rowIndex()) {  
               //remove the row from selection  
               selection.removeRows(args.cell.rowIndex());  
            }  
         }  
      }  
   }  
   //store selected rows' indices in hidden field  
   document.getElementById("hiddenField1").value = $("#gridview").wijgrid("selection").selectedCells()._getSelectedRowsIndicies();  
}

This way we can deselect rows using Ctrl+click. You may take a look at the demo given below. Demo