dts-backoffice-kendo-grid v16.1.1

Documentação do Dts Kendo GRID

Objetivo

Componente que encapsula o Kendo Grid, facilitando o desenvolvimento (similar ao PO-UI) e agregando novas funcionalidades.

Versões

Segue abaixo as últimas versões da Biblioteca, conforme a versão do PO-UI e Angular correspondentes.Detalhes das alterações: [VER CHANGE LOG](https://github.com/ModernizaDatasul/dts-backoffice-util/blob/master/projects/dts-backoffice-kendo-grid/CHANGELOG.md).

Pré-Requisitos

Dependências:

É necessário incluir no package do projeto as Dependências do Kendo Grid. Segue abaixo as dependência utilizadas e as respectivas versões homologadas para o componente, conforme a versão do Angular:

Instalação do Pacote:

npm install dts-backoffice-kendo-grid

Importar o módulo:

import { DtsBackofficeKendoGridModule } from 'dts-backoffice-kendo-grid';

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        ...
        DtsBackofficeKendoGridModule,
    ],
    providers: [
        ...
    ],
})

Tema TOTVS

Para que o Kendo Grid utilize o tema da TOTVS, deve deve ser importado o CSS no angular.json, conforme abaixo:

"styles": [
  "node_modules/@totvs/po-theme/css/po-theme-default.min.css",
  "node_modules/@progress/kendo-theme-default/dist/all.css",
  "src/styles.css"
],

Utilização no HTML

<dts-kendo-grid class="po-md-12"
	[d-columns]="columns"
	[d-data]="items"
	[d-show-more-disabled]="!hasNext"
	[d-sortable]="true"
	[d-filterable]="true"
	[d-groupable]="true"
	[d-reorderable]="true"
	[d-selectable]="true"
	[d-editable]="false"
	[d-literals]="literals"
	[d-actions]="tableActions"
	[d-show-add-button]="false"
	[d-show-export-buttons]="false"
	(d-show-more)="search(true)"
	(d-group-change)="onGroupChange($event)"
	(d-selection-change)="onSelectionChange($event)"
	(d-save-value)="onSaveValue($event)">
</dts-kendo-grid>

Como deve ficar:

Parâmetros

Métodos

Exemplo:

Para utilizar os métodos do Grid, é necessário pegar a referência dele no TS. Para isto, ele deve ser "nomeado" no HTML utilizando "#". Abaixo segue o exemplo de como pegar a referência e fazer a chamada dos métodos.

- HTML -
<dts-kendo-grid #gridCustomer
	...
</dts-kendo-grid>

- TS -
@ViewChild('gridCustomer', { static: true }) gridCustomer: DtsKendoGridComponent;
...
this.gridCustomer.changeColumnConfigView({ column: 'country', visible: true });

this.gridCustomer.changeColumnConfigView({ column: 'internalId', visible: false, locked: true });

this.gridCustomer.changeColumnConfigViewList([
	{ column: 'code', visible: true, locked: true },
	{ column: 'shotName', visible: false, locked: false },
	{ column: 'country', visible: true },
	{ column: 'internalId', locked: false }
]);

Salvando a configuração do Gerenciador de Colunas

Quando o Gerenciador de Colunas estiver disponível (parâmetro d-show-column-manager) é possível disponibilizar um botão, para que o usuário salve a configuração (parâmetro d-save-column-manager). Esta configuração pode ser salva no localStorage do Browse, ou mesmo no Banco de Dados. Segue abaixo um exemplo da implementação, para salvar e recuperar ao inicializar a tela considerando o localStorage. Para salvar nas preferências do Datasul, verifique o serviço ProfileService da biblioteca dtsBackOfficeUtil.

- HTML -
<dts-kendo-grid #gridCustomer
	d-show-column-manager="true"
	(d-save-column-manager)="onSaveColumnManager($event)"
	...
</dts-kendo-grid>

- TS -
@ViewChild('gridCustomer', { static: true }) gridCustomer: DtsKendoGridComponent;
...
ngOnInit(): void {
	...
	this.gridCustomer.changeColumnConfigViewList(this.loadLocalStorage('columnList'));
	...
}

onSaveColumnManager(event: any) {
	this.saveLocalStorage('columnList', event);
}

