The Web Components 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.
<!DOCTYPE html><html><head><title>SpreadsheetConfiguring</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="options horizontal"><spanclass="options-label">Selection Mode: </span><selectid="selectionModeDropDown"><option>AddToSelection</option><option>ExtendSelection</option><option>Normal</option></select><spanclass="options-label">Enter Key Navigation Direction: </span><selectid="enterKeyNavDirectionDropDown"><option>Down</option><option>Left</option><option>Right</option><option>Up</option></select></div><divclass="options horizontal"><labelclass="options-label"style="width: 145px"><inputid="areHeadersVisibleCheckbox"type="checkbox"checked="true" /> Enable Headers</label><labelclass="options-label"style="width: 175px"><inputid="isFormulaBarVisibleCheckbox"type="checkbox"checked="true" /> Enable Formula Bar</label><labelclass="options-label"style="width: 225px"><inputid="isEnterKeyNavEnabledCheckbox"type="checkbox"checked="true" />Enable Enter Key Navigation</label><labelid="zoomLevelLabel"class="options-label">Zoom Level: 100% </label></div><divclass="options horizontal"><labelclass="options-label"style="width: 145px"><inputtype="checkbox"id="areGridlinesVisibleCheckbox"checked="true" /> Enable Gridlines</label><labelclass="options-label"style="width: 175px"><inputtype="checkbox"id="isTabBarAreaVisibleCheckbox"checked="true" /> Enable Tab Bar Area</label><labelclass="options-label"style="width: 225px"><inputtype="checkbox"id="isProtectedCheckbox" /> Enable Protected Mode</label><inputid="spreadsheetZoomLevelRange"type="range"min="50"max="150"step="5" /></div><igc-spreadsheetid="spreadsheet"width="100%"height="calc(100% - 7.5rem)"></igc-spreadsheet></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
Configuring Cell Editing
When a user edits a cell value and confirms the new input, the IgcSpreadsheetComponent 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:
The IgcSpreadsheetComponent 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 IgcSpreadsheetComponent 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 IgcSpreadsheetComponent will begin in end mode:
The IgcSpreadsheetComponent 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 IgcSpreadsheetComponent control's currently active worksheet by using the code below:
The IgcSpreadsheetComponent 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 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:
The IgcSpreadsheetComponent 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:
The Web Components 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: