Not able to bind ejs-grid inside ejs-dialog

[Neha Singh]

URGENT!!!!!

Trying to bind ejs-grid inside ejs-dialog but not able to do so.

Regards

Neha

<ejs-dialog #assignAlertTemplateDialog [buttons]='assignAlertTemplateButtons' (close)="confirmDeleteDlgClose()" (open)='showGrid()'

              header="{{ 'alertTemplates.assignTemplateToDevice' | translate }}" [visible]='false' [showCloseIcon]='true' [isModal]='true'

              class="assign-alert-template-dialog">

              <ng-template #content>

                <ejs-grid #grid [ngClass]="dialog-grid" [dataSource]="data" [allowPaging]="true" [allowSorting]="true" [allowResizing]="true" [allowFiltering]="true" [filterSettings]="filterSettings" [pageSettings]="initialPage">

                  <e-columns>

                      <ng-template #detailTemplate let-data>

                          <div [ngClass]="{ 'hide-icon': data.deviceAlertRules.length === 0 }">

                              <ejs-grid #grid [dataSource]="data.deviceAlertRules" [allowPaging]="false" [allowSorting]="true" [allowFiltering]="false" [filterSettings]="filterSettings" [pageSettings]="initialPage">

                                  <e-columns>

                                      <e-column field="alertType" headerText="{{ 'device.grid.alertType' | translate }}" textAlign="Left" width="50">

                                          <ng-template #template let-deviceAlertRules>

                                              <div>

                                                  <img class="info" alt="info" width="8" height="16" src="assets/images/CoMo/{{ deviceAlertRules.alertType.toLowerCase() }}-default-icon.svg" />

                                                  <span> {{ deviceAlertRules.alertType }}</span>

                                              </div>

                                          </ng-template>

                                      </e-column>

                                      <e-column field="severity" headerText="{{ 'device.grid.severity' | translate }}" textAlign="Left" width="50">

                                          <ng-template #template let-deviceAlertRules>

                                              <div>

                                                  <img *ngIf="deviceAlertRules.severity === 'High'" class="info" alt="info" width="2" height="16" src="assets/images/CoMo/severity-high-icon.png" /><span> {{ deviceAlertRules.severity }}</span>

                                              </div>

                                          </ng-template>

                                      </e-column>

                                      <e-column field="threshold" headerText="{{ 'device.grid.threshold' | translate }}" textAlign="Left" width="50"></e-column>

                                  </e-columns>

                              </ejs-grid>

                          </div>

                      </ng-template>

                      <e-column field="deviceId" isPrimaryKey="true" headerText="{{ 'device.grid.deviceId' | translate }}" textAlign="Left" width="50"></e-column>

                      <e-column field="deviceName" headerText="{{ 'device.grid.deviceName' | translate }}" textAlign="Left" width="50"></e-column>

                      <e-column field="facility" isPrimaryKey="true" headerText="{{ 'device.grid.facility' | translate }}" textAlign="Left" width="70"></e-column>

                      <e-column field="area" isPrimaryKey="true" headerText="{{ 'device.grid.area' | translate }}" textAlign="Left" width="40"></e-column>

                      <e-column field="country" isPrimaryKey="true" headerText="{{ 'device.grid.country' | translate }}" textAlign="Left" width="50"></e-column>

                      <e-column field="provider" isPrimaryKey="true" headerText="{{ 'device.grid.provider' | translate }}" textAlign="Left" width="50"></e-column>

                      <e-column field="deviceType" isPrimaryKey="true" headerText="{{ 'device.grid.deviceType' | translate }}" textAlign="Left" width="50"></e-column>

                      <e-column field="gateway" isPrimaryKey="true" headerText="{{ 'device.grid.gateway' | translate }}" textAlign="Left" width="50"></e-column>

                      <e-column field="battery" isPrimaryKey="true" headerText="{{ 'device.grid.battery' | translate }}" textAlign="Left" width="50"></e-column>

              <e-column field="lastCommunicationTimeStamp" isPrimaryKey="true" headerText="{{ 'device.grid.latestTimestamp' | translate }}" textAlign="Left" width="50"></e-column>

              <e-column headerText="{{ 'device.grid.action' | translate }}" width="30" [commands]="commands" textAlign="Left"></e-column>

                  </e-columns>

              </ejs-grid>

          </ng-template>

  </ejs-dialog>

[Neha Singh]

package.json :

"@syncfusion/ej2": "^18.2.46",

        "@syncfusion/ej2-angular-dropdowns": "^18.2.54",

        "@syncfusion/ej2-angular-grids": "^19.2.51",

        "@syncfusion/ej2-angular-layouts": "^18.2.46",

        "@syncfusion/ej2-angular-navigations": "^18.2.46",

        "@syncfusion/ej2-angular-popups": "^18.2.58",

        "@syncfusion/ej2-base": "^18.1.57",

[Neha Singh]

Can we connect on urgent basis for this issue. As this is very very URGENT

[Neha Singh]

@Syncfusion team : Please respond

[Gunasekar Kuppusamy]

Hi Neha, 

  

  

Greetings from Syncfusion support. 

  

  

We have validated your query "Trying to bind ejs-grid inside ejs-dialog but not able to do so." and we were not reproduce the issue from our end with your shared code snippets. 

  

We have also prepared a sample for your reference. In this sample, we have rendered a grid component inside the dialog component. 

  

Code snippets: 

<ejs-dialog #Dialog [buttons]='dlgButtons' [header]='header' [animationSettings]='animationSettings' 

[showCloseIcon]='showCloseIcon' [target]='target' [width]='width' (open)="dialogOpen()" (close)="dialogClose()"> 

<ng-template #content> 

    <ejs-grid [dataSource]='data' height='350'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 

            <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column> 

            <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'></e-column> 

            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column> 

            <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'></e-column> 

            <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column> 

        </e-columns> 

    </ejs-grid> 

</ng-template> 

</ejs-dialog> 

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

If you are still facing the issue, please share the following details,  

·       If possible, modify the above sample to reproduce the 

·       Share the minimum reproducing runnable sample 

·       Video illustration of the issue. 

  

The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest.  

  

Regards, 

Gunasekar