Selection

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,

  1. Cell Selection
  2. Row Selection
  3. Column Selection
  4. 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.