Syncfusion Popup with Grid inside it

Naga Padmasree

Asked On November 6, 2019 10:46 AM UTC

Hi,

I have a button in Grid.Onclick of that button i am opening a syncfusion dialog,and getting data from database through ajax.Now i need to show that data in grid inside dialog.

'</td><td style="width: 2px;"><input type="submit" class="e-control e-progress-btn e-lib e-primary e-btn e-spin-left"; style="background-color:#808080;" id="btnHistory' + i + '" value="History" onclick="TimesheetHistory('+data.Object[i].timesheetid+')"/></td></tr></table>';

Below is the code for function call of History button

function TimesheetHistory(timesheetid) {

// debugger;

var myApp = myApp || {};

myApp.Urls = myApp.Urls || {};

myApp.Urls.baseUrl = '@Url.Content("~")';

var GetTimesheetComments = myApp.Urls.baseUrl + 'ProjectManager/GetTimeSheetComemnts/';

var s = status;

$.post(GetTimesheetComments, { timesheetid: timesheetid }, function (data) {

var dialog = document.getElementById("dialog").ej2_instances[0];

var data = new ej.data.DataUtil.parse.parseJson(data);//parse using DataUtil.parse.parseJson method

dialog.dataSource = data.Object;

dialog.show();

});

}

Reply | Reply with quote

Sureshkumar P [Syncfusion]

Replied On November 7, 2019 10:31 AM UTC

Hi Naga,

Greetings from Syncfusion support.

To proceed further on this query, we need some more details from your end. So can you provide the following details

1. Are you tried to fetch and show a current grid row records inside the dialog component on button click, which placed inside grid? if yes we have sample in our sample browser and confirm whether it meets your requirement?

a. https://ej2.syncfusion.com/aspnetcore/Grid/DialogEditing#/material

b. https://ej2.syncfusion.com/aspnetcore/Grid/DialogTemplate#/material

c. https://ej2.syncfusion.com/aspnetcore/Grid/CommandColumn#/material

d. we have prepared video for your reference of the above sample use case, get it from below link

aa. https://www.syncfusion.com/downloads/support/forum/148846/ze/Grid1897233261

2. The grid inside the placed button click with you show the data to dialog inside placed Grid component?

Note: Also, we let you know, Dialog component doesn’t have data source property and won't process data operation.

Regards,

Sureshkumar P

Reply | Reply with quote

Krishna Prasad

Replied On November 8, 2019 06:38 AM UTC

Hi,

In the Above Image i have history button. On click of History Button a pop up will open in that pop up i will have a grid. In that grid i need to bind data.

A grid inside a dialog.

Reply | Reply with quote

Seeni Sakthi Kumar Seeni Raj [Syncfusion]

Replied On November 11, 2019 01:37 PM UTC

Hi Krishna,

You can achieve your requirement of –“Rendering grid inside a dialog” by defining a grid inside a hidden dialog control and displaying it on button click. This is explained below,

Initially render a grid inside a dialog control and set the visibility of the dialog to false using its visible property,

<ejs-dialog id="alert_dialog" showCloseIcon="true" visible="false" width="750px" target="#target">

<e-content-template>

<ejs-grid id="Grid" dataSource="ViewBag.DataSource" allowPaging="true">

<e-grid-pagesettings pageSize="8"></e-grid-pagesettings>

<e-grid-columns>

<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true, number=true})" width="60"></e-grid-column>

<e-grid-column field="EmployeeID" headerText="Employee ID" validationRules="@(new { required=true})" width="60"></e-grid-column>

<e-grid-column field="ShipCity" headerText="Ship City" width="60"></e-grid-column>

</e-grid-columns>

</ejs-grid>

</e-content-template>

</ejs-dialog>

</div>

After that define a custom command button in the initially displayed grid’s column and in its commandClick event show the dialog by calling its show method. Now the dialog with the grid will be displayed.

@{

List<object> commands = new List<object>();

commands.Add(new { buttonOption = new { content = "History", cssClass = "e-success", id="historyBtn" } });

}

<ejs-grid id="Grid1" dataSource="@ViewBag.DataSource" allowPaging="true" commandClick="commandClick">

<e-grid-pagesettings pageSize="8"></e-grid-pagesettings>

<e-grid-columns>

<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true, number=true})" width="60"></e-grid-column>

<e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" width="60"></e-grid-column>

<e-grid-column field="Freight" headerText="Freight" validationRules="@(new { required=true})" textAlign="Right" editType="numericedit" format="C2" width="60"></e-grid-column>

<e-grid-column field="ShipCountry" headerText="Ship Country" width="60"></e-grid-column>

<e-grid-column headerText="History" width="120" commands="commands"></e-grid-column>

</e-grid-columns>

</ejs-grid>

function commandClick(args) {

if (args.commandColumn.buttonOption.id === "historyBtn") {

// Display the dialog

document.getElementById('alert_dialog').ej2_instances[0].show();

}

</script>

In the above explained method the data source for the grid rendered inside the dialog is bound to it initially just like the other grid. If you wish to update the data source dynamically then you can do it in the dialog’s open event using the grid’s dataSource property.

We have prepared a sample based on this for your reference. You can find it below,

Sample: https://www.syncfusion.com/downloads/support/forum/148846/ze/Grid_inside_dialog-1295085299

Let us know if you have any concerns.

Regards,

Seeni Sakthi Kumar S

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
148846	Nov 6,2019 10:46 AM UTC	Nov 11,2019 01:37 PM UTC	ASP.NET Core - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US