|
import {
Component, OnInit, ViewChild } from '@angular/core';
import {
Browser } from '@syncfusion/ej2-base';
import {
DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
import {
DialogEditEventArgs, SaveEventArgs } from '@syncfusion/ej2-angular-grids';
import {
FormGroup, AbstractControl, FormControl } from '@angular/forms';
import {
Dialog } from '@syncfusion/ej2-angular-popups';
import {
EmitType } from '@syncfusion/ej2-base';
import {
UploaderComponent } from '@syncfusion/ej2-angular-inputs';
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class
ProductComponent implements OnInit {
@ViewChild('defaultupload',{static:false})
public uploadObj: UploaderComponent;
public multiple: boolean = false;
public data: DataManager;
public editSettings: Object;
public toolbar: string[];
public orderForm: FormGroup;
public pageSettings: Object;
public submitClicked: boolean = false;
public uploadInput: string = '';
public browseClick() {
document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
return false;
}
public onFileSelect:
EmitType<Object> = (args: any) => {
this.uploadInput =
args.filesData[0].name;
}
public path: Object = {
saveUrl: 'api/Productphotos/Save'
};
uploadedFile: any;
public dataManager: DataManager = new
DataManager({
url: 'Product/UrlDatasource',
updateUrl: 'Product/Update',
insertUrl: 'Product/Insert',
removeUrl: 'Product/Delete',
adaptor: new UrlAdaptor()
});
public ngOnInit(): void {
this.data = this.dataManager;
this.editSettings = { allowEditing:
true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
this.toolbar = ['Add', 'Edit',
'Delete'];
this.pageSettings = { pageCount: 5};
}
createFormGroup(data: IOrderModel):
FormGroup {
return new FormGroup({
Id: new FormControl(data.Id),
Category: new FormControl(data.Category),
Description: new
FormControl(data.Description)
});
}
actionBegin(args: SaveEventArgs): void {
if (args.requestType === 'beginEdit'
|| args.requestType === 'add') {
this.submitClicked = false;
this.orderForm =
this.createFormGroup(args.rowData);
}
if (args.requestType === 'save') {
this.submitClicked = true;
this.uploadObj.upload();
args.data['Description'] =
this.uploadedFile.name;
if (this.orderForm.valid) {
args.data =
this.orderForm.value;
} else {
args.cancel = true;
}
}
}
actionComplete(args:
DialogEditEventArgs): void {
if ((args.requestType === 'beginEdit'
|| args.requestType === 'add')) {
if (Browser.isDevice) {
args.dialog.height = window.innerHeight
- 90 + 'px';
(<Dialog>args.dialog).dataBind();
}
// Set initail Focus
if (args.requestType ===
'beginEdit') {
(args.form.elements.namedItem('CustomerName') as HTMLInputElement).focus();
} else if (args.requestType ===
'add') {
(args.form.elements.namedItem('OrderID') as HTMLInputElement).focus();
}
}
}
get Id(): AbstractControl { return this.orderForm.get('Id'); }
get Category(): AbstractControl { return
this.orderForm.get('Category'); }
get Description(): AbstractControl {
return this.orderForm.get('Description'); }
}
export interface IOrderModel {
Id?: number;
Category?: string;
Description?: string;
}
|
