Documentation

Grid Cells and Rows Selection

(requires jqxgrid.selection.js)

jqxGrid supports 10 selection modes - 'none', 'singlerow', 'multiplerows', 'multiplerowsextended', 'multiplerowsadvanced', 'singlecell', multilpecells', 'multiplecellsextended', 'multiplecellsadvanced' and 'checkbox' The cells and rows selection is implemented in the jqxgrid.selection.js. The default selection mode is set to 'singlerow'. In order to change the selection mode, you need to set the Grid's 'selectionmode' property.
  • none - disables the selection
  • singlerow - allows you to select only one row via a mouse click on a grid row or by using the keyboard arrow keys, page up/down, home and end keys.
  • multiplerows - this selection mode allows you to select multiple rows via a mouse click. Clicking an already selected row will unselect it.
  • multiplerowsextended - this selection mode allows you to select multiple rows via a drag and drop. The selection behavior resembles the selection of icons on your desktop.
  • multiplerowsadvanced - this selection mode allows you to select multiple rows by holding Shift or Ctrl keys while clicking on Grid rows.
  • checkbox - this selection mode allows you to select multiple rows by clicking checkboxes.
  • singlecell - allows you to select only one cell via a mouse click on a grid cell or by using the keyboard arrow keys, page up/down, home and end keys.
  • multiplerows - this selection mode allows you to select multiple cells via a mouse click. Clicking an already selected cell will unselect it.
  • multiplecellsextended - this selection mode allows you to select multiple cells via a drag and drop. The selection behavior resembles the selection of icons on your desktop.
  • multiplecellsadvanced - this selection mode allows you to select multiple cells via a drag and drop. The selection behavior resembles the selection in MS Excel.
The following code sets the Grid's 'selectionmode': 
        $("#jqxgrid").jqxGrid({selectionmode: 'multiplecellsextended'});
    
    Rows Selection API - when the selection mode is set to 'singlerow', 'multiplerows', 'checkbox', 'multiplerowsadvanced' or 'multiplerowsextended'.
- selectrow, unselectrow, getselectedrowindex and getselectedrowindexes. The rowselect and rowunselect events are raised when the user selects or unselects a row.

The following code will select the tenth row:
    
// @param Number. The row index.
$('#grid').jqxGrid('selectrow', 10);
    

    To unselect it, use the code below:
    
// @param Number. The row index.
$('#grid').jqxGrid('unselectrow', 10);
The following code shows how to subscribe to the 'rowselect' and 'rowunselect' events:
    

    
$("#jqxgrid").bind('rowselect', function (event) {
    var selectedRowIndex = event.args.rowindex;
});
$("#jqxgrid").bind('rowunselect', function (event) {
    var unselectedRowIndex = event.args.rowindex;
});
    

    Cells Selection API - when the selection mode is set to 'singlecell', 'multiplecells', 'multiplecellsadvanced' or 'multiplecellsextended'.
- selectcell, unselectcell, getselectedcell and getselectedcells. The cellselect and cellunselect events are raised when the user selects or unselects a cell.

The following code will select a cell which is in the tenth row and in a column with 'firstname' datafield. 
    
        // @param Number. The row index.
// @param String. The column datafield.
$('#grid').jqxGrid('selectcell', 10, 'firstname');
    

    
        To unselect a cell, use the code below:
// @param Number. The row index.
// @param String. The column datafield.
$('#grid').jqxGrid('unselectcell', 10, 'firstname');
    

    The following code shows how to subscribe to the 'cellselect' and 'cellunselect' events:
    
 $("#jqxgrid").on('cellselect', function (event) {
    var datafield = event.args.datafield;
    var row = event.args.rowindex;
    var columntext = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield).text;
});
$("#jqxgrid").on('cellunselect', function (event) {
    var datafield = event.args.datafield;
    var row = event.args.rowindex;
    var columntext = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield).text;
});
    


    The 'clearselection' method allows you to clear the selection - removes the selection in all selected rows and cells.
    
$("#jqxgrid").jqxGrid('clearselection');
    

    
Keyboard Navigation

    
    
        
  • Left Arrow key is pressed - selects the left cell
    • 
        
  • Right Arrow key is pressed - selects the right cell
    • 
        
  • Up Arrow key is pressed - selects the cell above
    • 
        
  • Down Arrow key is pressed - selects the cell below
    • 
        
  • Page Up/Down key is pressed - navigates one page up or down
    • 
        
  • Home/End key is pressed - navigates to the first or last Grid row
    • 
        
  • Tab key is pressed - selects the right cell
    • 
        
  • Shift+Tab keys are pressed - selects the left cell
    • 
    

    The keyboard navigation is enabled by default. However, if you want to disable it, you need to set the 'keyboardnavigation' property to false.
The following code disables the keyboard navigation:
    
$("#jqxgrid").jqxGrid({keyboardnavigation: false});