Error when editing with template

[Niels Van Goethem]

Hello, I am encountering an error when trying to edit a cell with a custom edit template and a dropdown list in it.
I was able to reproduce the issue here: https://stackblitz.com/edit/stackblitz-starters-pdzpwh?file=src%2Fmain.ts

[Rajapandi Ravi]

Hi Niels,

Greetings from Syncfusion support

After reviewing your shared stackblitz sample, we could see that in editTemplate you are defined Form element and within the form you have rendered the Dropdownlist and on change of dropdown value you have invoked the setRowData method of Grid which causing the edit form was not closed properly it was the cause of the problem.

To resolve your reported problem, we suggest you invoke the endEdit method of Grid to close the edit state properly in the Grid and then call the updateRow method instead of setRowData.

For your convenience we have attached a sample below to demonstrate the setup we used. Please refer the below code example, sample for more information.

private registerOnEmployeeChange() {

    this.formGroup

      ?.get('employeeId')

      ?.valueChanges.pipe(

        tap((employeeId) => {

          if (this.currentRowEdit) {

            const newRowData = {

              ...this.currentRowEdit,

              employee: {

                ...this.currentRowEdit.employee,

                id: employeeId,

              },

            };

            console.log(newRowData);

            if (this.grid?.isEdit) { //check whether the Grid is in edit state or not

              this.grid?.endEdit(); //

              setTimeout(() => {

                this.grid?.updateRow(this.currentRowIndex, newRowData);

              }, 0);

            }

          }

        }),

        takeUntil(this.destroy$)

      )

      .subscribe();

  }

 

Sample: https://stackblitz.com/edit/stackblitz-starters-zwsb1f?file=src%2Fmain.ts

Please get back to us if you need further assistance.

Regards,

Rajapandi R

[Niels Van Goethem]

Hello, I have tried as you said:

private registerOnEmployeeChange() {

    this.currentEmployeeFg

      .get('employee')

      .valueChanges.pipe(

        tap((employeeData) => {

          if (this.currentRowEdit) {

            const newRowData = {

              ...this.currentRowEdit,

              employee: employeeData[0],

            };

            if (this.grid.isEdit) {

              this.grid.endEdit();

              setTimeout(() => {

                this.grid.updateRowValue(this.currentRowEdit.id, newRowData);

              }, 0);

            }

          }

        }),

        switchMap((employeeData) => {

          if (!employeeData || !employeeData.length) {

            return NEVER;

          }

          const employee = employeeData[0];

          return this.photosService

            .getPhoto$(employee.amei)

            .pipe(map((photo) => ({ photo, employee })));

        }),

        tap((data) => {

          this.photos[data.employee.amei] = data.photo.data;

        }),

        takeUntil(this.destroy$)

      )

      .subscribe();

  } But I still get this error:

And everything after the tap is not executed

[Rajapandi Ravi]

Niels,

In our previous update, we have provide the solution using our updateRow method but from reviewing your shared code information in your current update you have used the method name as updateRowValue, please refer the below screenshot for more information.

So, we kindly suggest defining the method name appropriately as updateRow. Additionally, in the registerOnEmployeeChange method, you have used switchMap, photosService, and tap, which were not present in your previously shared update sample. As we do not have information about these updates, we request you to share a reproducible sample of the issue along with your updated code changes. This will help us validate the scenario and provide an appropriate solution.