Grid inside a Modal

[MIHIR DASH]

Hi

Could you please help me how to add js grid to ejs modal.

sample code is like the following.

typescript

DataLoadComponent.obj.grid = new Grid(

{

dataSource:data,

columns: [

{ field: 'q1', headerText: 'Order ID', width: 120, textAlign: 'Right' },

{ field: 'q2', headerText: 'Customer Name', width: 150 },

{ field: 'q3', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' }

]

});

DataLoadComponent.obj.grid.appendTo('#ananya');

HTML

<ejs-dialog #Dialog class="import-dataload-viewall" [isModal]='true' [content]='content' [target]='target' [closeOnEscape]=false

*ngIf="openDialogForViewAll == true">

<div class="e-dlg-header-content">

<button class="e-dlg-closeicon-btn e-control e-btn e-flat e-icon-btn" type="button" title="Close" (click)="dataLoadModalClose()">

<span class="e-btn-icon e-icon-dlg-close e-icons"></span>

</button>

<div class="e-dlg-header" id="_title">ALL DATA</div>

<div id="ananya"></div>

</div>

</ejs-dialog>

[Karthik Ravichandran]

Hi Mihir, 

 

Thanks for contacting Syncfusion support. 

 

We have checked your query. You can achieve your requirement by using the ng-template support in dialog component. Please refer the below code block. we have covered the following scenarios in the sample. 

-    Grid has been rendered as a content of EJ2 Modal dialog by checking the condition using *ngIf 

-    While click on ‘Show/Hide Grid’ button, grid will be add/remove from dialog content. 

 

[component.html] 

 

<ejs-dialog #Dialog id ='dialog' [isModal]="isModal" [header]='header' [buttons]='dlgButtons' [showCloseIcon]='false' [width]='width' [target]='targetEle' 

    [animationSettings]='animationSettings'> 

<ng-template #content> 

    <div *ngIf="show"> 

        <ejs-grid #grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings'> 

            <e-columns> 

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

                <e-column field='ProductName' headerText='Name' width='160'></e-column> 

                <e-column field='UnitPrice' headerText='Unit Price' format="C1" width='120' textAlign='Right'></e-column> 

                <e-column field='UnitsInStock' headerText='Units In Stock' width='150' textAlign='Right'></e-column> 

                <e-column field='Discontinued' headerText='Discontinued' width='150' displayAsCheckBox="true"></e-column> 

            </e-columns> 

        </ejs-grid> 

    </div> 

</ng-template> 

</ejs-dialog> 

 

 

[Component.ts] 

 

 

public data: DataManager; 

public pageSettings: Object; 

 

@ViewChild('grid') 

public grid: GridComponent; 

 

ngOnInit(): void { 

    this.data = new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor }); 

    this.pageSettings = { pageCount: 1 }; 

} 

 

@ViewChild('Dialog') 

public Dialog: DialogComponent; 

public header: string = 'EJ2-Dialog'; 

public width: string = '90%'; 

public animationSettings: Object = { effect: 'none' }; 

public isModal = true; 

public dlgButtons: Object[] = [{ click: this.dlgBtnClick.bind(this), buttonModel: { content: 'Show/Hide Grid' } }]; 

 

dlgBtnClick() { 

  if (this.show) { 

  this.show = false; 

  } else { 

    this.show = true; 

  } 

} 

public targetEle: string = '.control-section'; 

public show: boolean = true; 

 

 

For your convenience, we have prepared the sample in the below link. 

https://stackblitz.com/edit/angular-dpzgaz?file=src%2Fapp%2Fapp.component.ts 

 

Note:   The feature ‘ng-template support for dialog’ is available from 16.2.41 release. Please upgrade your package to latest version. 

Kindly have a look at the sample and confirm whether your requirement meet in this sample. Please let us know if you need further assistance on this. 

 

Regards, 

Karthik R