saveLocalStorage(key: string, value: any): void {
	if (typeof (Storage) === 'undefined') { return; }
	localStorage.setItem(`customer-maint.${key}`, JSON.stringify(value));
}

loadLocalStorage(key: string): any {
	if (typeof (Storage) === 'undefined') { return; }
	return JSON.parse(localStorage.getItem(`customer-maint.${key}`));
}

Literais do Componente

Segue abaixo as literais utilizadas pelo componente com as respectivas traduções padrões. Elas podem ser customizadas enviando um objeto com as literais que se deseja alterar, conforme exemplo abaixo:

{
	groupPanelEmpty:  'Arraste uma coluna aqui para agrupar os valores !!'
}

Interfaces

DtsKendoGridColumn

Objetivo: Definir as colunas do Grid.

Exemplo:

columns: Array<DtsKendoGridColumn>;
		
this.columns = [
	{ column: 'code', required: true, label: this.literals['code'], editable: true, type: 'number' },
	{ column: 'shortName', required: true, label: this.literals['shortName'], editable: true, type: 'string' },
	{ column: 'name', label: this.literals['name'], editable: true, type: 'string', visible: false },
	{ column: 'country', label: this.literals['country'], editable: true, type: 'string' },
	{ column: 'tax', label: this.literals['tax'], editable: true, type: 'boolean', checkbox: true },
	{ column: 'taxValue', label: this.literals['taxValue'], editable: true, type: 'currency', currency: 'BRL', symbol: '1.2-9' },
	{ column: 'admissDate', label: this.literals['admissDate'], type: 'date', format: this.literals['dateFormat'] },
	{ column: 'internalId', label: this.literals['internalId'], editable: false, type: 'number', visible: false, locked: true }
];

DtsLabel

Objetivo: Apresentar os valores em formato de Tags coloridas. Utilizado nos campos do tipo label e subtitle.

Exemplo:

statusLabelList: Array<DtsLabel>;
statesSubtitleList: Array<DtsLabel>;
columns: Array<DtsKendoGridColumn>;
	
this.statusLabelList = [
	{ value: 1, label: literals['active'], color: 'color-11' },
	{ value: 2, label: literals['inactive'], color: 'color-07' },
	{ value: 3, label: literals['blocked'], color: 'color-08' }
];

this.statesSubtitleList = [
	{ value: 'RS', label: literals['rsTag'], color: 'color-01', tooltip: literals['rsDesc'] },
	{ value: 'SC', label: literals['scTag'], color: 'color-05', tooltip: literals['scDesc'] },
	{ value: 'PR', label: literals['prTag'], color: 'color-09', tooltip: literals['prDesc'] },
	{ value: 'SP', label: literals['spTag'], color: 'color-12', tooltip: literals['spDesc'] },
	{ value: 'RJ', label: literals['rjTag'], color: 'color-08', tooltip: literals['rjDesc'] },
	{ value: 'BH', label: literals['bhTag'], color: 'color-03', tooltip: literals['bhDesc'] }
];

this.columns = [
	{ column: 'status', label: this.literals['status'], type: 'label', labels: this.statusLabelList },
	{ column: 'states', label: this.literals['states'], type: 'subtitle', labels: this.statesSubtitleList }
];

DtsEditAction

Objetivo: Definir as funções que serão disparadas durante a edição de uma linha no Grid.

Exemplo:

- HTML -
<dts-kendo-grid
    [d-edit-actions]="editActions"
	...
</dts-kendo-grid>

- TS -
editActions: DtsEditAction;

this.editActions = {
	addAction: this.onAddAction.bind(this),
	saveAction: this.onSaveAction.bind(this)
};

onAddAction(item: ICustomer) {
	if (item) {
		item.shortName = 'Novo';
		item.name = 'Novo Cliente';
	}
	return true;
}

onSaveAction(item: ICustomer) {
	if (item && item.shortName === '') {
		this.poNotification.error({
			message: this.literals['msgErroEdit']
		});
		return false;
	}
	return true;
}

DtsColumnConfigView

Objetivo: Alterar as configurações de Visualização das Colunas do Grid.

Exemplo:

cfgView: DtsColumnConfigView;

cfgView = { 
	column: 'country', 
	visible: true,
	locked: false
};

this.gridCustomer.changeColumnConfigView(cfgView);