Angular Configurando Planilha

    O componente Angular Spreadsheet 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.

    Angular Configuring Spreadsheet Example

    Configuring Cell Editing

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

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

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

    Os seguintes trechos de código demonstram o acima:

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

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

    Configuring Formula Bar

    O Angular IgxSpreadsheetComponent permite que você configure a visibilidade da barra de fórmulas definindo a propriedade isFormulaBarVisible do controle.

    Os seguintes trechos de código demonstram o acima:

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

    this.spreadsheet.isFormulaBarVisible = true;

    Configuring Gridlines

    O IgxSpreadsheetComponent permite que você configure a visibilidade de suas linhas de grade definindo a propriedade areGridlinesVisible do controle.

    Os seguintes trechos de código demonstram o acima:

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

    this.spreadsheet.areGridlinesVisible = true;

    Configuring Headers

    O IgxSpreadsheetComponent permite que você configure a visibilidade de seus cabeçalhos definindo a propriedade areHeadersVisible do controle.

    Os seguintes trechos de código demonstram o acima:

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

    this.spreadsheet.areHeadersVisible = false;

    Configuring Navigation

    O controle IgxSpreadsheetComponent permite que você configure 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 onde, ao pressionar uma tecla de seta, a célula ativa será movida da célula atual para o final da linha ou coluna onde os dados existem 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 Right, isso navegará para a extremidade direita da linha em que você está, para a coluna mais à direita com dados. Após essa operação, o IgxSpreadsheetComponent sairá do modo final.

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

    Os trechos de código a seguir demonstram o acima, pois o IgxSpreadsheetComponent começará no modo final:

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

    this.spreadsheet.isInEndMode = true;

    Configuring Protection

    O IgxSpreadsheetComponent 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 método Protect() na planilha para protegê-la, e o método Unprotect() para desprotegê-la.

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

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

    Configuring Selection

    O controle IgxSpreadsheetComponent permite que você configure o tipo de seleção permitida no controle, então as teclas modificadoras (Shift ou Ctrl) são pressionadas pelo usuário. Isso é feito definindo a propriedade selectionMode da planilha para um dos seguintes valores:

    • AddToSelection: Novos intervalos de células são adicionados à coleção cellRanges do objeto SpreadsheetSelection sem precisar segurar a tecla ctrl ao arrastar com o mouse e um intervalo é adicionado com a primeira navegação de 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 tecla Ctrl e usando o mouse e pode-se alterar o intervalo de seleção que contém a célula ativa segurando a tecla Shift enquanto clica com o mouse ou navegando com o teclado, como com as teclas de seta.

    O objeto SpreadsheetSelection mencionado nas descrições acima pode ser obtido usando a propriedade activeSelection do controle IgxSpreadsheetComponent.

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

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

    this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection;

    A seleção do controle IgxSpreadsheetComponent também pode ser definida ou obtida programaticamente. Para seleção única, você pode definir a propriedade activeCell A seleção múltipla é feita por meio do objeto SpreadsheetSelection que é retornado pela propriedade activeSelection do controle IgxSpreadsheetComponent.

    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 controle IgxSpreadsheetComponent respeita a configuração da visibilidade e largura da área da barra de guias do WindowOptions da workbook ativa no momento por meio das propriedades tabBarWidth 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 Angular Spreadsheet suporta zoom in e out configurando sua propriedade zoomLevel. O nível de zoom pode ser 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:

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

    this.spreadsheet.zoomLevel = 200;

    API References