Updating a different column/cell's value while editing in ejs-grid

[Ervin van der Merwe]

Hi, while editing a row (in the edit state) I would like to programmatically change the text box value of a column in the same row based on the value of another column in that row. 

For example: When I make a specific dropdownedit selection, I want the checkbox column in the grid to be checked programmatically.

At the moment, I can only get the value to change and show after row is updated. I would like to see the value change while editing. So using updateCell is not what I want. 

Is this possible and do you perhaps have a sample?

Thanks

[Thiyagu Subramani]

Hi Ervin, 

Thanks for contacting Syncfusion forum. 

Query :  I would like to programmatically change the text box value of a column in the same row based on the value of another column in that row. 

 

You can achieve your requirement using actionBegin event. please refer to the below code and sample link. 

In this sample, Verified checkbox column is checked programmatically while changing and updating the ShipCountry column value. 

actionBegin(args) { 

    if (args.requestType === 'save') { 

      if (args.previousData.ShipCountry != args.data.ShipCountry) { 

        args.data.Verified = (args.data.Verified === true) ? false : true; 

      } 

    } 

  } 

 

Sample link :  https://stackblitz.com/edit/angular-s1kaek-woy914?file=app.component.ts 

 

Reference link :  https://ej2.syncfusion.com/angular/documentation/api/grid/#actionbegin 

 

2. If you need to update other field value(checkbox value) while changing dropdown value in edit state. Please refer to the below code and sample link. 

 

[app.conponent.html] 

 

<e-column field='ShipCountry' [edit]='dpParams' headerText='Ship Country'  width='170'></e-column> 

 

 

[app.component.ts] 

createdrop(args) { 

    debugger; 

    this.elem = document.createElement('input'); 

    return this.elem; 

  } 

  readdrop(args) { 

 

    return this.dropInstance.value; 

  } 

  destroydrop(args) { 

    this.dropInstance.destroy(); 

  } 

  writedrop(args: { rowData: object, column: any }) { 

    this.dropInstance = new DropDownList({ 

      dataSource: ['Berlin', 'Austria', 'Beligium', 'Brazil', 'France'], 

      fields: { text: 'ShipCountry', value: 'ShipCountry' }, 

      value: (args.rowData as any).ShipCountry, 

      change: this.change.bind(this) 

    }); 

    this.dropInstance.appendTo(this.elem); 

  } 

 

  change(args) { 

    if (args.element.form[4].ej2_instances[0].checked) { 

      args.element.form[4].ej2_instances[0].checked = false; 

    } 

    else { 

      args.element.form[4].ej2_instances[0].checked = true; 

    } 

  } 

 

  ngOnInit(): void { 

    . . . . 

    this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, newRowPosition: 'Top' }; 

    this.dpParams = { 

      create: this.createdrop.bind(this), 

      read: this.readdrop.bind(this), 

      destroy: this.destroydrop.bind(this), 

      write: this.writedrop.bind(this) 

    }; 

. . .  

  } 

 

 

Sample link :  https://stackblitz.com/edit/angular-gsniox-eyeuei?file=app.component.ts 

 

Reference link : https://ej2.syncfusion.com/angular/documentation/grid/edit/?no-cache=1#cell-edit-template 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S. 

[Ervin van der Merwe]

Many thanks for the solution! 

It was the args.element.form[].ej2_instances[0].checked that made it work.

[Thiyagu Subramani]

Hi Ervin 

We're glad to hear that your problem has been resolved. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S.