Basically, the user can drag the data cell area with mouse to specify the specified area as the selection state. At this point, the selection area will be specified according to Selection Style specified through DisplayOptions.selectStyle.
Total = 0
If RowIndicator.selectable is true, the user can drag RowIndicator area with mouse to select the row.
If GridHeader.selectable is true, the user can press shift or ctrl key and drag the column header area to select the column.
Also, the user can press shift key and move arrow keys to change the selection area.
During the selection of using the mouse or keyboard, GridBase.onSelectionResized and GridBase.onSelectionChanged events will be fired, and after the selection, GridBase.onSelectionEnded event will be fired.
The user can check the currently selected rows through getSelectedRowIndices and get the selected item through getSelection.
grdMain.onSelectionEnded = function (grid) {
var rows = grid.getSelectedRows();
var fld = dsMain.getFieldIndex('salary');
var sum = 0;
for (var i = rows.length; i--;) {
var r = grid.getRow(rows[i]).dataIndex();
if (r >= 0) {
sum += dataSet.getValue(r, fld);
}
}
$('#salaryTotal').text(sum);
};
Please refer to the details about the selection area in SelectionItem description.
Basically, when use TAB and ENTER keys and move the cell within the selection area, it will not stray from the area but will turn back. You can specify how to move through EditOptions.moveInSelection property.
You can specify the selection area fill and border color through GridBody.selectionStyles.
grdMain.body().setSelectionStyles({
background: "#100000ff",
border: "#dd0000ff,2px"
});