ComponentBase.ngAfterContentChecked (component-base.js:233)

[Gerhard Polzhofer]

We have defined a grid with numerous columns.
For some columns, the "[allowEditing]" field is associated with a boolean variable. 

If now at runtime the variable is changed from true to false, then the following error message occurs:

core.js:6210 ERROR TypeError: Cannot convert undefined or null to object

    at Function.keys (<anonymous>)

    at ComponentBase.push.4Sq7.ComponentBase.ngAfterContentChecked (component-base.js:233)

    at GridComponent.ngAfterContentChecked (ej2-angular-grids.js:528)

    at callHook (core.js:2583)

    at callHooks (core.js:2542)

    at executeCheckHooks (core.js:2474)

    at refreshView (core.js:9515)

    at refreshEmbeddedViews (core.js:10605)

    at refreshView (core.js:9504)

    at refreshComponent (core.js:10651)

<ejs-grid [dataSource]='m_oUploadPlaeneList' locale='de-DE' allowPaging='true' class="portal-dialog_grid" [pageSettings]='initialPage'  [editSettings]='editSettingsUploadPlan' (actionBegin)='actionBeginUploadPlan($event)' #uploadGridCtrl  (load)='load($event)'>

<e-columns>

        <e-column headerText='' width='35' [allowEditing]='false'>

                <ng-template #template let-data>

                        <div class="trust">

                                <img style="width: 24px; height: 24px" (click)="onClickUploadPlanDelete(data.Position)" src=".\assets\grid\images\wastebucket.png" />

</div>

                        </ng-template>

</e-column>              

                <e-column headerText='' width='35' [allowEditing]='false'>

                <ng-template #template let-data>

                        <div class="trust">

                                <img *ngIf="data.Status==0" style="width: 24px; height: 24px" src=".\assets\grid\images\greenpoint.png" />        

                                <img *ngIf="data.Status==1" style="width: 24px; height: 24px" src=".\assets\grid\images\exclamationmark.png" />        

                            </div>

                        </ng-template>

</e-column>              

                <e-column field='Field1' headerText='Field1' width='20%' textAlign='Left' isPrimaryKey='true' [allowEditing]='m_bfAllowEditingField1'></e-column>                    

                <e-column field='Field2' headerText='Field2' width='4%' popupwidth='20%' editType='dropdownedit' [edit]='field2Params'></e-column>

                <e-column field='Field13' headerText='Field3' width='3%' editType='dropdownedit' [edit]='field3Params' [allowEditing]='m_bfAllowEditingField3'></e-column>

                <e-column field='Field4' headerText='Field4' width='3%' editType='dropdownedit'  [allowEditing]='m_bfAllowEditingField4'></e-column>

                <e-column field='Field5' headerText='Field5' width='3%' editType='dropdownedit'></e-column>

                <e-column field='Field6' headerText='Field6' width='3%' editType='dropdownedit'></e-column>

                <e-column field='Field7' headerText='Field7' width='3%' editType='dropdownedit'></e-column>

                <e-column field='Field8' headerText='Field8' width='3%' editType='dropdownedit'></e-column>

                <e-column field='Field9' headerText='Field9' width='3%' editType='dropdownedit'></e-column>

                <e-column field='Field10' headerText='Field10' width='3%' editType='dropdownedit'></e-column>

                <e-column field='Field11' headerText='Field11' width='5%' textAlign='Left' [allowEditing]='false'></e-column>

</e-columns>

</ejs-grid>           

public m_oUploadPlaeneList: any[] = [];

@ViewChild('uploadGridCtrl') public uploadGridCtrl: GridComponent;

public editSettingsUploadPlan: EditSettingsModel;

public editparamsUploadPlan: Object;

public field2Params:IEditCell;

public field3Params:IEditCell;

public m_bfAllowEditingField1: boolean = false;

public m_bfAllowEditingField3: boolean = false;

public m_bfAllowEditingField4: boolean = false;

this.editSettingsUploadPlan = { allowEditing: true, allowAdding: false, allowDeleting: false };

this.editparamsUploadPlan = { params: { popupHeight: '300px' } };

this.initialPage = { pageSizes: true, pageCount: 4};    

    this.field2Params = {

      params: {

          actionComplete: () => false,

          allowFiltering: true,

          dataSource: new DataManager(this.oUploadField2Data),

          fields: { text: 'Bezeichnung', value: 'Nummer' },

          width: '500%',

          filtering: (e) => {

            let query: Query = new Query();

            query = (e.text !== '') ? query.where('Bezeichnung', 'contains', e.text, true) : query;

            e.updateData(new DataManager(this.oUploadField2Data), query);

          },

          query: new Query()

      }

    }

    this.erstellerParams = {

      params: {

          actionComplete: () => false,

          allowFiltering: true,

          dataSource: new DataManager(this.oUploadField3Data),

          fields: { text: 'Name', value: 'Kuerzel' },

          width: '500%',

          filtering: (e) => {

            let query: Query = new Query();

            query = (e.text !== '') ? query.where('Name', 'contains', e.text, true) : query;

            e.updateData(new DataManager(this.oUploadField3Data), query);

          },

          query: new Query()

      }

    }     

Did we do something wrong with the definition?

[Manivel Sellamuthu]

Hi Gerhard, 

 

Greetings from Syncfusion support. 

 

We have validated the reported issue at our end. We found that while updating the values in the column variable dynamically the angular DOM refreshed before the grid columns refreshed, which causes the collapse in the column model.   

 

So we suggest you to use the below suggested way to resolve the reported issue. We can use actionBegin event of the Grid to enable/disable edit actions for  the grid columns dynamically. Please refer the below code example and sample for more information. 

 

<div class="control-section"> 

<button (click)="btnClick($event)">Enable Edit</button> 

    <ejs-grid [dataSource]='data' #grid allowPaging='true' (actionBegin)="actionbegin($event)" [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column> 

            <e-column field='CustomerName' headerText='Customer Name' width='120' [validationRules]='customeridrules'></e-column> 

            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' editType='numericedit' [validationRules]='freightrules'></e-column> 

            <e-column field='OrderDate' headerText='Order Date' width='130' editType='datepickeredit' format='yMd' textAlign='Right'></e-column> 

            <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams'></e-column> 

        </e-columns> 

    </ejs-grid> 

</div> 

export class AppComponent { 

    public data: Object[]; 

    @ViewChild('grid', {static: true}) 

    public grid: GridComponent; 

    public isEditable: boolean = false; 

.  .  . 

 

    actionbegin (args) { 

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

// here we can enable/disable editing for the columns dynamically based on the flag variable 

        this.grid.getColumnByField('CustomerName').allowEditing = this.isEditable; 

        this.grid.getColumnByField('OrderDate').allowEditing = this.isEditable; 

      } 

    } 

 

    btnClick(args) { 

      this.isEditable = true; 

    } 

 

    public ngOnInit(): void { 

. . . 

    } 

} 

 

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

 

Please let us know if you need further assistance. 

 

Regards, 

Manivel