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, o IgcSpreadsheetComponent controle tem a capacidade de navegar até células adjacentes à célula ativa no momento ao pressionar a ENTER tecla, dependendo da configuração da planilha.

    Para habilitar essa ENTER navegação de tecla, você pode definir a isEnterKeyNavigationEnabled propriedade como true. Se definido como false, a célula ativa permanecerá a mesma ao pressionar a ENTER tecla.

    Você também pode configurar a direção da célula adjacente navegada ao pressionar a ENTER tecla definindo a enterKeyNavigationDirection propriedade como Down, Up, Left ou Right.

    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 Components IgcSpreadsheetComponent permite configurar a visibilidade da barra de fórmulas definindo a isFormulaBarVisible 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

    O permite IgcSpreadsheetComponent configurar a visibilidade de suas linhas de grade definindo a areGridlinesVisible 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

    O permite IgcSpreadsheetComponent configurar a visibilidade de seus cabeçalhos definindo a areHeadersVisible 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

    O IgcSpreadsheetComponent controle permite configurar a navegação entre as células de uma planilha, configurando se o controle está ou não no "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 até o final de grandes blocos de dados muito rapidamente.

    Por exemplo, se você estiver no modo final e clicar em um grande bloco de dados de 100x100 e pressionar a → tecla de seta, isso navegará até a extremidade direita da linha em que você está para a coluna mais à direita com dados. Após esta operação, o IgcSpreadsheetComponent sairá do modo final.

    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 a isInEndMode propriedade do controle de planilha.

    Os snippets de código a seguir demonstram o acima, em que o IgcSpreadsheetComponent começará no modo final:

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

    this.spreadsheet.isInEndMode = true;

    Configuring Protection

    O IgcSpreadsheetComponent respeitará a proteção de uma pasta de trabalho em uma base de planilha por planilha. A configuração para a proteção de uma planilha pode ser configurada chamando o Protect() método na planilha para protegê-la e o Unprotect() método para desprotegê-la.

    Você pode ativar ou desativar a IgcSpreadsheetComponent proteção na planilha ativa do controle no momento usando o código abaixo:

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

    Configuring Selection

    O IgcSpreadsheetComponent controle permite que você configure o tipo de seleção permitido no controle e, em seguida, as teclas modificadoras (SHIFT ou CTRL) são pressionadas pelo usuário. Isso é feito definindo a selectionMode propriedade da planilha como um dos seguintes valores:

    • AddToSelection: Novos intervalos de células são adicionados à SpreadsheetSelection coleção do cellRanges objeto sem a necessidade de manter pressionada a CTRL tecla ao arrastar com o mouse e um intervalo é adicionado com a primeira navegação da tecla de seta após entrar no modo. Pode-se entrar no modo pressionando SHIFT + F8.
    • ExtendSelection: O intervalo de seleção na coleção cellRanges do objeto SpreadsheetSelection que representa a célula ativa é atualizado quando se usa o mouse para selecionar uma célula ou navega pelo teclado.
    • Normal: A seleção é substituída ao arrastar o mouse para selecionar uma célula ou 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-se alterar o intervalo de seleção contendo a célula ativa mantendo a tecla pressionada SHIFT enquanto clica com o mouse ou navega com o teclado, como com as teclas de seta.

    O SpreadsheetSelection objeto mencionado nas descrições acima pode ser obtido usando a activeSelection propriedade do IgcSpreadsheetComponent 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 do IgcSpreadsheetComponent controle também pode ser definida ou obtida programaticamente. Para seleção única, você pode definir a activeCell propriedade A seleção múltipla é feita por meio do SpreadsheetSelection objeto retornado pela IgcSpreadsheetComponent propriedade do activeSelection controle.

    O objeto SpreadsheetSelection tem um método AddCellRange() que permite adicionar programaticamente um intervalo de células à seleção da planilha na forma de um novo objeto SpreadsheetCellRange.

    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

    O IgcSpreadsheetComponent controle respeita a configuração da visibilidade e largura da área da barra de guias da WindowOptions área atualmente ativa workbook por meio das tabBarWidth propriedades e TabBarVisibility, 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 Planilha Web Components suporta aumentar e diminuir o zoom configurando sua zoomLevel propriedade. O nível de zoom pode ser de no máximo 400% e no mínimo 10%.

    Definir essa propriedade como um número representa a porcentagem como um número inteiro, portanto, definir o zoomLevel como 100 é equivalente a defini-lo como 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