Data Grid Reactive Forms Issue

[Ronald Halim]

Hi All,

I am having issue when using data grid reactive form: 

This is my HTML

<ng-template #editSettingsTemplate let-productData>

                                            <div [formGroup]="orderForm">

                                                <div class="form-row">

                                                    <div class="form-group col-md-12">

                                                        <div class="e-float-input e-control-wrapper">

                                                            <input formControlName="productCode" id="txtproductcode" name="txtproductcode" type="text" class="form-control" />

                                                            <span class="e-float-line"></span>

                                                            <label class="e-float-text e-label-top" for="productCode">Code</label>

                                                        </div>

                                                    </div>

                                                </div>

                                                <div class="form-row">

                                                    <div class="form-group col-md-12">

                                                        <div class="e-float-input e-control-wrapper">

                                                            <input formControlName="productDisplay" id="txtproductname" name="txtproductname" type="text" class="form-control" />

                                                            <span class="e-float-line"></span>

                                                            <label class="e-float-text e-label-top" for="productDisplay">Name</label>

                                                        </div>

                                                    </div>

                                                </div>

                                                <div class="form-row">

                                                    <div class="form-group col-md-12">

                                                        <ejs-numerictextbox  placeholder="Quantity" floatLabelType='Always' format="n0" formControlName="productQuantity" id="txtproductqty" name="txtproductqty" [min]=0 [showSpinButton]="false" [step]="1"></ejs-numerictextbox>                     

                                                    </div>

                                                </div>

                                                <div class="form-row">

                                                    <div class="form-group col-md-12">

                                                        <ejs-numerictextbox format="n2" placeholder="Weight per Unit" floatLabelType="Always" formControlName="productWeight" id="txtproductweight" name="txtproductweight" [min]=0 [showSpinButton]="false"></ejs-numerictextbox>

                                                    </div>

                                                </div>

                                                <div class="form-row">

                                                    <div class="form-group col-md-12">

                                                        <ejs-dropdownlist class="w-100" placeholder="Weight Unit" floatLabelType="Always" formControlName="productWeightUnit" id="selproductweightunit" name="selproductweightunit"  [dataSource]='weightUnit' [value]='value' [fields]='fields'></ejs-dropdownlist>

                                                    </div>

                                                </div>

                                                <div class="form-row">

                                                    <div class="form-group col-md-12">

                                                        <ejs-numerictextbox placeholder="Price per Unit" floatLabelType="Always"format="c2" formControlName="productPrice" id="txtproductprice" name="txtproductprice" [min]=0 [showSpinButton]="false" value="0"></ejs-numerictextbox> 

                                                    </div>

                                                </div>

                                                <div class="form-row">

                                                    <div class="form-group col-md-12">

                                                        <ejs-dropdownlist class="w-100" placeholder="Type" floatLabelType="Always" formControlName="productReasonCode" id="selproductreasoncode" name="selproductreasoncode" [dataSource]='lineType2' [value]='value' [fields]='fields'></ejs-dropdownlist>

                                                    </div>

                                                </div>

                                                <div class="form-row">

                                                    <div class="form-group col-md-12">

                                                        <ejs-dropdownlist class="w-100" placeholder="Condition at Shipping" floatLabelType="Always" formControlName="productLine" id="selproductline" name="selproductline" [dataSource]='line2' [value]='value' [fields]='fields'></ejs-dropdownlist>

                                                    </div>

                                                </div>

                                            </div>

                                        </ng-template>

And my ts file:

actionBegin(args: SaveEventArgs): void {

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

        this.submitClicked = false;

        this.orderForm = this.createFormGroup(args.rowData);

    }

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

      this.submitClicked = true;

        if (this.orderForm.valid) {

            args.data = this.orderForm.value;

        } else {

          console.log("not valid");

            args.cancel = true;

        }

    }

}

createFormGroup(data: IOrderModel): FormGroup {

      return new FormGroup({

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

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

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

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

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

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

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

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

      });

  }

export interface IOrderModel {

  productCode?: string;

  productDisplay?: string;

  productQuantity?: number;

  productWeight?: number;

  productWeightUnit?: string;

  productPrice?: number;

  productReasonCode?: string;

  productLine?: string;

}

The problem is it keep returning : ERROR TypeError: Cannot read property 'parentElement' of null

any idea how to solve this ?

[Manivel Sellamuthu]

Hi Ronald, 

Greetings from Syncfusion support. 

From the shared error statement, we suspect that you have applied the validation rules for the column.  

Since we are using the Reactive forms of the Angular we need not to apply the validation rules at the column level. So we suggest to remove the validation rules provided by the column level, if provided any and check the issue. 

If you still faced the issue, please share the complete Grid code for further validation. 

Regards, 

Manivel

[Ronald Halim]

All good and problem has been solved now. Thanks for your help

[Manivel Sellamuthu]

Hi Ronald, 

Thanks for your update. 

We are glad that the provided solution resolved your requirement. 

Please let us know, if you need further assistance. 

Regards, 

Manivel 

[Ronald Halim]

Hi There,

I am having another issue with this query. 

* When I opened grid modal, and validation occured as per this image:

At this state, When I click "Cancel", it wouldn't close the pop up / modal. Then I add this snippet code:

actionBegin(args: SaveEventArgs, dialog: DialogEditEventArgs): void {

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

        this.submitClicked = false;

        this.orderForm = this.createFormGroup(args.rowData);

    }

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

      this.submitClicked = true;

      

      if (this.orderForm.valid) {

          args.data = this.orderForm.value;

      } else {

          args.cancel = true;

      }

    }

    else if (args.requestType == "cancel") {

      args.cancel = true;

      dialog.dialog.visible = false;

    }

}

As you can see above on args.requestType == "cancel" -> I can closed the modal. But the problem now is the edit toolbar is no longer clickable. I have tried to use grid.endEdit() and grid.closeEdit() but both are not successful and giving error. 

Please help

[Manivel Sellamuthu]

Hi Ronald, 

Thanks for your update. 

From the shared code example we could see that you are cancelling the grid action. So we suspect that this is the cause of the issue. So we suggest you to remove the below code to resolve the issue. 

// this code will cancel the grid edit cancel action 

  else if (args.requestType == "cancel") { 

      args.cancel = true; 

      dialog.dialog.visible = false; 

    } 

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

Please let us know, if you need further assistance. 

Regards, 

Manivel 

[Ronald Halim]

Hi,

removing the line "args.cancel = true" doesn't fix the problem. But adding this "this.grid.isEdit = false;" fixed the issue. Please suggest for better solution or this is best solution already?

[Manivel Sellamuthu]

Hi Ronald, 

 

We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.   

 

https://www.syncfusion.com/account/login 

Regards, 

Manivel