Passing data from kendo grid HTML to component.ts file - node.js

Question

I am creating a sample fullstack application in angular to do CRUD operations on employee data such as image, name, email, phone, salary and department. I am using kendo grid to show, add and edit employee data. I am using Node JS for API and Mongo DB for database.
I am able to view the employee data and add new employees to list. But i am unable to edit the details using kendo grid. I do not know how to pass value from kendo grid to .ts file.
Below is the code i am working on.
I don't know how to pass the data or update it by employee id. I have used event method but it didn't work. I tried passing dataItem through button click method as well, but it doesn't work
Help me on this.
employee-list.component.html
<form novalidate #myForm="ngForm">
<kendo-grid
[kendoGridTemplateEditing]="createNewEmployee"
[kendoGridBinding]="employees"
[pageSize]="5"
[pageable]="true"
[sortable]="true"
[navigable]="true">
<ng-template kendoGridToolbarTemplate>
<button kendoGridAddCommand type="button">Add new</button>
</ng-template>
<kendo-grid-column title="Profile Picture" [style]="{'text-align': 'center'}" [width]="200">
<ng-template kendoGridCellTemplate let-dataItem>
<img src={{dataItem.imageData}}
onerror=" this.src = './../../assets/placeholder.png' "
height="100" width="100" style="border-radius:50px;" alt="Employee Image"/>
</ng-template>
<ng-template kendoGridEditTemplate let-dataItem="dataItem">
<ng-container *ngIf="imageUrl;else elseTemplate">
<img [src]="dataItem.imageData ? dataItem.imageData : imageUrl" height="100" width="100" style="border-radius:50px;" />
</ng-container>
<ng-template #elseTemplate>
<img src="./../../assets/placeholder.png" height="100" width="100" style="border-radius:50px;">
</ng-template>
<input kendoGridFocusable class="form-control my-2" type="file" id="profileImage" accept="image/*" (change)="onFileChange($event)" required>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="_id" title="id">
<ng-template kendoGridEditTemplate let-dataItem>
<input
[(ngModel)]="dataItem._id"
kendoGridFocusable
name="ID"
class="k-textbox k-input k-rounded-md"
required
/>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="name" title="Name">
<ng-template kendoGridEditTemplate let-dataItem>
<input
[(ngModel)]="dataItem.name"
kendoGridFocusable
name="name"
class="k-textbox k-input k-rounded-md"
required
/>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="email" title="Email">
<ng-template kendoGridEditTemplate let-dataItem>
<input
[(ngModel)]="dataItem.email"
kendoGridFocusable
name="email"
class="k-textbox k-input k-rounded-md"
/>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="phone" editor="numeric" title="Phone">
<ng-template kendoGridEditTemplate let-dataItem>
<input
[(ngModel)]="dataItem.phone"
kendoGridFocusable
name="phone"
type="number"
/>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="salary" editor="numeric" title="Salary">
<ng-template kendoGridEditTemplate let-dataItem>
<input
[(ngModel)]="dataItem.salary"
kendoGridFocusable
name="salary"
required
class="k-textbox k-input k-rounded-md"
type="number"
/>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="department" title="Department">
<ng-template kendoGridEditTemplate let-dataItem="dataItem">
<input
[(ngModel)]="dataItem.department"
kendoGridFocusable
name="department"
required
class="k-textbox k-input k-rounded-md"
/>
</ng-template>
</kendo-grid-column>
<kendo-grid-command-column title="command" [width]="220">
<ng-template kendoGridCellTemplate let-isNew="isNew">
<button kendoGridEditCommand type="button" [primary]="true">
Edit
</button>
<button kendoGridRemoveCommand type="button">Remove</button>
<ng-container *ngIf="isNew; else update">
<button kendoGridSaveCommand [disabled]="!myForm.valid" (click)="addEmployee()">Add</button>
</ng-container>
<ng-template #update>
<button kendoGridSaveCommand [disabled]="!myForm.valid" (click)="updateEmployee()">Update</button>
</ng-template>
<button kendoGridCancelCommand type="button">
{{ isNew ? "Discard changes" : "Cancel" }}
</button>
</ng-template>
</kendo-grid-command-column>
</kendo-grid>
</form>
employee-list.component.ts
export class EmployeesListComponent implements OnInit{
employees: Employee[] = [];
baseApiUrl: string = environment.baseApiUrl;
image: File = null;
imageUrl: string;
employeeDetails: Employee = {
_id: '',
name: '',
email: '',
phone: 0,
salary: 0,
department: '',
imageData: '',
selected: false
};
constructor(
private employeesService: EmployeesService,
private router: Router,
private httpClient: HttpClient
) {}
ngOnInit(): void {
this.employeesService.getAllEmployees().subscribe(
dataEmployees => this.employees = dataEmployees
);
}
onFileChange(event){
this.image = event.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(this.image);
reader.onload = () => {
this.imageUrl = reader.result as string;
};
}
createNewEmployee(): Employee {
return new Employee()
}
addEmployee(){
this.employeesService.addEmployee(this.employees[0], this.image).then(
(response) => {
this.router.navigate(['']);
console.log(this.employees[0].department);
},
(error) => {
console.log(error);
}
);
}
updateEmployee(){
this.employeesService.updateEmployee(this.employeeDetails._id, this.employeeDetails, this.image).then(
(response) => {
this.router.navigate(['']);
},
(error) => {
console.log(error);
}
);
console.log("employee edit")
}
}
I am using employeeDetails to store the updated data and pass it on to service but the updated details aren't stored in it
employee.service.ts
export class EmployeesService {
baseApiUrl: string = environment.baseApiUrl;
constructor(private http: HttpClient) { }
getAllEmployees(): Observable<Employee[]>{
return this.http.get<Employee[]>(this.baseApiUrl + '/employees');
}
updateEmployee(id: string, updateEmployeeRequest: Employee, image:File){
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
if(image != null){
fileReader.readAsDataURL(image);
fileReader.onload = () => {
updateEmployeeRequest.imageData = fileReader.result as string;
this.http.patch(this.baseApiUrl + '/employees/' + id, updateEmployeeRequest).subscribe(
(response) => {
resolve(response);
},
(error) => {
reject(error);
}
);
}
}
else {
this.http.patch(this.baseApiUrl + '/employees/' + id, updateEmployeeRequest).subscribe(
(response) => {
resolve(response);
},
(error) => {
reject(error);
}
);
}
});
}
}