ERROR TypeError: Cannot read property 'querySelectorAll' of null

[Yogesh Patil]

When I am trying to add row below with the help of TreeGrid component. Then it will through error and hangs everything. I am using Angular 8. 

ERROR TypeError: Cannot read property 'querySelectorAll' of null

    at Edit.getCurrentEditedData (ej2-grids.es2015.js:30645)

    at InlineEdit.endEdit (ej2-grids.es2015.js:28428)

    at InlineEdit.endEdit (ej2-grids.es2015.js:28861)

    at Edit.endEditing (ej2-grids.es2015.js:30431)

    at Edit.endEdit (ej2-grids.es2015.js:30360)

    at InlineEdit.clickHandler (ej2-grids.es2015.js:28245)

    at Observer.notify (ej2-base.es2015.js:2132)

    at Grid.notify (ej2-base.es2015.js:6921)

    at Grid.mouseClickHandler (ej2-grids.es2015.js:14068)

    at ZoneDelegate.invokeTask (zone-evergreen.js:391)

[Pon Selva Jeganathan]

Hi Yogesh, 

Greetings from Syncfusion Support. 

 

Query#:- ERROR TypeError: Cannot read property 'querySelectorAll' of null 

 

We have checked your reported problem by preparing sample but we are unable to reproduce the issue at our end. For your convenience we have created the sample, refer to the below link.  

https://stackblitz.com/edit/angular-wp8u1y-d4dyj3 

 

From the shared stacked trace, we could see that the reported issue may occur whether the edit form is undefined or null. So, please share the following details. 

1. Complete Tree grid code example.
2. If possible, reproduce the reported issue in the shared sample Or share the issue reproducible sample.
3. Video demonstrating on the issue.

 

The provided information will be helpful to provide you response as early as possible. 

Regards, 

Pon selva  

 

[Yogesh Patil]

Hello Pon,

Thanks for reply.

I will check with given example. I have seen it on stackblitz it looks perfect. Now I will implement it in my application and get back to you.

I have one more query: can we restrict levels in TreeGrid? Means, I have to expand tree till only 5 levels

Thanks,

Yogesh Patil

[Yogesh Patil]

Hii,

I have try with this example, but nothing is display on screen. Also no any error message thrown.

Looking forward for reply.

Thanks,

[Yogesh Patil]

Hello,

This example is working fine. Thanks for support.

Now I have to give restriction on levels of Tree upto 5 levels. What method can I use.

[Gowri Loganathan]

  

Hi Yogesh, 

 

Thanks for contacting Syncfusion Forum. 

 

Query: The given example(addrecord below) is working fine. Thanks for support. 

 

We are happy to hear that your issue has been resolved. 

 

Query: How to restrict the level of the tree using methods 

 

We have achieved your requirement using expanding event of TreeGrid by setting its args.cancel as “true”. 

 

We have prepared a sample based on your requirement kindly refer below link, 

https://stackblitz.com/edit/angular-8qcbjj-9c8ksc 

 

Output 

 

 

API links 

https://ej2.syncfusion.com/angular/documentation/api/treegrid/#enablecollapseall 

https://ej2.syncfusion.com/angular/documentation/api/treegrid/#expanding 

 

Please get back to us if you need more assistance. 

 

Regards, 

Gowri V L  

 

[Yogesh Patil]

Hello Sir,

I have seen the example it's fine. But my requirement is not for expanding. I want while adding to be restricted by 5 th level.

Thanks

[Gowri Loganathan]

Hi Yogesh, 

 

Thanks for the update. 

 

Query:  I want while adding to be restricted by 5 th level. 

 

We have achieved your requirement using actionBegin event and set args.cancel as “true” while adding 5^th level record in TreeGrid. 

 

Code 

<ejs-treegrid #treegrid [dataSource]='data' height='400' childMapping='subtasks' [treeColumnIndex]='1' [editSettings]='editSettings' [toolbar]='toolbar' (actionBegin)='begin($event)'> 

    <e-columns> 

       ........... 

    </e-columns> 

</ejs-treegrid> 

………….. 

import { Component, OnInit, ViewChild } from '@angular/core'; 

import { sampleData } from './jsontreegriddata'; 

import { ChangeEventArgs } from '@syncfusion/ej2-dropdowns'; 

import { TreeGridComponent, EditService, ToolbarService, PageService } from '@syncfusion/ej2-angular-treegrid'; 

 

@Component({ 

    selector: 'app-root', 

    templateUrl: 'app.component.html', 

    providers: [EditService, ToolbarService, PageService] 

}) 

export class AppComponent { 

   

    @ViewChild('treegrid') 

    public treegrid: TreeGridComponent; 

 

    ngOnInit(): void { 

        ............ 

    } 

     

  begin(args: any) { 

         if (args.requestType == "add" && this.treegrid.getSelectedRecords()[0].level >= 4) {  //check the records level here 

            alert("5th level record cannot be added"); 

            args.cancel = true;  //restrict adding here 

        } 

    } 

} 

 

Output 

 

 

Sample: https://stackblitz.com/edit/angular-mnnehp-gs4yfm 

 

If the above solution does not satisfy your requirement, please get back to us with the detailed explanation. 

 

Regards, 

Gowri V L 

[Yogesh Patil]

Hello,

Thanks for reply.

Given solution is perfect as per my requirement. But it's throwing an error as: error TS2339: Property 'level' does not exist on ty

pe 'Object'.

Is there anything, I have to import in current example.

Expecting quick reply.

Thanks,

Yogesh H. Patil

[Gowri Loganathan]

  

Hi Yogesh, 

 

Thanks for the update. 

 

Query: Property 'level' does not exist on type 'Object'. 

 

We are able to reproduce the reported issue in angular local sample which is due to the type issue and we suggest you to declare the level as shown below to avoid the reported issue. 

 

Code 

…………….. 

actionBegin(args: AddEventArgs) : void { 

 

   let level: string = 'level'; //declare level here 

  var selectedRecords = this.treegrid.getSelectedRecords()[0]; 

        if (args.requestType === 'add'&& selectedRecords && selectedRecords[level] >= 4){ 

                    args.cancel = true; 

                    alert("5th level record cannot be added") 

                   } 

}     

 

 

We have prepared a local sample and please download it from the following link, 

https://www.syncfusion.com/downloads/support/forum/156481/ze/AngularSample92029804 

 

Kindly revert us if you need further assistance. 

 

Regards, 

Gowri V L