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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

148244 Nov 15,2017 04:03 PM UTC Oct 11,2019 09:12 AM UTC Angular - EJ 2 5
loading
Tags: Grid
Martin Strojek
Asked On November 16, 2017 10:14 AM UTC

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 [Syncfusion]
Replied On 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 

Regards, 
Manisankar Durai. 


Amira
Replied On April 4, 2019 11:32 PM UTC

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

Manivannan Padmanaban [Syncfusion]
Replied On 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.

Regards, 
Manivannan Padmanaban. 




Vicente
Replied On 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.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 respExiosResponse = {
                            data : JSON.parse(this.response),
                            status : Number(this.status),
                            statusText: this.statusText,
                        }
                        resolve(resp);         
                    }else{
                        let respExiosResponse = {
                            status : Number(this.status),
                            statusText: this.statusText,
                            data: ((this.response!=null)?JSON.parse(this.response):null)
                        }
                    
                        reject(resp);
                    }
                };        
            });
            xhr.addEventListener("error"function(){
                let respExiosResponse = {
                    status : Number(this.status),
                    statusText: this.statusText,
                    data:null
                }
            
                reject(resp);                
            });
            try{
                xhr.send(JSON.stringify(data)); 
            }catch(e){
                let respExiosResponse = {
                    status : 0,
                    statusText: "error",
                    data:null
                };
        
                reject(resp);                
            }

        });
        return promise;
    }
}

interface ExiosResponse {
    dataany;
    statusnumber;
    statusTextstring;
 
  }





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

/*Grid
*
*
*/
Grid.Inject(EditToolbarResizeSortGroupEditContextMenuPagePdfExportExcelExport);
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',
        '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.ruleresp4.data;
    console.log(resp4.data);
    qryBldrObj.appendTo('#querybuilder');

})

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

});


//Botão Salver consulta
document.getElementById('saveRule').onclick = (): void => {
    console.log("click!")
    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

    console.log(postData1)
    axios.post("SaveReport",postData1).then(()=>{
        axios.post("GetData",{reportId: reportId}).then(resp=>{
           grid.dataSourceresp.data
        })
        
    })
}







Pavithra Subramaniyam [Syncfusion]
Replied On 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. 
 
document.getElementById('saveRule').onclick  
 
Regards, 
Pavithra S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon