Angular Configuring Spreadsheet

The Angular Spreadsheet component allows the user to configure many different aspects of the control. This includes, but is not limited to, editing of the cells, the visibility of gridlines and headers, protection, zoom level, and various other properties related to the Excel worksheet.

Angular Configuring Spreadsheet Example

Configuring Cell Editing

When a user edits a cell value and confirms the new input, the IgxSpreadsheetComponent control has the ability to navigate to cells adjacent to the currently active cell on press of the Enter key, depending on the configuration of the spreadsheet.

In order to enable this Enter key navigation, you can set the isEnterKeyNavigationEnabled property to true. If set to false, the active cell will stay the same when pressing the Enter key.

You can also configure the direction of the adjacent cell navigated to on press of the Enter key by setting the enterKeyNavigationDirection property to Down, Up, Left or Right.

The following code snippets demonstrate the above:

<igx-spreadsheet isEnterKeyNavigationEnabled=true
    enterKeyNavigationDirection="Left">
</igx-spreadsheet>

this.spreadsheet.isEnterKeyNavigationEnabled = true;
this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Left;

Configuring Formula Bar

The Angular IgxSpreadsheetComponent allows you to configure the visibility of the formula bar by setting the isFormulaBarVisible property of the control.

The following code snippets demonstrate the above:

<igx-spreadsheet isFormulaBarVisible=true></igx-spreadsheet>

this.spreadsheet.isFormulaBarVisible = true;

Configuring Gridlines

The IgxSpreadsheetComponent allows you to configure the visibility of its gridlines by setting the areGridlinesVisible property of the control.

The following code snippets demonstrate the above:

<igx-spreadsheet areGridlinesVisible=true></igx-spreadsheet>

this.spreadsheet.areGridlinesVisible = true;

Configuring Headers

The IgxSpreadsheetComponent allows you to configure the visibility of its headers by setting the areHeadersVisible property of the control.

The following code snippets demonstrate the above:

<igx-spreadsheet areHeadersVisible=false></igx-spreadsheet>

this.spreadsheet.areHeadersVisible = false;

The IgxSpreadsheetComponent control allows you to configure navigation between a worksheet's cells by configuring whether or not the control is in "end mode." End mode is the functionality where, on press of an arrow key, the active cell will be moved from the current cell to the end of the row or column where data exists in the adjacent cells, depending on the direction of the arrow key pressed. This functionality is good for navigating to the end of large blocks of data very quickly.

For example, if you are in end mode, and you click in a large 100x100 block of data, and press the Right arrow key, this will navigate to the right end of the row that you are in to the furthest right column with data. After this operation, the IgxSpreadsheetComponent will pop out of end mode.

End mode goes into effect at runtime when the user presses the End key, but it can be configured programmatically by setting the isInEndMode property of the spreadsheet control.

The following code snippets demonstrate the above, in that the IgxSpreadsheetComponent will begin in end mode:

<igx-spreadsheet isInEndMode=true></igx-spreadsheet>

this.spreadsheet.isInEndMode = true;

Configuring Protection

The IgxSpreadsheetComponent will respect the protection of a workbook on a worksheet-by-worksheet basis. Configuration for a worksheet's protection can be configured by calling the Protect() method on the worksheet to protect it, and the Unprotect() method to unprotect it.

You can activate or deactivate protection on the IgxSpreadsheetComponent control's currently active worksheet by using the code below:

this.spreadsheet.activeWorksheet.protect();
this.spreadsheet.activeWorksheet.unprotect();

Configuring Selection

The IgxSpreadsheetComponent control allows you to configure the type of selection allowed in the control then modifier keys (Shift or Ctrl) are pressed by the user. This is done by setting the selectionMode property of the spreadsheet to one of the following values:

AddToSelection: New cell ranges are added to the SpreadsheetSelection object's cellRanges collection without needing to hold down the ctrl key when dragging via the mouse and a range is added with the first arrow key navigation after entering the mode. One can enter the mode by pressing Shift+F8.
ExtendSelection: The selection range in the SpreadsheetSelection object's cellRanges collection representing the active cell is updated as one uses the mouse to select a cell or navigating via the keyboard.
Normal: The selection is replaced when dragging the mouse to select a cell or range of cells. Similarly when navigating via the keyboard a new selection is created. One may add a new range by holding the Ctrl key and using the mouse and one may alter the selection range containing the active cell by holding the Shift key down while clicking with the mouse or navigating with the keyboard such as with the arrow keys.

The SpreadsheetSelection object mentioned in the descriptions above can be obtained by using the activeSelection property of the IgxSpreadsheetComponent control.

The following code snippets demonstrate configuration of the selection mode:

<igx-spreadsheet selectionMode="ExtendSelection"></igx-spreadsheet>

this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection;

The selection of the IgxSpreadsheetComponent control can also be set or obtained programmatically. For single selection, you can set the activeCell property Multiple selection is done through the SpreadsheetSelection object that is returned by the IgxSpreadsheetComponent control's activeSelection property.

The SpreadsheetSelection object has an AddCellRange() method that allows you to programmatically add a range of cells to the selection of the spreadsheet in the form of a new SpreadsheetCellRange object.

The following code snippet demonstrates adding a cell range to the spreadsheet's selection:

this.spreadsheet.activeSelection.addCellRange(new SpreadsheetCellRange(2, 2, 5, 5));

Configuring Tab Bar Area

The IgxSpreadsheetComponent control respects the configuration of the visibility and width of the tab bar area from the WindowOptions of the currently active workbook via the tabBarWidth and TabBarVisibility properties, respectively.

The tab bar area is the area that visualizes the worksheet names as tabs in the control.

You can configure the tab bar's visibility and width using the following code snippet:

this.spreadsheet.workbook.windowOptions.tabBarVisible = false;

this.spreadsheet.workbook.windowOptions.tabBarWidth = 200;

Configuring Zoom Level

The Angular Spreadsheet component supports zooming in and out by configuring its zoomLevel property. The zoom level can be a maximum of 400% and a minimum of 10%.

Setting this property to a number represents the percentage as a whole number, so setting the zoomLevel to 100 is equivalent to setting it to 100%.

The following code snippets show how to configure the spreadsheet's zoom level:

<igx-spreadsheet zoomLevel=200></igx-spreadsheet>

this.spreadsheet.zoomLevel = 200;

Angular Configuring Spreadsheet