Validation Rules in grid casuing javascript error which makes grid not editable

[Adeeb Basheer]

I have the following grid stacked column

<e-column *ngFor="let branch of branches" [headerText]="branch.name">

<e-stacked-columns >

<e-stacked-column width="140" [field]="'valueSPRT'+branch.id" headerText="Value"

[validationRules]="{'required': true}">

<ng-template #editTemplate let-data>

<span class="e-input-group e-control-wrapper e-valid-input e-input-focus">

<input type="text" [id]="'valueSPRT'+branch.id" [name]="'valueSPRT'+branch.id" [(ngModel)]="data['valueSPRT'+branch.id]"

class="e-input e-defaultcell e-control e-textbox e-lib" placeholder="Enter Value">

span>

ng-template>

e-stacked-column>

<e-stacked-column width="175" [field]="'lastUpdatedSPRT'+branch.id+''" headerText="Last Updated" type="date"

format="dd/MM/yyyy" editType="datepickeredit" [validationRules]="{'required': true}">

e-stacked-column>

e-stacked-columns>

e-column>

Cannot read properties of null (reading 'parentElement')
    at FormValidator.getErrorElement (ej2-inputs.es2015.js:7312:34)
    at FormValidator.validateRules (ej2-inputs.es2015.js:7180:1)
    at FormValidator.validate (ej2-inputs.es2015.js:6843:1)
    at BatchEdit.validateFormObj (ej2-grids.es2015.js:35762:1)
    at BatchEdit.onBeforeCellFocused (ej2-grids.es2015.js:35559:1)
    at Observer.notify (ej2-base.es2015.js:2325:1)
    at GridComponent.notify (ej2-base.es2015.js:6785:1)
    at FocusStrategy.onClick (ej2-grids.es2015.js:7390:1)
    at Observer.notify (ej2-base.es2015.js:2325:1)
    at GridComponent.notify (ej2-base.es2015.js:6785:1

Please help

[Rajapandi Ravi]

Hi Adeeb, 

Greetings from Syncfusion support 

Based on your query we have prepared a sample as per your application scenario and tried to reproduce your reported problem at our end, but it was unsuccessful. Please refer the below code example and sample for more information. 

 

<ejs-grid [dataSource]="data" [editSettings]='editSettings' [allowPaging]="true" [allowResizing]="true"> 

    <e-columns> 

      <e-column 

        field="OrderID" 

        headerText="Order ID" 

        width="120" 

        textAlign="Center" 

        minWidth="10" 

        isPrimaryKey='true' 

      ></e-column> 

      <e-column headerText="Order Details" width="140"> 

        <e-stacked-columns> 

          <e-stacked-column 

            field="CustomerName" 

            headerText="Customer Name" 

            width="140" 

            [validationRules]="{'required': true}" 

          > 

          <ng-template #editTemplate let-data>   

            <input class="e-input" id="editTemplateInput" name="CustomerName" required [(ngModel)]="data.CustomerName" type="text" /> 

            </ng-template> 

          </e-stacked-column> 

          <e-stacked-column 

          field="ShipCountry" 

          headerText="Ship Country" 

          width="140" 

        > 

        </e-stacked-column> 

        </e-stacked-columns> 

      </e-column> 

      <e-column headerText="Details" width="140"> 

        <e-stacked-columns> 

          <e-stacked-column field="ShipCity" headerText="Ship Name" width="140"> 

          </e-stacked-column> 

          <e-stacked-column field="OrderDate" headerText='Order Date' width='120' editType='datetimepickeredit' [format]='formatoptions' textAlign='Right' [validationRules]="{'required': true}"> 

        </e-stacked-column> 

        </e-stacked-columns> 

      </e-column> 

    </e-columns> 

  </ejs-grid> 

 

Sample: https://stackblitz.com/edit/angular-yukzoq-yy9hsw?file=app.component.html 

Screenshot: 

 

If you still face the issue, please replicate the issue with our above attached sample or share any issue reproducible sample that would be helpful for us to validate the application. 

Regards, 

Rajapandi R 

[Adeeb Basheer]

Hi Rajapandi,

Thanks for quick reply.  I have forked from your sample to reproduce the issue. I can see the issue is when I try to dynamically bind input name

Please see the below sample

https://stackblitz.com/edit/angular-yukzoq-d4yb8f?file=app.component.html

[Rajapandi Ravi]

Hi Adeeb, 

Thanks for the update. 

We have checked your shared sample and we are able to reproduce your reported problem at our end. From validating your query, we found that the issue comes from the name attribute was not mapping properly, it was the cause of the problem. To map the name attribute properly, we suggest you use the below way to resolve the problem. Please refer the below code example and sample for more information. 

 

 

<e-stacked-column 

            [field]="'Customer' + 'Name'" 

            headerText="Customer Name" 

            width="140" 

            [validationRules]="{ required: true }" 

          > 

            <ng-template #editTemplate let-data> 

              <input 

                class="e-input" 

                id="editTemplateInput" 

                [attr.name]="'Customer' + 'Name'" 

                required 

                [(ngModel)]="data.CustomerName" 

                type="text" 

              /> 

            </ng-template> 

          </e-stacked-column> 

Sample: https://stackblitz.com/edit/angular-yukzoq-c5zhrj?file=app.component.html 

Screenshot: 

 

Regards, 

Rajapandi R 

[Adeeb Basheer]

This worked. Great thanks!

[Rajapandi Ravi]

Hi Adeeb, 

We are happy to hear that our provided solution was helpful to resolve your problem. 

Please get back to us if you need further assistance. 

Regards, 

Rajapandi R