Grid using datamanager and custom edit template error: Cannot read property '_viewRef' of null

[Martin Strojek]

Hi,

I'm using the grid with a datamanager and try to add an edit template to the grid with no success.

When i click on the edit button the following error shows up in the console:

ERROR TypeError: Cannot read property '_viewRef' of null
    at Object.ej.template.text/x-template (template.js:107)
    at Object._renderEjTemplate (ej.core.min.js:10)
    at Object._edit (ej.grid.min.js:10)
    at Object.sendDataRenderingRequest (ej.grid.min.js:10)
    at Object._processBindings (ej.grid.min.js:10)
    at Object.startEdit (ej.grid.min.js:10)
    at Object._unboundClickHandler (ej.grid.min.js:10)
    at HTMLDivElement. (ej.core.min.js:10)
    at HTMLElement.dispatch (jquery-3.2.1.min.js:3)
    at HTMLElement.q.handle (jquery-3.2.1.min.js:3)

My Grid:
========
         [allowSorting]="true" [editSettings]="editSettings" [pageSettings]="pageSettings" [allowFiltering]="false"
         [filterSettings]="filterType" [toolbarSettings]="toolbarSettings"
         (toolbarClick)="onToolBarClick($event)" (actionComplete)="onActionComplete($event)">

...
  

grid.ts
=======

import { Component, ViewEncapsulation } from '@angular/core';
import { PropertiesService } from '../../../services/properties.service';
import { CsmApiService } from '../../../services/csmapi.service';
import { DialogService } from "ng2-bootstrap-modal";

@Component({
    selector: 'root-manageuser',
    templateUrl: './manageuser.component.html',   
})

export class ManageUserComponent {
    public gridData: any;
    public pageSettings: any;
    public toolbarSettings: any;
    public filterType: any;
    public editSettings: any;
    public buttons: any;
    public locale: string;
    public pageSize = 10;

    constructor(private properties: PropertiesService, private dialogService: DialogService, private csmApiService: CsmApiService) {
        this.pageSettings = { pageSize: this.pageSize, enableQueryString: true, pageSizeList: [10, 25, 50, 100, 250, 500]  };
        this.toolbarSettings = { showToolbar: true, toolbarItems: ["add", "search"/*, "delete"*/], customToolbarItems: ["Reload", { templateID: "#ReloadGrid" }] };
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, showDeleteConfirmDialog: true, editMode: ej.Grid.EditMode.DialogTemplate, dialogEditorTemplateID: "#mytemplate" };
        this.buttons = [{ type: "edit", buttonOptions: { text: "" } },
            { type: "delete", buttonOptions: { text: "" } },
            { type: "save", buttonOptions: { text: "" } },
            { type: "cancel", buttonOptions: { text: "" } }
        ];
     
        this.loadData();
    }

    private loadData() {

        this.gridData = this.csmApiService.createDatamanager('admin/Users')
    }
   
    ...
 ...
}

My Edit template
================

Just some debugging:

ej.grid.min.js is setting null value for 4th parameter

this._renderEjTemplate(this.model.editSettings.inlineFormTemplateID, this._currentData[0], i.rowIndex, null, a)

calling  _renderEjTemplate: function(i, r, u, f, e)  in ej.core.min.js

f is then passed to template.render (template.js line 94) setting prop variable which is null so scope.viewRef[index] = prop._viewRef; breaks the code:

