this is my grid row
this is the edit dialog form
I am not being able to autofill the data of the selected row on the edit dialog box. Here is my grid .ts code
`interface EcmToolChange {
toolId: number;
toolChangeId: number;
partChangeId: number;
partNumber: string;
oppositePart: string;
partType: string;
releaseLevel: string;
necLec: string;
toolAffected: string;
certDataAffected: number;
tlLeadRelLvl: string;
dtShippedToDatabank: string;
necCompleteDate: string;
sourceName: string;
programName: string;
pdi: string;
lhStablePartCode: string;
rhStablePartCode: string;
authNumber: string;
authNumberN: string;
authTypeName: string;
addedBy: number;
fmtLastUpdatedDate: string;
approvalDate: string;
fmtdtShippedToDatabank: string;
fmtCompleteDate: string;
fmtNecCompleteDate: string;
fmtReleaseLevel: string;
}
@Component({
// tslint:disable-next-line: component-selector
selector: 'ecm-tool-change',
templateUrl: './ecm-tool-change.component.html',
styleUrls: ['./ecm-tool-change.component.scss']
})
export class EcmToolChangeComponent implements OnInit, OnDestroy {
pageOptions: PageOptions = {
page: 0,
order: 'asc',
size: 10,
sort: 'toolId',
};
private designSources: any[];
data: EcmToolChange[];
loading = false;
total = 0;
toolId: number;
columns: ColumnDef[] = [
{ field: 'partNumber', name: 'Lead Part #', editable: false, width: '7em' },
{ field: 'oppositePart', name: 'Opp Part #', editable: false, width: '7em' },
{ field: 'fileType', name: 'File Type', editable: false, width: '6.5em' },
{ field: 'releaseLevel', name: 'Rel Lvl', editable: false, width: '5.5em' },
{ field: 'necLec', name: 'NEC LEC', width: '6.5em' },
{ field: 'toolAffected', name: 'TL Affected?', type: 'checkbox', width: '7.5em' },
{ field: 'certDataAffected', name: 'Cert Data?', type: 'checkbox', width: '7.5em' },
{ field: 'tlLeadRelLvl', name: 'TL Lead Rel Lvl', width: '9em' },
{ field: 'dtShippedToDatabank', name: 'Shipped to Databank', type: 'date', width: '13em' },
{ field: 'necCompleteDate', name: 'NEC Compl Date', type: 'date', width: '13em' },
{ field: 'sourceName', name: 'Design Source', width: '10em' },
{ field: 'authNumber', name: 'Auth. # (alpha)', width: '9.5em', editable: false },
{ field: 'authNumberN', name: 'Auth. # (numeric)', width: '10em', editable: false },
{ field: 'authTypeName', name: 'Auth. Type', width: '7em', editable: false },
{ field: 'programName', name: 'Program Name', width: '22em', editable: false },
{ field: 'pdi', name: 'PDI', width: '7em', editable: false },
{ field: 'lhStablePartCode', name: 'LH CSPC', width: '7em', editable: false },
{ field: 'rhStablePartCode', name: 'RH CSPC', width: '7em', editable: false },
];
@Input() resourced = false;
@Input() selectedEcmTool$: BehaviorSubject<any>;
@ViewChild('toolChangeTable') toolChangeTable: DataTableComponent;
constructor(
private readonly ecmToolChangeService: EcmToolChangeService,
private readonly ecmService: EcmService,
private readonly dialog: MatDialog
) {}
get hasSelectedNone(): boolean {
return (this.toolChangeTable.selections || [])
.filter((row) => Object.keys(row).length !== 0).length === 0;
}
get hasSelectedMultiple(): boolean {
return (this.toolChangeTable.selections || [])
.filter((row) => Object.keys(row).length !== 0).length >= 2;
}
get hasSelectedSingle(): boolean {
return (this.toolChangeTable.selections || [])
.filter((row) => Object.keys(row).length !== 0).length === 1;
}
ngOnInit() {
if (this.resourced) {
this.columns.forEach((val) => val.editable = false);
}
this.selectedEcmTool$.subscribe(
(selectedEcmTool) => {
if (selectedEcmTool) {
const toolId = selectedEcmTool.toolId;
this.updateSelectedEcmTool(toolId);
this.updateDesignSources();
} else {
this.data = [];
}
}
);
}
ngOnDestroy() {
if (this.selectedEcmTool$) { this.selectedEcmTool$.unsubscribe(); }
}
onMultiRowUpdateClick() {
this.dialog.open(EtcMultiRowUpdateComponent,
{
autoFocus: true,
width: '450px',
data: {
selections: this.toolChangeTable.selections,
designSources: this.designSources
}
}).afterClosed().subscribe((val) => {
if (val && val.reload) { this.updateSelectedEcmTool(this.toolId); }
});
}`
here is my html for the grid where i am passing the function to my multiedit
`<button mat-button (click)="onMultiRowUpdateClick()" (keypress.enter)="onMultiRowUpdateClick()"
[disabled]="this.resourced || hasSelectedNone">Multi-Edit</button>`
here is the html for the edit dialog box:
<div mat-dialog-content>
<form class="flex-dialog-container" [formGroup]="multiRowUpdateForm">
<div class="space-between-items">
<div></div>
<div>
<h4>Enable</h4>
</div>
</div>
<div class="space-between-items">
<mat-form-field>
<mat-label>NEC LEC</mat-label>
<input #neclec matInput formControlName="necLec" autocomplete="off"
[minLength]="NEC_LEC_MIN_LENGTH" [maxLength]="NEC_LEC_MAX_LENGTH"
[value]="neclec.value.toString().toUpperCase()">
</mat-form-field>
<mat-checkbox color="primary" formControlName="chkNecLec"></mat-checkbox>
</div>
<div class="space-between-items">
<mat-checkbox color="primary" formControlName="toolAffected">Is Tool Affected</mat-checkbox>
<mat-checkbox color="primary" formControlName="chkToolAffected"></mat-checkbox>
</div>
<div class="space-between-items">
<mat-checkbox color="primary" formControlName="certDataAffected">Is Certification Data Affected</mat-checkbox>
<mat-checkbox color="primary" formControlName="chkCertDataAffected"></mat-checkbox>
</div>
<div class="space-between-items">
<mat-form-field>
<mat-label>Tool Lead Release Level</mat-label>
<input #tlr matInput formControlName="tlLeadRelLvl" autocomplete="off"
[value]="tlr.value.toString().toUpperCase()">
</mat-form-field>
<mat-checkbox color="primary" formControlName="chkTlLeadRelLvl"></mat-checkbox>
</div>
this is my code for edit dialog box ts
constructor(
private readonly dialogRef: MatDialogRef<EtcMultiRowUpdateComponent>,
private readonly fb: FormBuilder,
private readonly ecmToolChangeService: EcmToolChangeService,
private readonly cgpAlertDialogService: CgpAlertDialogService,
@Inject(MAT_DIALOG_DATA) private readonly data: any
) {
this.multiRowUpdateForm = this.fb.group({
chkNecLec: [false],
chkToolAffected: [false],
chkCertDataAffected: [false],
chkTlLeadRelLvl: [false],
chkDtShippedToDataBank: [false],
chkDesignSourceId: [false],
designSourceId: [],
dtShippedToDatabank: [],
necLec: ['', necLecValidator],
tlLeadRelLvl: [''],
certDataAffected: [false],
toolAffected: [false]
});
}
ngOnInit() {
this.designSources = this.data.designSources;
}
ngOnDestroy() {
this._subs.forEach(sub => sub.unsubscribe());
}