Error when applying filter to a grid inside another grid edit dialog

[RAKOTONINDRINA MAMY]

Hello,

I have a grid control inside another grid control edit dialog.

If I set the property "allowFiltering" to "true", then I get the error "Cannot read property 'querySelector' of null".

Any idea to fix it?

Here is my code :

<ejs-grid [dataSource]='data' 

[editSettings]='editSettings' 

[toolbar]='toolbar' 

[allowSorting]='true'

[allowFiltering]='true'

[filterSettings]='filterOptions'

(actionBegin)='actionBegin($event)'

height='100%'>

    <e-columns>

        <e-column field='CountyId' headerText='County ID' isPrimaryKey='true' width=100></e-column>

        <e-column field='Name' headerText='County Name' width=120></e-column>

        <e-column field='Area' headerText='Area (Millions Km²)' editType= 'numericedit' width=120></e-column>

        <e-column field='Population' headerText='Population (Millions)' editType= 'numericedit' width=150></e-column>

    </e-columns>

<ng-template #editSettingsTemplate let-data style="height: 700px;">

<div>

<div [formGroup]="reactiveForm"> 

<div class="form-content"> 

  <div class="form-row"> 

<div class="e-edit-form-column form-group col-md-6"> 

<label>CountyId <span>*</span></label><br/>

<input type="text" class="form-control" id="CountyId" placeholder="CountyId" formControlName="CountyId">

    

</div> 

<div class="e-edit-form-column form-group col-md-6"> 

<label>Name <span>*</span></label> <br/>

<input placeholder="Name" class="form-control" id="Name" formControlName="Name"> 

</div> 

  </div> 

  <div class="form-row"> 

<div class="e-edit-form-column form-group col-md-6"> 

<label>Area (Millions Km²)<span>*</span></label> <br/>

<input placeholder="Area" class="form-control" id="Area" formControlName="Area"> 

</div> 

<div class="e-edit-form-column form-group col-md-6"> 

<label>Population (Millions)<span>*</span></label> <br/>

<input placeholder="Population" class="form-control" id="Population" formControlName="Population"> 

</div> 

  </div> 

</div> 

</div> 

Cities :

<ejs-grid [dataSource]="cityData"

                      [editSettings]="editSettings"

                      [toolbar]="toolbar"

                      [allowSorting]='true'

                      [allowFiltering]='true'

      [filterSettings]='filterOptions'

      width="500px"

                      height='130px'>

              <e-columns>

<e-column field='CityId' headerText='City Id' isPrimaryKey='true' width=100></e-column>

<e-column field='CityName' headerText='City Name' width=120></e-column>

<e-column field='Density' headerText='Density' editType= 'numericedit' width=120></e-column>

  </e-columns>

            </ejs-grid>

</div>

</ng-template>

</ejs-grid>

Thanks in advance,

Mamy

[Rajapandi Ravi]

Hi RAKOTONINDRINA, 

Greetings from syncfusion support 

We have analyzed your query and we could see that inside Grid you are rendering another Grid control in edit dialog and facing the script error when the allowFiltering is set to true. Based on your shared code example we have prepared a sample which was same as your application scenario and try to reproduce your reported problem, but it was unsuccessful. Please refer the below sample for more information. 

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

If you still face the issue, please share the below details that will be helpful for us to provide better solution. 

1)     Share the Syncfusion package version. 

2)     Share the complete Grid rendering code 

3)     Share the issue replication procedure step by step. 

4)     Please share the issue scenario in video demonstration format. 

5)    Please share any issue reproducible sample or try to reproduce the issue with our above attached sample. 

Regards,
Rajapandi R