ej.template['text/x-template'] = function (self, selector, data, index, prop) {
    var templateObject = self.angularTemplate;
    if (!templateObject || !templateObject[selector]) {
        templateObject = templateObject || {};
        templateObject[selector] = { key: ej.getGuid('angulartmpl'), itemData: [], viewRef: [], templateRef: [] };
        self.angularTemplate = templateObject;
    }
    var scope = templateObject[selector];
    if (!ej.isNullOrUndefined(index)) {
        if (!scope.itemData) {
            scope.itemData = [];
        }
        scope.itemData[index] = data;
        scope.viewRef[index] = prop._viewRef;
        scope.templateRef[index] = prop._templateRef;
    }

Any ideas why the error is thrown / fix this?

[Mani Sankar Durai]

Hi Martin, 

Thanks for contacting Syncfusion support.  

We have analyzed your query and we are not able to reproduce the reported issue. We have also prepared a sample based on your code example and that can be downloaded from the below link 

Link: http://www.syncfusion.com/downloads/support/forum/134562/ze/angular2-seeds-systemjs-1113558176 

If you still face the issue please get back to us with the following details, 

1.       Share the video of the issue that you have faced.  

2.       If possible please reproduce the issue in the above attached sample 

The provided information will help us to analyze the issue and provide you the response as early as possible 

Regards, 

Manisankar Durai. 

[Amira]

Did you fixed this, i have?I have the same problem

[Manivannan Padmanaban]

Hi Amira, 

Query: errorMessage: Cannot read property '_viewRef' of null 

We are unable to reproduce the reported issue at our end. For your convenience we have created the sample based on the shared code example, refer the below link. 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/angular2-seeds-systemjs591279883.zip  

After referring the sample still facing the issue, please get back to us with the following details. 

1. Please share the Angular version.
2. Share the Essential studio version.
3. If possible, reproduce the reported issue in the provided sample and revert back to us.

Regards, 

Manivannan Padmanaban. 

[Vicente]

Hi, can you help me?

i have same problem, with only typeScript

Uncaught TypeError: Cannot set property 'onclick' of null

    at Object.parcelRequire.EVxB.@syncfusion/ej2-grids (app.js:858)

    at f (app.js:1)

    at parcelRequire.LuW7 (app.js:1)

    at app.js:1

my class:

import { Grid, Toolbar, Resize, Sort, Group, ContextMenu, Edit, Page, PdfExport, ExcelExport } from '@syncfusion/ej2-grids';

import { EmitType } from '@syncfusion/ej2-base';

import { ClickEventArgs } from '@syncfusion/ej2-navigations';

import { QueryBuilder } from '@syncfusion/ej2-querybuilder';

class NtaRequest{

    post(url: string, data?: any): Promise<ExiosResponse>{

        const promise = new Promise<ExiosResponse>((resolve, reject) => {

            let xhr = new XMLHttpRequest();

            xhr.withCredentials = false;

            xhr.open("POST", url);

        

            xhr.setRequestHeader("Content-Type", "application/json");

            xhr.setRequestHeader("cache-control", "no-cache");

            

            xhr.addEventListener("readystatechange", function () {

                if (this.readyState === 4) {

                    if(this.status==200){

                        let resp: ExiosResponse = {

                            data : JSON.parse(this.response),

                            status : Number(this.status),

                            statusText: this.statusText,

                        }

                        resolve(resp);         

                    }else{

                        let resp: ExiosResponse = {

                            status : Number(this.status),

                            statusText: this.statusText,

                            data: ((this.response!=null)?JSON.parse(this.response):null)

                        }

                    

                        reject(resp);

                    }

                };        

            });

            xhr.addEventListener("error", function(){

                let resp: ExiosResponse = {

                    status : Number(this.status),

                    statusText: this.statusText,

                    data:null

                }

            

                reject(resp);                

            });

            try{

                xhr.send(JSON.stringify(data)); 

            }catch(e){

                let resp: ExiosResponse = {

                    status : 0,

                    statusText: "error",

                    data:null

                };

        

                reject(resp);                

            }

        });

        return promise;

    }

}

interface ExiosResponse {

    data: any;

    status: number;

    statusText: string;

 

  }

var reportId: number = 1

let axios = new NtaRequest;

class FilterData {

    reportId: number

    sqlRule: string

    jsonRule: string

}

/*Grid

*

*

*/

Grid.Inject(Edit, Toolbar, Resize, Sort, Group, Edit, ContextMenu, Page, PdfExport, ExcelExport);

let toolbarGridClickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {

    if (args.item.id === 'Edit') {

        var elToggled = document.getElementById("query-Buider");

        if (elToggled.style.display == "block") {

            elToggled.style.display = "none";

        } else {

            elToggled.style.display = "block";

        }

    };

};

let grid: Grid = new Grid({

    toolbar: [{ text: 'Editar Consulta', tooltipText: 'Editar a consulta deste relatório', prefixIcon: 'e-expand', id: 'Edit' }, 'ExcelExport', 'PdfExport', 'Print', 'Search'],

    toolbarClick: toolbarGridClickHandler,

    editSettings: { allowEditing: false, allowAdding: false, allowDeleting: false },

    allowSorting: true,

    allowPaging: true,

    allowPdfExport: true,

    allowExcelExport: true,

    allowGrouping: true,

    allowMultiSorting: true,

    allowFiltering: true,

    contextMenuItems: ['AutoFit', 'AutoFitAll', 'SortAscending', 'SortDescending',

        'Copy', 'PdfExport', 'ExcelExport', 'CsvExport', 'FirstPage', 'PrevPage',

        'LastPage', 'NextPage'],

    height: 265

});

let p1 = axios.post("GetData", {reportId: reportId})

let p2 = axios.post("GetGridColumns",{reportId: reportId})

Promise.all([p1,p2]).then(([resp1,resp2])=>{

    grid.dataSource = resp1.data

    grid.columns = resp2.data

    grid.appendTo('#Grid');

})

let p3 =  axios.post("GetQueryColumns",{reportId: reportId})

let p4 = axios.post("GetQueryWhere", {reportId: reportId})

Promise.all([p3,p4]).then(([resp3,resp4])=>{

    qryBldrObj.columns = resp3.data;

    qryBldrObj.rule= resp4.data;

    console.log(resp4.data);

    qryBldrObj.appendTo('#querybuilder');

})

let qryBldrObj: QueryBuilder = new QueryBuilder({

    width: '100%',

    displayMode: "Vertical"

});

//Botão Salver consulta

document.getElementById('saveRule').onclick = (): void => {

    console.log("click!")

    let strJsonRule: string = JSON.stringify(qryBldrObj.getValidRules(qryBldrObj.rule))

    let strSqlRule: string = qryBldrObj.getSqlFromRules(qryBldrObj.rule)

    let postData1 = new FilterData

    postData1.reportId = reportId

    postData1.jsonRule = strJsonRule

    postData1.sqlRule = strSqlRule

    console.log(postData1)

    axios.post("SaveReport",postData1).then(()=>{

        axios.post("GetData",{reportId: reportId}).then(resp=>{

           grid.dataSource= resp.data

        })

        

    })

}

[Pavithra Subramaniyam]

Hi Martin, 

 

From your code we suspect that the element with id “saveRule” is not exist which causes the reported issue. So please ensure whether the below element is exist while binding the click event in the below line. 

 

document.getElementById('saveRule').onclick  

 

Regards, 

Pavithra S.