Update data without triggering the call

[Niels Van Goethem]

Hello, I have a column in my grid, that uses a custom editTemplate.

What I want to do, is update the record when editing of that column is done, without exiting edit mode.
The functions updateRow and updateRowValue call the update endpoint and exit edit mode.
I get an error when trying to use setRowData

core.mjs:9157 ERROR TypeError: Cannot read properties of undefined (reading 'projectLeadEmployee___name') at Edit.getCurrentEditedData (ej2-grids.es5.js:46071:21) at NormalEdit.endEdit (ej2-grids.es5.js:43756:42) at InlineEdit.endEdit (ej2-grids.es5.js:44238:34) at Edit.endEditing (ej2-grids.es5.js:45826:25) at Edit.endEdit (ej2-grids.es5.js:45737:14) at NormalEdit.clickHandler (ej2-grids.es5.js:43511:33) at Observer.notify (ej2-base.es5.js:2341:29) at Component.notify (ej2-base.es5.js:7427:32) at Grid.mouseClickHandler (ej2-grids.es5.js:21278:14) at _ZoneDelegate.invokeTask (zone.js:446:35)

public handleEmployeeSelection(employees: GetEmployeeSelectorDTO[]) {

    const employee = {

      amei: employees[0].Amei,

      id: employees[0].Id,

      name: `${employees[0].FirstName} ${employees[0].LastName}`,

    };

    const gridRecords = this.grid.getCurrentViewRecords() as any;

    const currentRecord = gridRecords.find((x) => x.id === this.currentFocusedColumn.recordId);

    switch (this.currentFocusedColumn.field) {

      case 'projectLeadEmployee':

        currentRecord.projectLeadEmployee = employee;

        this.projectLeadTextbox.value = employee.name;

        break;

      case 'userLeadEmployee':

        currentRecord.userLeadEmployee = employee;

        this.userLeadTextbox.value = employee.name;

        break;

      case 'sponsorEmployee':

        currentRecord.sponsorEmployee = employee;

        this.sponsorTextbox.value = employee.name;

        break;

      default:

        break;

    }

    this.grid.setRowData(this.currentFocusedColumn.recordId, currentRecord);

  }

    <e-column

      field="projectLeadEmployee.name"

      [width]="120"

      [headerText]="

        'Dashboard.MyProjects.Columns.ProjectLead' | translate: { '@default': 'Project lead' }

      "

      [validationRules]="projectLeadRules"

    >

      <ng-template #editTemplate let-data>

        <ejs-textbox

          #projectLeadTextbox

          (click)="openEmployeeSelector('projectLeadEmployee', data.id)"

          [value]="data.projectLeadEmployee?.name"

        ></ejs-textbox>

      </ng-template>

    </e-column>

[Aishwarya Rameshbabu]

Hi Niels Van Goethem,

Greetings from Syncfusion support.

Upon reviewing your query, we observed that you wanted to update the record upon completing the editing of a column without exiting edit mode. Using the method updateRow, you can update a row without changing it to an edited state. By using setRowData, you can update and refresh a specific row using the Primary key value, but these changes could not affect the original dataSource bound to the Grid. Therefore, before we proceed with a solution, we need additional information from you. Kindly provide the following details:

1. Your exact requirement in detail. Do you want to maintain the edit state of the Row upon editing the values programmatically?

2. Your complete Grid rendering code along with the event handler functions used.

3. Confirm whether you are making the row editable through doubleClick or programmatically (using startEdit ).

4. Whether you expect to update the records programmatically without manual changes after making the row to its editable state.

5. The scenario in which the method ‘handleEmployeeSelection’ is called. In this method, you are setting the value of the custom edit cells and calling the setRowData method. Please explain this use case.

6. A simple issue replication sample along with a video demonstration of the issue replication.

Providing these details will be very helpful for us to offer a more optimal solution.

Regards,

Aishwary R