We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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


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)">


import { Component, ViewEncapsulation } from '@angular/core';
import { PropertiesService } from '../../../services/properties.service';
import { CsmApiService } from '../../../services/csmapi.service';
import { DialogService } from "ng2-bootstrap-modal";
    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: "" } }
    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?

5 Replies

MS Mani Sankar Durai Syncfusion Team November 16, 2017 10:25 AM UTC

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 
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 

Manisankar Durai. 

AM Amira April 4, 2019 11:32 PM UTC

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

MP Manivannan Padmanaban Syncfusion Team April 5, 2019 11:21 AM UTC

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. 

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.

Manivannan Padmanaban. 

VI Vicente October 10, 2019 06:21 PM UTC

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 { GridToolbarResizeSortGroupContextMenuEditPagePdfExportExcelExport } 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(urlstringdata?: any): Promise<ExiosResponse>{
        const promise = new Promise<ExiosResponse>((resolvereject=> {
            let xhr = new XMLHttpRequest();
            xhr.withCredentials = false;
            xhr.addEventListener("readystatechange"function () {
                if (this.readyState === 4) {
                        let respExiosResponse = {
                            data : JSON.parse(this.response),
                            status : Number(this.status),
                            statusText: this.statusText,
                        let respExiosResponse = {
                            status : Number(this.status),
                            statusText: this.statusText,
                            data: ((this.response!=null)?JSON.parse(this.response):null)
                let respExiosResponse = {
                    status : Number(this.status),
                    statusText: this.statusText,
                let respExiosResponse = {
                    status : 0,
                    statusText: "error",

        return promise;

interface ExiosResponse {

var reportIdnumber = 1
let axios = new NtaRequest;
class FilterData {

let toolbarGridClickHandlerEmitType<ClickEventArgs> = (argsClickEventArgs=> {
    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 gridGrid = 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: falseallowAdding: falseallowDeleting: false },
    allowSorting: true,
    allowPaging: true,
    allowPdfExport: true,
    allowExcelExport: true,
    allowGrouping: true,
    allowMultiSorting: true,
    allowFiltering: true,
    contextMenuItems: ['AutoFit''AutoFitAll''SortAscending''SortDescending',
    height: 265

let p1 = axios.post("GetData", {reportId: reportId})
let p2 = axios.post("GetGridColumns",{reportId: reportId})
    grid.dataSource = resp1.data
    grid.columns = resp2.data

let p3 =  axios.post("GetQueryColumns",{reportId: reportId})
let p4 = axios.post("GetQueryWhere", {reportId: reportId})
    qryBldrObj.columns = resp3.data;


let qryBldrObjQueryBuilder = new QueryBuilder({
    width: '100%',
    displayMode: "Vertical"


//Botão Salver consulta
document.getElementById('saveRule').onclick = (): void => {
    let strJsonRulestring = JSON.stringify(qryBldrObj.getValidRules(qryBldrObj.rule))
    let strSqlRulestring = qryBldrObj.getSqlFromRules(qryBldrObj.rule)
    let postData1 = new FilterData

    postData1.reportId = reportId
    postData1.jsonRule = strJsonRule
    postData1.sqlRule = strSqlRule

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

PS Pavithra Subramaniyam Syncfusion Team October 11, 2019 09:12 AM UTC

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. 
Pavithra S. 

Live Chat Icon For mobile
Up arrow icon