Angular Configuración de la hoja de cálculo

    El componente Angular 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.

    Angular Configuring Spreadsheet Example

    Configuring Cell Editing

    Cuando un usuario edita un valor de celda y confirma la nueva entrada, el control IgxSpreadsheetComponent tiene la capacidad de navegar a celdas adyacentes a la celda actualmente activa al presionar la tecla Intro, dependiendo de la configuración de la hoja de cálculo.

    Para habilitar esta navegación con la tecla Enter, puede establecer la propiedad isEnterKeyNavigationEnabled en true. Si se establece en falso, la celda activa permanecerá igual al presionar la tecla Intro.

    También puede configurar la dirección de la celda adyacente a la que se navega al presionar la tecla Intro estableciendo la propiedad enterKeyNavigationDirection en Down, Up, Left o Right.

    Los siguientes fragmentos de código demuestran lo anterior:

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

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

    Configuring Formula Bar

    El Angular IgxSpreadsheetComponent permite configurar la visibilidad de la barra de fórmulas estableciendo la isFormulaBarVisible propiedad del control.

    Los siguientes fragmentos de código demuestran lo anterior:

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

    this.spreadsheet.isFormulaBarVisible = true;

    Configuring Gridlines

    ​IgxSpreadsheetComponent le permite configurar la visibilidad de sus líneas de cuadrícula configurando la propiedad areGridlinesVisible del control.

    Los siguientes fragmentos de código demuestran lo anterior:

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

    this.spreadsheet.areGridlinesVisible = true;

    Configuring Headers

    ​IgxSpreadsheetComponent le permite configurar la visibilidad de sus encabezados estableciendo la propiedad areHeadersVisible del control.

    Los siguientes fragmentos de código demuestran lo anterior:

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

    this.spreadsheet.areHeadersVisible = false;

    Configuring Navigation

    El control IgxSpreadsheetComponent le permite configurar la navegación entre las celdas de una hoja de trabajo configurando si el control está o no en "modo final". El modo de finalización es la funcionalidad en la que, al presionar una tecla de flecha, la celda activa se moverá desde la celda actual hasta el final de la fila o columna donde existen datos en las celdas adyacentes, dependiendo de la dirección de la tecla de flecha presionada. Esta funcionalidad es buena para navegar muy rápidamente hasta el final de grandes bloques de datos.

    Por ejemplo, si está en modo final, hace clic en un bloque grande de datos de 100x100 y presiona la tecla de flecha Right, esto navegará hasta el extremo derecho de la fila en la que se encuentra, hasta la columna de datos más a la derecha. Después de esta operación, IgxSpreadsheetComponent saldrá del modo final.

    El modo de finalización entra en vigor en tiempo de ejecución cuando el usuario presiona la tecla Finalizar, pero se puede configurar mediante programación estableciendo la propiedad isInEndMode del control de hoja de cálculo.

    Los siguientes fragmentos de código demuestran lo anterior, ya que IgxSpreadsheetComponent comenzará en modo final:

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

    this.spreadsheet.isInEndMode = true;

    Configuring Protection

    ​IgxSpreadsheetComponent respetará la protección de un libro de trabajo hoja por hoja de trabajo. La configuración para la protección de una hoja de trabajo se puede configurar llamando al método Protect() en la hoja de trabajo para protegerla y al método Unprotect() para desprotegerla.

    Puede activar o desactivar la protección en la hoja de trabajo actualmente activa del control IgxSpreadsheetComponent usando el siguiente código:

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

    Configuring Selection

    El control IgxSpreadsheetComponent le permite configurar el tipo de selección permitida en el control y luego el usuario presiona las teclas modificadoras (Shift o Ctrl). Esto se hace estableciendo la propiedad selectionMode de la hoja de cálculo en uno de los siguientes valores:

    • AddToSelection: se agregan nuevos rangos de celdas a la colección cellRanges del objeto SpreadsheetSelection sin necesidad de mantener presionada la tecla Ctrl al arrastrar con el mouse y se agrega un rango con la primera tecla de flecha de navegación después de ingresar al modo. Se puede ingresar al modo presionando Shift+F8.
    • ExtendSelection: el rango de selección en la colección cellRanges del objeto SpreadsheetSelection que representa la celda activa se actualiza cuando uno usa el mouse para seleccionar una celda o navega a través del teclado.
    • Normal: La selección se reemplaza al arrastrar el mouse para seleccionar una celda o rango de celdas. De manera similar, al navegar mediante el teclado se crea una nueva selección. Se puede agregar un nuevo rango manteniendo presionada la tecla Ctrl y usando el mouse y se puede alterar el rango de selección que contiene la celda activa manteniendo presionada la tecla Shift mientras se hace clic con el mouse o se navega con el teclado, como por ejemplo con las teclas de flecha.

    El objeto SpreadsheetSelection mencionado en las descripciones anteriores se puede obtener utilizando la propiedad activeSelection del control IgxSpreadsheetComponent.

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

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

    this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection;

    La selección del control IgxSpreadsheetComponent también se puede configurar u obtener mediante programación. Para la selección única, puede establecer la propiedad activeCell La selección múltiple se realiza a través del objeto SpreadsheetSelection que devuelve la propiedad activeSelection del control IgxSpreadsheetComponent.

    El objeto SpreadsheetSelection tiene un método AddCellRange() que le permite agregar mediante programación un rango de celdas a la selección de la hoja de cálculo en forma de un nuevo objeto SpreadsheetCellRange.

    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

    El control IgxSpreadsheetComponent respeta la configuración de la visibilidad y el ancho del área de la barra de pestañas de WindowOptions del workbook actualmente activo a través de las propiedades tabBarWidth y TabBarVisibility, respectivamente.

    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

    El componente Hoja de cálculo Angular admite la posibilidad de acercar y alejar mediante la configuración de su zoomLevel propiedad. El nivel de zoom puede ser de un máximo del 400% y un mínimo del 10%.

    Establecer esta propiedad en un número representa el porcentaje como un número entero, por lo que establecer zoomLevel en 100 equivale a establecerlo en 100%.

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

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

    this.spreadsheet.zoomLevel = 200;

    API References