Questions on Kendo UI for Angular Forum

1 answer

148 views

Kendo Angular Upload always sending empty file

I'm trying to use Kendo Angular Upload but when I check the data being sent to the server in Google Chrome DevTools, the property rawFile, which I beleive is the one responsible to actually retrieve the file data, is always empty as the attachment indicates.

Here's my HTML:

<form class='content' novalidate [formGroup]="edicaoForm">

<div class="k-i-loading" *ngIf="loading"></div>

<div class="row"></div>

<div class="clear-fix mt-4"></div>

<div class="row">

<div class="col-sm-12">

<div class="col-sm-4 pull-left">

<label [for]="logomarca">Logo</label>

<kendo-uploaddropzone zoneId="myZone">Somente arquivos do tipo JPG, JPEG, PNG e SVG são permitidos.</kendo-uploaddropzone>

<kendo-upload zoneId="myZone"

[saveField]="logomarca" [saveUrl]="uploadLogoURL" [chunkable]="false" [restrictions]="restrictions" #logomarca [multiple]="false" [autoUpload]="true"

formControlName="logomarca" ngDefaultControl>

<kendo-upload-messages select="Selecionar arquivo" uploadSelectedFiles="Enviar arquivo" clearSelectedFiles="Cancelar seleção de arquivo"

dropFilesHere="Solte arquivos aqui para carregar" invalidFileExtension="Tipo de arquivo não permitido." remove="Remover" cancel="Cancelar"

fileStatusUploaded="Arquivo carregado com sucesso." externalDropFilesHere="Arraste e solte arquivos aqui para carregar" resume="Concluir" pause="Pausar"

headerStatusUploaded="Concluído" headerStatusUploading="Carregando..." headerStatusPaused="Pausado" fileStatusFailed="Falha ao carregar arquivo."></kendo-upload-messages>

</kendo-upload>

</div>

<div class="row">

<div class="col-sm-6"

[ngClass]="{'has-error': displayMessages.empresaId }">

<label>Empresa</label>

<div>

<kendo-combobox [data]="empresasData" [allowCustom]="false" [placeholder]="'Empresa'" [textField]="'nomeFantasia'" [valueField]="'gid'"

[filterable]="true" class="w-100" formControlName="empresaId" (filterChange)="empresaHandleFilter($event)" (open)="empresaHandleOpen()" required

[suggest]="true" [valuePrimitive]="true" (blur)="blur('empresaId')"></kendo-combobox>

<span class="text-danger" *ngIf="displayMessages.empresaId">

<p [innerHTML]="displayMessages.empresaId"></p>

</span>

</div>

<div class="col-sm-6"

[ngClass]="{'has-error': displayMessages.codigo }">

<label>Código</label>

<div>

<input kendoTextBox [placeholder]="'Código'" maxlength="30" class="w-100" formControlName="codigo" />

<span class="text-danger" *ngIf="displayMessages.codigo">

<p [innerHTML]="displayMessages.codigo"></p>

</span>

</div>

<div class="clear-fix mt-4"></div>

<div class="row">

<div class="col-sm-6" [ngClass]="{'has-error': displayMessages.descricao }">

<label>Descrição</label>

<div>

<input kendoTextBox [placeholder]="'Descrição'" class="w-100" formControlName="descricao" />

<span class="text-danger" *ngIf="displayMessages.descricao">

<p [innerHTML]="displayMessages.descricao"></p>

</span>

</div>

<div class="col-sm-6" [ngClass]="{'has-error': displayMessages.nomeFantasia }">

<label>Nome Fantasia</label>

<div>

<input kendoTextBox [placeholder]="'Nome Fantasia'" class="w-100" formControlName="nomeFantasia" />

<span class="text-danger" *ngIf="displayMessages.nomeFantasia">

<p [innerHTML]="displayMessages.nomeFantasia"></p>

</span>

</div>

<div class="clear-fix mt-4"></div>

<div class="row">

