Web Components Configurando a planilha

    O componente Planilha Web Components permite que o usuário configure muitos aspectos diferentes do controle. Isso inclui, mas não se limita a, edição das células, visibilidade de linhas de grade e cabeçalhos, proteção, nível de zoom e várias outras propriedades relacionadas à planilha do Excel.

    Web Components Configuring Spreadsheet Example

    Configuring Cell Editing

    Quando um usuário edita um valor de célula e confirma a nova entrada, oIgcSpreadsheetComponent controle tem a capacidade de navegar para células adjacentes à célula ativa ao pressionar a ENTER tecla, dependendo da configuração da planilha.

    Para habilitar essa ENTER navegação de chave, você pode definir aisEnterKeyNavigationEnabled propriedade como verdadeira. Se configurada como falsa, a célula ativa permanecerá a mesma ao pressionar a ENTER tecla.

    Você também pode configurar a direção da célula adjacente para a qual você é navegada ao pressionar a ENTER tecla, definindo aenterKeyNavigationDirection propriedade paraDown,Up,Left ouRight.

    Os seguintes trechos de código demonstram o acima:

    <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

    O Web ComponentsIgcSpreadsheetComponent permite configurar a visibilidade da barra de fórmulas definindo aisFormulaBarVisible propriedade do controle.

    Os seguintes trechos de código demonstram o acima:

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

    this.spreadsheet.isFormulaBarVisible = true;

    Configuring Gridlines

    EleIgcSpreadsheetComponent permite configurar a visibilidade das linhas da grade definindo aareGridlinesVisible propriedade do controle.

    Os seguintes trechos de código demonstram o acima:

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

    this.spreadsheet.areGridlinesVisible = true;

    Configuring Headers

    EleIgcSpreadsheetComponent permite configurar a visibilidade dos cabeçalhos definindo aareHeadersVisible propriedade do controle.

    Os seguintes trechos de código demonstram o acima:

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

    this.spreadsheet.areHeadersVisible = false;

    Configuring Navigation

    OIgcSpreadsheetComponent controle permite configurar a navegação entre as células de uma planilha determinando se o controle está ou não em "modo final". O modo final é a funcionalidade em que, ao pressionar uma tecla de seta, a célula ativa será movida da célula atual para o final da linha ou coluna onde existem dados nas células adjacentes, dependendo da direção da tecla de seta pressionada. Essa funcionalidade é boa para navegar rapidamente até o fim de grandes blocos de dados.

    Por exemplo, se você estiver no modo final e clicar em um bloco grande de dados de 100x100 e pressionar a → tecla de seta, isso vai se mover para a extremidade direita da linha em que você está, para a coluna mais à direita com dados. Após essa operação, oIgcSpreadsheetComponent modo sai do modo de encerramento.

    O modo final entra em vigor em tempo de execução quando o usuário pressiona a END tecla, mas pode ser configurado programaticamente definindo aisInEndMode propriedade do controle da planilha.

    Os seguintes trechos de código demonstram o acima, pois oIgcSpreadsheetComponent início será no modo final:

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

    this.spreadsheet.isInEndMode = true;

    Configuring Protection

    ElesIgcSpreadsheetComponent respeitarão a proteção de um caderno de exercícios com base em ficha de exercícios. A configuração da proteção de uma planilha pode ser configurada chamando oProtect() método na planilha para protegê-la e oUnprotect() método para desprotegê-la.

    Você pode ativar ou desativar a proteção naIgcSpreadsheetComponent folha de exercícios atualmente ativa do controle usando o código abaixo:

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

    Configuring Selection

    OIgcSpreadsheetComponent controle permite configurar o tipo de seleção permitido no controle e então as teclas modificadoras (SHIFT ou CTRL) são pressionadas pelo usuário. Isso é feito definindo aselectionMode propriedade da planilha para um dos seguintes valores:

    • AddToSelection: Novos intervalos de células são adicionados àSpreadsheetSelection coleção docellRanges objeto sem a necessidade de segurar a CTRL tecla ao arrastar pelo mouse, e um intervalo é adicionado com a primeira seta de navegação após entrar no modo. É possível entrar no modo pressionando SHIFT + F8.
    • ExtendSelection: O alcance de seleção naSpreadsheetSelection coleção do objetocellRanges que representa a célula ativa é atualizado à medida que se usa o mouse para selecionar uma célula ou navegando pelo teclado.
    • Normal: A seleção é substituída ao arrastar o mouse para selecionar uma célula ou um intervalo de células. Da mesma forma, ao navegar pelo teclado, uma nova seleção é criada. Pode-se adicionar um novo intervalo segurando a CTRL tecla e usando o mouse, e pode alterar o alcance de seleção contendo a célula ativa mantendo SHIFT a tecla pressionada enquanto clica com o mouse ou navegando com o teclado, como com as setas.

    OSpreadsheetSelection objeto mencionado nas descrições acima pode ser obtido usando aactiveSelection propriedade doIgcSpreadsheetComponent controle.

    Os seguintes trechos de código demonstram a configuração do modo de seleção:

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

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

    this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection;

    A seleção doIgcSpreadsheetComponent controle também pode ser definida ou obtida programaticamente. Para seleção única, você pode definir aactiveCell propriedade Múltipla seleção é feita através doSpreadsheetSelection objeto que é retornado pelaIgcSpreadsheetComponent propriedade doactiveSelection controle.

    OSpreadsheetSelection objeto possui umAddCellRange() método que permite adicionar programaticamente um intervalo de células à seleção da planilha na forma de um novoSpreadsheetCellRange objeto.

    O trecho de código a seguir demonstra como adicionar um intervalo de células à seleção da planilha:

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

    Configuring Tab Bar Area

    OIgcSpreadsheetComponent controle respeita a configuração da visibilidade e largura da área da barra de aba aWindowOptions partir do atualmente ativoworkbook via astabBarWidth propriedades eTabBarVisibility, respectivamente.

    A área da barra de guias é a área que visualiza os nomes das planilhas como guias no controle.

    Você pode configurar a visibilidade e a largura da barra de guias usando o seguinte trecho de código:

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

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

    Configuring Zoom Level

    O componente Web Components Planilha suporta dar zoom in e out configurando suazoomLevel propriedade. O nível de zoom pode ser de no máximo 400% e no mínimo de 10%.

    Definir essa propriedade como um número representa a porcentagem como um número inteiro, então definir para 100zoomLevel é equivalente a definir para 100%.

    Os trechos de código a seguir mostram como configurar o nível de zoom da planilha:

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

    this.spreadsheet.zoomLevel = 200;

    API References