Web Components Configuración de la hoja de cálculo

    El componente Web Components hoja de cálculo permite al usuario configurar muchos aspectos diferentes del control. Esto incluye, entre otros, la edición de las celdas, la visibilidad de las líneas de cuadrícula y los encabezados, la protección, el nivel de zoom y varias otras propiedades relacionadas con la hoja de cálculo de Excel.

    Web Components Configuring Spreadsheet Example

    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.

    Los siguientes fragmentos de código demuestran lo anterior:

    <igc-spreadsheet is-enter-key-navigation-enabled="true"
    enter-key-navigation-direction="Left">
</igc-spreadsheet>

    import { SpreadsheetEnterKeyNavigationDirection } from 'igniteui-webcomponents-spreadsheet';

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

    Configuring Formula Bar

    The Web Components IgcSpreadsheetComponent allows you to configure the visibility of the formula bar by setting the isFormulaBarVisible property of the control.

    Los siguientes fragmentos de código demuestran lo anterior:

    <igc-spreadsheet is-formula-bar-visible="true"></igc-spreadsheet>

    this.spreadsheet.isFormulaBarVisible = true;

    Configuring Gridlines

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

    Los siguientes fragmentos de código demuestran lo anterior:

    <igc-spreadsheet are-gridlines-visible="true"></igc-spreadsheet>

    this.spreadsheet.areGridlinesVisible = true;

    Configuring Headers

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

    Los siguientes fragmentos de código demuestran lo anterior:

    <igc-spreadsheet are-headers-visible="false"></igc-spreadsheet>

    this.spreadsheet.areHeadersVisible = false;

    Configuring Navigation

    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 → 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:

    <igc-spreadsheet is-in-end-mode="true"></igc-spreadsheet>

    this.spreadsheet.isInEndMode = true;

    Configuring Protection

    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:

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

    Configuring Selection

    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 mentioned in the descriptions above can be obtained by using the activeSelection property of the IgcSpreadsheetComponent control.

    Los siguientes fragmentos de código demuestran la configuración del modo de selección:

    <igc-spreadsheet selection-mode="ExtendSelection"></igc-spreadsheet>

    import { SpreadsheetCellSelectionMode } from 'igniteui-webcomponents-spreadsheet';

    this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection;

    The selection of the IgcSpreadsheetComponent 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 IgcSpreadsheetComponent 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.

    El siguiente fragmento de código demuestra cómo agregar un rango de celdas a la selección de la hoja de cálculo:

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

    Configuring Tab Bar Area

    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.

    El área de la barra de pestañas es el área que visualiza los nombres de las hojas de trabajo como pestañas en el control.

    Puede configurar la visibilidad y el ancho de la barra de pestañas utilizando el siguiente fragmento de código:

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

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

    Configuring Zoom Level

    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%.

    Los siguientes fragmentos de código muestran cómo configurar el nivel de zoom de la hoja de cálculo:

    <igc-spreadsheet zoom-level="200"></igc-spreadsheet>

    this.spreadsheet.zoomLevel = 200;

    API References