<div class="col-sm-6 pull-left" [ngClass]="{'has-error': displayMessages.tipoIdentificacao }">

<label>Tipo de identificação</label>

<kendo-combobox [data]="tiposDeIdentificacao" [allowCustom]="false" [placeholder]="'Tipo de Identificação'" [textField]="'descricao'"

[valueField]="'valor'" [filterable]="true" class="w-100" [valuePrimitive]="true" formControlName="tipoIdentificacao"

(blur)="blur('tipoIdentificacao')"></kendo-combobox>

<span class="text-danger" *ngIf="displayMessages.tipoIdentificacao">

<p [innerHTML]="displayMessages.tipoIdentificacao"></p>

</span>

</div>

<div class="col-sm-6 pull-left" [ngClass]="{'has-error': displayMessages.numeroDocumento }">

<label>Número Documento</label>

<div>

<input kendoTextBox [placeholder]="'Número Documento'" maxlength="18" class="w-100" (keyup)="maskInputCpfCnpj()" formControlName="numeroDocumento" />

<span class="text-danger" *ngIf="displayMessages.numeroDocumento">

<p [innerHTML]="displayMessages.numeroDocumento"></p>

</span>

</div>

<div class="clear-fix mt-4"></div>

<div class="row">

<div class="col-sm-12">

<div class="col-sm-4 pull-left"

[ngClass]="{'has-error': displayMessages.inscricaoMunicipal }">

<label>Inscrição Municipal</label>

<div>

<input kendoTextBox [placeholder]="'Inscrição Municipal'" maxlength="20" class="w-100" formControlName="inscricaoMunicipal" />

<span class="text-danger" *ngIf="displayMessages.inscricaoMunicipal">

<p [innerHTML]="displayMessages.inscricaoMunicipal"></p>

</span>

</div>

<div class="col-sm-4 pull-left" [ngClass]="{'has-error': displayMessages.inscricaoEstadual }">

<label>Inscrição Estadual</label>

<div>

<input kendoTextBox [placeholder]="'Inscrição Estadual'" maxlength="20" class="w-100" formControlName="inscricaoEstadual" />

<span class="text-danger" *ngIf="displayMessages.inscricaoEstadual">

<p [innerHTML]="displayMessages.inscricaoEstadual"></p>

</span>

</div>

<div class="col-sm-4 pull-left" [ngClass]="{'has-error': displayMessages.cnaeId }">

<label>CNAE</label>

<div>

<kendo-combobox

[data]="cnaesData" [allowCustom]="false" [placeholder]="'CNAE'" [textField]="'descricao'" [valueField]="'gid'" [filterable]="true"

(filterChange)="cnaeHandleFilter($event)" (open)="cnaeHandleOpen()" [suggest]="true" class="w-100" formControlName="cnaeId" [valuePrimitive]="true"

(blur)="blur('cnaeId')"></kendo-combobox>

<span class="text-danger" *ngIf="displayMessages.cnaeId">

<p [innerHTML]="displayMessages.cnaeId"></p>

</span>

</div>

<div class="clear-fix mt-4"></div>

<div class="row">

<div class="col-sm-12">

<div class="col-sm-4 pull-left" [ngClass]="{'has-error': displayMessages.email }">

<label>E-mail</label>

<div>

<input kendoTextBox [placeholder]="'E-mail'" class="w-100" formControlName="email" />

<span class="text-danger" *ngIf="displayMessages.email">

<p [innerHTML]="displayMessages.email"></p>

</span>

</div>

<div class="col-sm-4 pull-left" [ngClass]="{'has-error': displayMessages.site }">

<label>Site</label>

<div>

<input kendoTextBox [placeholder]="'Site'" class="w-100" formControlName="site" />

<span class="text-danger" *ngIf="displayMessages.site">

<p [innerHTML]="displayMessages.site"></p>

</span>

</div>

<div class="col-sm-4 pull-left" [ngClass]="{'has-error': displayMessages.dataRegistro }">

