Hoja de cálculo de configuración Angular
El componente Angular Spreadsheet permite al usuario configurar muchos aspectos diferentes del control. Esto incluye, entre otros, la edición de 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.
Ejemplo de hoja de cálculo de configuración Angular
Configurar la edición de celdas
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;Configurar la barra de fórmulas
Angular IgxSpreadsheetComponent le permite configurar la visibilidad de la barra de fórmulas configurando la propiedad isFormulaBarVisible del control.
Los siguientes fragmentos de código demuestran lo anterior:
<igx-spreadsheet isFormulaBarVisible=true></igx-spreadsheet>this.spreadsheet.isFormulaBarVisible = true;Configurar líneas de cuadrícula
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;Configurar encabezados
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;Configurar la navegación
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;Configurar la protección
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();Configurar la selección
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óncellRangesdel objetoSpreadsheetSelectionsin 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óncellRangesdel objetoSpreadsheetSelectionque 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));Configurar el área de la barra de pestañas
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;Configurar el nivel de zoom
El componente Angular Spreadsheet admite acercar y alejar configurando su propiedad zoomLevel. El nivel de zoom puede ser 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;Referencias de API
activeCellactiveSelectionCellRangesExtendSelection:selectionModeSpreadsheetCellRangeSpreadsheetSelectionIgxSpreadsheetComponentWindowOptionsworkbookzoomLevel
GitHub