TOTVS HTML Framework

Árvore de páginas

A propriedade t-grid-row-actions permite definir ações customizadas para a edição, inclusão e remoção de linhas no ThfGrid. A seguir, explicamos como você pode configurar e utilizar essas ações.

Ações / atalhos para navegar entre as células:

  • ARROW-UP: Navega para célula superior;
  • ARROW-DOWN: Navega para célula inferior / Na última linha, adiciona uma linha em branco no grid;
  • ARROW-RIGHT: Navega para célula à direita;
  • ARROW-LEFT: Navega para célula à esquerda;
  • TAB: Navega para próxima célula;
  • SHIFT+TAB: Navega para célula anterior;
  • CTRL+DEL: Remove linha;
  • DEL/BACKSPACE: Limpa célula;
  • ENTER: Edita linha com valor atual/Confirma edição da célula;
  • ESC: Cancela edição da célula / Cancela inserção de linhas;
  • A..Z/0..9: Inicia edição.

Após habilitar a célula para edição, cada componente escolhido terá sua própria navegação seguindo o comportamento já entregue pelo PO-UI.

  • Configurando o t-grid-row-actions No seu componente, defina um objeto que siga a interface ThfGridRowActions, onde você especifica os métodos que serão executados durante o ciclo de vida das ações no grid (editar, incluir, remover). Em seguida, vincule esse objeto à propriedade gridRowActions do componente.
import { ThfGridRowActions } from './path/to/thf-grid-row-actions.interface';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-my-grid',
  templateUrl: './my-grid.component.html'
})
export class MyGridComponent {
  form: FormGroup;

  // Definindo as Colunas
  columns = [
    { property: 'name', label: 'Nome', type: 'string' },
    { property: 'age', label: 'Idade', type: 'number' }
  ];

  // Definindo os items
  items = [
    { name: 'Carlos Alberto', age: 23, city: 'São Paulo' },
    { name: 'Anderson Gregorio', age: 38, city: 'Belo Horizonte' },
    { name: 'Bruno Severino', age: 34, city: 'São José dos Campos' }
  ];

  // Definindo as ações de linha no grid
  gridRowActions: ThfGridRowActions = {
    actionEdit: (row, mode) => {
      // Cria um FormGroup com os controles necessários
      return new FormGroup({
        name: new FormControl(row.name),
        age: new FormControl(row.age)
      });
    },
    beforeSave: (updatedRow, originalRow) => {
      // Realiza validações ou alterações antes de salvar a linha editada
      if (updatedRow.age < 18) {
        alert('Idade não permitida.');
        return false;
      }
      return true;
    },
    afterSave: row => {
      // Ação após salvar a linha
      console.log('Linha salva com sucesso!', row);
    },
    beforeRemove: row => {
      // Valida se a linha pode ser removida
      return confirm(`Deseja realmente remover o item: ${row.name}?`);
    },
    afterRemove: row => {
      // Ação após remover a linha
      console.log('Linha removida:', row);
    },
    beforeUndoRemove: row => {
      // Valida se a linha pode desfazer a remoção
      return true;
    },
    afterUndoRemove: row => {
      // Ação após desfazer a remoção da linha
      console.log('Linha restaurad:', row);
    }
  };
}
  • Vinculando gridRowActions ao componente
<thf-grid
  [t-grid-row-actions]="gridRowActions"
  [t-columns]="columns"
  [t-items]="items"
  [t-actions-right]="true"
></thf-grid>

Com gridRowActions, você tem total controle sobre o comportamento das ações de edição, inclusão e remoção no ThfGrid, permitindo customizar os fluxos de acordo com as necessidades da sua aplicação.

Isso dá uma visão clara de como utilizar e configurar o gridRowActions com exemplos práticos de uso no ThfGrid.

  • Sem rótulos