Batch Add and Edit: Reactive form required

[Dileep gagan R]

Hi,

We have a grid where we have batch add and edit functionality and we are using reactive form for editable fields as mentioned in the below link. But we cannot have edit or 

add with reactive form in Batch mode. How can we achieve this. Below is the error we are getting and also find the code snippet we are using.

https://ej2.syncfusion.com/angular/documentation/grid/edit/#reactive-forms

TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

    at BatchEditRender.getEditElement (ej2-grids.es2015.js:27648)

    at BatchEditRender.update (ej2-grids.es2015.js:27638)

    at EditRender.update (ej2-grids.es2015.js:27842)

    at GridComponent.<anonymous> (ej2-grids.es2015.js:29769)

    at GridComponent.push../node_modules/@syncfusion/ej2-angular-base/src/component-base.js.ComponentBase.trigger (component-base.js:292)

    at BatchEdit.editCellExtend (ej2-grids.es2015.js:29729)

    at BatchEdit.editCell (ej2-grids.es2015.js:29675)

    at BatchEdit.dblClickHandler (ej2-grids.es2015.js:29007)

    at Observer.notify (ej2-base.es2015.js:2132)

    at GridComponent.notify (ej2-base.es2015.js:6921)

Code:

private initGrid() {

    this.toolbarOptions = ['Add', 'Update', 'Delete', 'Cancel', 'Search'];

    this.editSettings = {

      allowAdding: true, allowDeleting: true, mode: 'Batch', template: this.edit, allowEditing: true

    };

    this.wrapSettings = { wrapMode: 'Content' };

    this.selectOptions = { mode: 'Row', type: 'Single', checkboxMode: 'ResetOnRowClick' }

    this.pageSettings = { pageSizes: true, pageSize: 10 };

    this.windowHeight = window.innerHeight !== undefined ? window.innerHeight - 310 : 400;

    // this.columns = [{}]

  }

 private initForm(data): FormGroup {

    return new FormGroup({

      name: new FormControl(data.name, Validators.required),

      moduleName: new FormControl(''),

      description: new FormControl(data.description),

      target: new FormControl(data.target),

      assortment: new FormControl(data.assortment),

      otb: new FormControl(data.otb),

      measureId: new FormControl(data.measureId),

      formula: new FormControl({ value: data.formula, disabled: true }),

      type: new FormControl(),

      precision: new FormControl(),

      metricGroups: new FormControl(),

      indicator: new FormControl(data.indicator, Validators.required),

    });

  }

 actionBegin(args): void {

    switch (args.requestType) {

      case 'add':

        this.metricForm = this.initForm(args.rowData);

        break;

      case 'save':

        break;

    }

  }

  actionComplete(args): void {

    if (args.requestType === 'beginEdit' || args.requestType === 'add') {

      (args.form.elements.namedItem('name') as HTMLInputElement).focus();

    }

  }

[Prasanna Kumar Viswanathan]

Hi Dileep, 

 

Thanks for contacting Syncfusion support. 

 

By default in EJ2 Grid we do not have batch editing support in reactive forms for the editable fields. So, it throws script error when you add or edit the reactive form in batch mode. 

 

To use reactive forms for editing operation, you can take leverage of the template support of dialog or inline edit mode. Setting the editSettings.mode as Normal/Dialog and editSettingsTemplate as template variable of NgTemplate to define the grid editors. 

 

Regards, 

Prasanna Kumar N.S.V