<label>Data Registro</label>

<div>

<kendo-datepicker

[(value)]="dataRegistro" [placeholder]="'Data Registro'" [format]="'dd/MM/yyyy'" [navigation]="false" [weekNumber]="true"

class="w-100"

formControlName="dataRegistro"> </kendo-datepicker>

<span class="text-danger" *ngIf="displayMessages.dataRegistro">

<p [innerHTML]="displayMessages.dataRegistro"></p>

</span>

</div>

<div class="clear-fix mt-4"></div>

<div class="row">

<div class="col-sm-12">

<div class="col-sm-4 pull-left">

<div class="col-sm-6 pull-left" style="padding-left: 2px;" [ngClass]="{'has-error': displayMessages.bloqueada }">

<input type="checkbox" id="bloqueada" class="k-checkbox" formControlName="bloqueada" [checked]="false">

<label class="k-checkbox-label" for="bloqueada">Bloqueada</label>

</div>

<div class="col-sm-6 pull-left" [ngClass]="{'has-error': displayMessages.matriz }">

<input type="checkbox" id="matriz" class="k-checkbox" formControlName="matriz" [checked]="false">

<label class="k-checkbox-label" for="matriz">Matriz</label>

</div>

<div class="clear-fix mt-4"></div>

<div class="row">

<div class="col-sm-12">

<label [for]="observacao">Observação</label>

<kendo-textbox-container class="w-100" style="padding-top: 4px;">

<textarea kendoTextArea formControlName="observacao" #observacao></textarea>

</kendo-textbox-container>

<span class="text-danger" *ngIf="displayMessages.observacao">

<p [innerHTML]="displayMessages.observacao"></p>

</span>

</div>

<div class="clear-fix mt-4"></div>

<div class="col-sm-12 mt-2">

<button kendoButton [icon]="'save'"

class="pull-left btn-primary btn-sm" (click)="atualizar()" [disabled]='!edicaoForm.valid'>Salvar</button>

<button kendoButton [icon]="'delete'" class="pull-right btn-danger btn-sm ml-1" (click)="excluir()">Excluir</button>

<button kendoButton [icon]="'close'" class="pull-right btn-secondary btn-sm" (click)="sendFormStatus()">Fechar</button>

</div>

</form>

<app-alert (alertStatus)="alertEvent($event)" [openedAlert]="openedAlert" [title]="title" [message]="message"></app-alert>

Here's my angular component:

import { Component, OnChanges, AfterViewInit, Input, Output, EventEmitter, ElementRef, ViewChildren } from '@angular/core';

import { FormGroup, FormControlName, FormBuilder, Validators } from '@angular/forms';

import { FormValidator } from '../../../utils/form-validator';

import { NotificationService } from '@progress/kendo-angular-notification';

import { IntlService } from '@progress/kendo-angular-intl';

import { EstabelecimentosService } from '../../services/estabelecimentos.service';

import { Estabelecimento } from '../../models/estabelecimento';

import { Observable, forkJoin } from 'rxjs';

import 'rxjs/add/observable/fromEvent';

import 'rxjs/add/observable/merge';

import { Cnae } from '../../../cnae/models/cnae';

import { CnaeService } from '../../../cnae/services/cnae.service';

import { Empresa } from '../../../empresas/models/empresa';

import { EmpresasService } from '../../../empresas/services/empresas.service';

import { Utils } from '../../../utils/utils';

import { FileRestrictions } from '@progress/kendo-angular-upload';

import { environment } from '../../../../environments/environment';

@Component({

selector: 'app-edit-estabelecimento',

templateUrl: './edit-estabelecimento.component.html',

styleUrls: ['../index/index-estabelecimento.component.css', './edit-estabelecimento.component.css']

})

