Selection

6 Feb 20184 minutes to read

Selection provides an interactive support to highlight cell, row, or column that you select. Selection can be done through Mouse, Touch or Keyboard interaction. To enable selection, set allowSelection as true.

Selection Modes

The mode of selection can be single or range selection. The default selection mode can be set using selectionUnit in selectionSettings.
The two types of selection mode are as follows,

Single - ej.Spreadsheet.SelectionUnit.Single
Range - ej.Spreadsheet.SelectionUnit.Range

Selection Type

There are four types of selection in Spreadsheet,

Cell Selection
Row Selection
Column Selection
Sheet Selection

You can set default selectionType in selectionSettings.

Cell Selection

Cell selection is used to select a single or multiple cells. It can be performed using selectRange and performSelection method.

To clear the selection use clearAll method.

The following code example describes the above behavior,

HTML

<div id="Spreadsheet"></div>

<script>
$(function () {
    $("#Spreadsheet").ejSpreadsheet({                
        loadComplete: "loadComplete"                
    });
});

function loadComplete() {
    this.XLSelection.selectRange("A1:C3");
    this.XLDragFill.positionAutoFillElement();
}
</script>

The following output is displayed as a result of the above code example.

Row Selection

Row selection is used to select a single or multiple rows.

To select the multiple rows use selectRows method.

To select a single row use selectRow method.

The following code example describes the above behavior,

HTML

<div id="Spreadsheet"></div>

<script>
$(function () {
    $("#Spreadsheet").ejSpreadsheet({                
        loadComplete: "loadComplete"                
    });
});

function loadComplete() {
    this.XLSelection.selectRows(0,2);
    this.XLDragFill.positionAutoFillElement();
}
</script>

The following output is displayed as a result of the above code example.

NOTE

This type can be set as default by setting selectionType property in selectionSettings as ej.Spreadsheet.SelectionType.Row

Column Selection

Column selection is used to select a single or multiple columns.

To select multiple columns use selectColumns method.

To select single column use selectColumn method.

The following code example describes the above behavior,

HTML

<div id="Spreadsheet"></div>

<script>
$(function () {
    $("#Spreadsheet").ejSpreadsheet({                
        loadComplete: "loadComplete"                
    });
});

function loadComplete() {
    this.XLSelection.selectColumns(0,2);
    this.XLDragFill.positionAutoFillElement();
}
</script>

The following output is displayed as a result of the above code example.

NOTE

This type can be set as default by setting selectionType property in selectionSettings as ej.Spreadsheet.SelectionType.Column

Sheet Selection

Sheet selection is used to select all cells in a worksheet. It can be performed using selectSheet method.
The following code example describes the above behavior,

HTML

<div id="Spreadsheet"></div>

<script>
$(function () {
    $("#Spreadsheet").ejSpreadsheet({                
        loadComplete: "loadComplete"                
    });
});
function loadComplete() {
    this.XLSelection.selectSheet();    
}
</script>

The following output is displayed as a result of the above code example.