Grid data is not populated in ej-dialog

[Prangya Tiwari]

Hi,

i have to show ej-grid data inside ej-dialog.but data is not populated.Could you please take the look on the following code.Could you please give example on it.

app.component.html

<ej-dialog id='dialog' #ejDialog isModal='true' (overlayClick)="onOverlayClick()" [target]='targetElement' width='250px'>

<ej-grid [dataSource]='data' [allowPaging]="true" [pageSettings]='pageSettings'>

<e-columns>

<e-column field='OrderID' headerText='Order ID' textAlign='right' width=90>e-column>

<e-column field='CustomerID' headerText='Customer ID' width=120>e-column>

e-columns>

ej-grid>

ej-dialog>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { GridModule } from '@syncfusion/ej2-ng-grids';

import { DialogComponent } from '@syncfusion/ej2-ng-popups';

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent,

DialogComponent

],

imports: [

BrowserModule,

GridModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

app.component.ts

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

import { data } from './datasource';

import { DialogComponent } from '@syncfusion/ej2-ng-popups';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

@ViewChild('ejDialog') ejDialog: DialogComponent;

public data: Object[];

public targetElement: HTMLElement = document.getElementById('dialog-container');

ngOnInit(): void {

this.data = data;

}

onOpenDialog(event) {

// Call the show method to open the Dialog

this.ejDialog.show();

}

// Sample level code to hide the Dialog when click the Dialog overlay

onOverlayClick() {

this.ejDialog.hide();

}

}

datasource.ts

export let data: Object[] = [

{

OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),

},

{

OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),

}

];

here,above data is static.please let me how to to populate grid data(remote) inside ej-dialog control.please  provide example.

[Narayanasamy Panneer Selvam]

  

Hi Prangya Tiwari, 

 

Thanks for Contacting Syncfusion support. 

 

we have validated and confirmed the reported issue (“data is not populated” inside dialog component) as bug.  This issue has been fixed internally and the fix will be included in the upcoming release Vol1, 2018 which will be rolled out by mid of February. We will let you know once release has been rolled out. 

 

 

Regards, 

Narayanasamy P. 

[Prangya Tiwari]

Hello,

Thanks for the update and quick response.could you provide the date when upcoming release will be rolled out.

[Reza Septiandra]

  

Hi Prangya Tiwari, 

 

Thanks for Contacting Syncfusion support. 

 

we have validated and confirmed the reported issue (“data is not populated” inside dialog component) as bug.  This issue has been fixed internally and the fix will be included in the upcoming release Vol1, 2018 which will be rolled out by mid of February. We will let you know once release has been rolled out. 

 

 

Regards, 

Narayanasamy P. 

thanks for fast response. Please give us notification when it released

[Karthikeyan Viswanathan]

Hi Prangya Tiwari,   

  

Our Essential Studio 2018 Volume 1 Release v16.1.0.24 and is available for download under the following link.   

https://www.syncfusion.com/forums/136049/essential-studio-2018-volume-1-release-v16-1-0-24-is-available-for-download    

   

Also, You can try with our latest Essential Studio 2018 Volume 2 service pack Release v16.2.0.46 link:  https://www.syncfusion.com/forums/138986/essential-studio-2018-volume-2-service-pack-release-v16-2-0-46-available-for-download   

   

Regards,   

Karthikeyan V. 

[Unknown]

Hello

I am using ASP.NET CORE EJ 2 version 16.2.0.50 (nuget package).

Has this issue really been fixed?

As far as I can tell, it still persists.

I have a grid that I load with ajax (from an asp.net core page).

When I add the ajax data to a normal div, the grid is displayed as expected.

When I add the ajax data to a dialog, the grid is not displayed.

Kind regards

Phil

[Seeni Sakthi Kumar Seeni Raj]

Hi Phil,  

Before proceeding further on this, please share the following details.  

1. Confirm the product EJ1 or EJ2 Grid
2. Provide the complete code example of the Grid and its view pages

Regards,  

Seeni Sakthi Kumar S. 

[Unknown]

Thank you for your reply.

1. I am using ASP.NET CORE EJ 2 version 16.2.0.50 (nuget package).

2. This is currently not possible. It would take too much time to strip the grid of all the sensitive data and post a simple code page.

     Basically, I load a View Component with ajax and add the ajax response as the content of the dialog.

     It works perfectly fine, if I add the ajax response as html to a normal div.

[Hariharan J V]

Hi Phil, 

Thanks for your update. 

We have validated the reported problem with our end and its working fine in our sample. In the below sample, we have rendered grid component inside the dialog component and bind the data through AJAX call. Please find the below sample for more information. 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/grid-inside-dialog-core-1483036881  

If we misunderstood your query then provide more information regarding this it will be helpful for us to provide a better solution as soon as possible. 

Regards, 

Hariharan 

[Unknown]

Thank you for the reply.

I was able to solve my problem!

In the example you sent I noticed, that you defined a <div> in the content of the dialog. The response from the ajax request was then added to this div and not directly to the dialog.

I added the ajax response directly to the dialog's content, without the div, which does not seem to work.

I changed my code (added a div in the dialog's content and add the ajax response there) and then the grid was rendered in the dialog as it should.

My Issue has been solved.

Thank you for your help.

[Madhu Sudhanan P]

Hi Phil, 

Thanks for the update. We are glad that your requirement has been achieved. Please get back to us if you need further assistance. 

Regards, 

Madhu Sudhanan P