export class EditEstabelecimentoComponent implements AfterViewInit, OnChanges {

@Input() habilitarView: boolean;

@Input() estabelecimentoId: string;

@Output() formStatus = new EventEmitter<boolean>();

@Output() editedItem = new EventEmitter<Estabelecimento>();

public message: string = '';

public title: string = '';

public openedAlert: boolean = false;

public loading: boolean = false;

private estabelecimentoDescricao: string;

public estabelecimento: Estabelecimento;

public cnaesData: Cnae[] = [];

public cnaesSource: Cnae[] = [];

public empresasData: Empresa[] = [];

public empresasSource: Empresa[] = [];

edicaoForm: FormGroup;

formValidator: FormValidator;

validationMessages: { [key: string]: { [key: string]: string } };

displayMessages: { [key: string]: string } = {};

dataRegistro: any = null;

@ViewChildren(FormControlName, { read: ElementRef }) formInputElements: ElementRef[];

public tiposDeIdentificacao: Array<{ descricao: string, valor: number }> = [{ descricao: 'Pessoa Jurídica', valor: 1 }, { descricao: 'Pessoa Física', valor: 2 }];

uploadLogoURL: string = `${environment.url}imagens/estabelecimento/${this.estabelecimentoId}/logo`;

public restrictions: FileRestrictions = {

allowedExtensions: ['jpg', 'jpeg', 'png', 'svg'],

maxFileSize: 5242880

};

constructor(private readonly fb: FormBuilder,

private readonly utils: Utils,

private readonly empresasService: EmpresasService,

private readonly cnaeServices: CnaeService,

private readonly estabelecimentosService: EstabelecimentosService,

private readonly intl: IntlService,

private readonly notificationService: NotificationService) { }

ngAfterViewInit(): void {

let controlBlurs: Observable<any>[] = this.formInputElements

.map((formControl: ElementRef) => Observable.fromEvent(formControl.nativeElement, 'blur'));

Observable.merge(...controlBlurs).subscribe(() => {

this.displayMessages = this.formValidator.processMessages(this.edicaoForm);

});

}

ngOnChanges(): void {

this.loading = true;

this.validationMessages = {

codigo: { required: 'Informe o código' },

descricao: { required: 'Informe a descrição' },

tipoIdentificacao: { required: 'Informe o tipo de identificação' },

nomeFantasia: { required: 'Informe o nome fantasia ' },

numeroDocumento: { required: 'Informe o número do documento' },

inscricaoEstadual: { required: 'Informe o número de inscrição estadual' },

inscricaoMunicipal: { required: 'Informe o número de inscrição municipal' },

email: { required: 'Informe o email' },

site: { required: 'Informe o site' },

dataRegistro: { required: 'Informe a data do registro' },

observacao: { required: 'Preencha a observação' },

empresaId: { required: 'Informe a Empresa' },

cnaeId: { required: '' }

};

this.edicaoForm = this.fb.group({

codigo: ['', [Validators.required]],

descricao: ['', [Validators.required]],

tipoIdentificacao: [0, [Validators.required]],

nomeFantasia: ['', [Validators.required]],

numeroDocumento: ['', [Validators.required]],

inscricaoEstadual: ['', []],

inscricaoMunicipal: ['', []],

email: ['', []],

site: ['', []],

bloqueada: ['', []],

dataRegistro: ['', []],

observacao: ['', []],

matriz: ['', []],

empresaId: ['', [Validators.required]],

cnaeId: ['', []],

logomarca: ['', []]

});

this.formValidator = new FormValidator(this.validationMessages);

forkJoin(this.estabelecimentosService.getEstabelencimento(this.estabelecimentoId), this.empresasService.getAll(), this.cnaeServices.getAll()).subscribe(response => {

this.estabelecimento = new Estabelecimento();

this.estabelecimento.gid = this.estabelecimentoId;

response[0]['data'].numeroDocumento = this.utils.convertToCpfCnpj(response[0]['data'].numeroDocumento);

this.preencherForm(response[0]['data']);

this.empresasSource = response[1]['data'];

this.formValidator.preencherCombo(this.edicaoForm, 'empresaId', this.empresasData = response[1]['data']);

this.cnaesSource = response[2]['data'];

this.formValidator.preencherCombo(this.edicaoForm, 'cnaeId', this.cnaesData = response[2]['data']);

});

}

preencherForm(estabelecimento: any): void {

this.estabelecimentoDescricao = estabelecimento.descricao;

if (estabelecimento.cnae == [] || estabelecimento.cnae == undefined || estabelecimento.cnae == null) {

estabelecimento.cnae = Object.assign({});

}

if (!estabelecimento.logomarca) {

estabelecimento.logomarca = Object.assign({});

}

this.edicaoForm.patchValue({

codigo: estabelecimento.codigo,

descricao: estabelecimento.descricao,

tipoIdentificacao: estabelecimento.tipoIdentificacao,

nomeFantasia: estabelecimento.nomeFantasia,

numeroDocumento: estabelecimento.numeroDocumento,

inscricaoEstadual: estabelecimento.inscricaoEstadual,

inscricaoMunicipal: estabelecimento.inscricaoMunicipal,

email: estabelecimento.email,

site: estabelecimento.site,

dataRegistro: this.intl.parseDate(estabelecimento.dataRegistro),

bloqueada: estabelecimento.bloqueada,

matriz: estabelecimento.matriz,

observacao: estabelecimento.observacao,

empresaId: estabelecimento.empresa.gid,

cnaeId: estabelecimento.cnae.gid,

logomarca: estabelecimento.logomarca

});

this.loading = false;

}

sendFormStatus() {

this.habilitarView = false;

this.formStatus.emit(this.habilitarView);

}

atualizar() {

this.loading = true;

if (this.edicaoForm.dirty && this.edicaoForm.valid) {

const estabelecimento = Object.assign({}, this.estabelecimento, this.edicaoForm.value);

if (estabelecimento.cnaeId != [] && estabelecimento.cnaeId != undefined && estabelecimento.cnaeId != null) {

estabelecimento.cnae = new Cnae();

estabelecimento.cnae.gid = estabelecimento.cnaeId;

} else {

estabelecimento.cnae = null;

}

estabelecimento.empresa = new Empresa();

estabelecimento.empresa.gid = estabelecimento.empresaId;

estabelecimento.numeroDocumento = this.utils.removeCaracter(estabelecimento.numeroDocumento);

this.estabelecimentosService.atualizar(estabelecimento).subscribe(success => {

this.onSuccess(success, 'Atualizado');

}, error => {

this.onError(error);

});

}

excluir() {

this.title = 'Atenção';

this.message = `Você deseja realmente excluir o estabelecimento "${this.estabelecimentoDescricao}"?`;

this.openedAlert = true;

this.loading = true;

}

alertEvent($event: boolean) {

this.openedAlert = false;

$event == false ? this.loading = false : true;

if ($event == true) {

this.estabelecimentosService.excluir(this.estabelecimentoId).subscribe(success => {

this.onSuccess(success, 'Excluído');

this.habilitarView = false;

this.formStatus.emit(this.habilitarView);

}, error => {

this.onError(error);

});

}

onSuccess(success: any, acao: string): any {

this.notificationService.show({

content: `${acao} com sucesso!`,

animation: { type: 'slide', duration: 800 },

cssClass: 'button-notification',

position: { horizontal: 'center', vertical: 'bottom' },

type: { style: 'success', icon: true },

hideAfter: 1000

});

this.editedItem.emit(success);

this.loading = false;

}

onError(error: any): any {

this.notificationService.show({

content: `Ocorreu um erro: ${error.message}.`,

animation: { type: 'slide', duration: 800 },

cssClass: 'button-notification',

position: { horizontal: 'center', vertical: 'bottom' },

type: { style: 'error', icon: true },

closable: true

});

this.loading = false;

}

maskInputCpfCnpj() {

let estabelecimento = Object.assign({}, this.estabelecimento, this.edicaoForm.value);

this.edicaoForm.patchValue({

numeroDocumento: estabelecimento.numeroDocumento = this.utils.convertToCpfCnpj(estabelecimento.numeroDocumento)

});

}

blur(item: string) {

if (this.edicaoForm.controls[item].value === '' || this.edicaoForm.controls[item].value === undefined || this.edicaoForm.controls[item].value === null) {

this.displayMessages[item] = this.validationMessages[item].required

} else {

delete this.displayMessages[item];

}

empresaHandleOpen() {

this.empresasData = JSON.parse(JSON.stringify(this.empresasSource));

}

empresaHandleFilter(value: string) {

if (value) {

this.empresasData = this.empresasSource.filter((s) => s.nomeFantasia.toLocaleLowerCase().includes(value.toLocaleLowerCase()));

}

cnaeHandleOpen() {

this.cnaesData = JSON.parse(JSON.stringify(this.cnaesSource));

}

cnaeHandleFilter(value: string) {

if (value) {

this.cnaesData = this.cnaesSource.filter((s) => s.codigo.toLocaleLowerCase().includes(value.toLocaleLowerCase()));

}

General Discussions

answered on 24 Jun 2020

6 answers

3.2K+ views

Kendo Grid Group Styling

Good morning, I am trying to add some Styling to our Kendo Grid, and it is around the Grouping we have applied.

Attached is what I am trying to do, but I can't seem to find a style to work. Is there anyway to achieve this desired style.

Thanks,

Bill

General Discussions

answered on 23 Jun 2020

1 answer

306 views

Export selected rows of kendo grid to pdf is not working

Export selected rows of kendo grid to pdf is not working If there is a way of getting this done any answer would be appreciated,

1. I want to export only the selected rows and not the entire data

2. I am attaching a screenshot

thank you

General Discussions

answered on 22 Jun 2020

3 answers

526 views

[Solved] cancellable switch?

I have a switch and I want to confirm with the user that they want to perform the action. Is there any way to return false and have the switch not change if the user clicks cancel?

Switch

answered on 22 Jun 2020

4 answers

482 views

Virtual Columns not working

The grid renders the first page plus a few more so you can scroll right a little bit and stops there.

There is no error message, all columns have width.

Are there other settings that are incompatible with this feature?

I've been trying variations with no success.

I also tried bringing the example into my component, it also stopped working.

So I went through my dependencies and didn't find any discrepancies. Anything I did find I upgraded.

This is a hybrid Angular/Angularjs application, though this particular route is all Angular.

We have also been using onpush, but turning this off didn't seem to make a difference for the example grid.

Angular version 8.2.14

Grid

answered on 19 Jun 2020

1 answer

99 views

Always show date on a message?

Our users noticed that the message date is shown to the side when you click on the message. They want this date to show all of the time.

I didn't see in docs, but is there a way to do that?

Conversational UI

answered on 19 Jun 2020

1 answer

720 views

Kendo grid image taking more time to load

Hello team,

I'm using kendo grid in my angular project and it has a column with image field. I m using an API to bind the data to grid. But when i'm binding with and with out the image there is a lot of performance issue. It is taking more time when loading with the image. With out image it comes up in seconds.

So can you please help me in getting the data quickly with image too? Is there any code that you can provide to me on this for reducing the image size or getting the data into grid?

Thanks in Advance.

Thanks & Regards

Vimala

General Discussions

answered on 18 Jun 2020

1 answer

133 views

Grid Groupable Loading Overlay

Is there a way for me to detect when a grouped category is collapsed or expanded?

Please see this example: https://stackblitz.com/edit/angular-u7ccbo

When I try to collapse or expand a category, there's a slight pause that causes the web application to hang. Instead of that happening, I would like to place a loading overlay so that the user is disabled from doing anything until the category has collapsed or expanded.

Thanks.

General Discussions