We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Syncfusion Popup with Grid inside it


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;

3 Replies

SP Sureshkumar P Syncfusion Team 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? 
d.     we have prepared video for your reference of the above sample use case, get it from below link 
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. 
Sureshkumar P 

KP Krishna Prasad November 8, 2019 06:38 AM UTC


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.

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team 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, 

<div class=" control-section" id="target"> 
    <ejs-dialog id="alert_dialog" showCloseIcon="true" visible="false" width="750px" target="#target"> 
        <ejs-grid id="Grid" dataSource="ViewBag.DataSource" allowPaging="true"> 
          <e-grid-pagesettings pageSize="8"></e-grid-pagesettings> 
            <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> 

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-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> 
  function commandClick(args) { 
   if (args.commandColumn.buttonOption.id === "historyBtn") { 
      // Display the dialog 

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, 

Let us know if you have any concerns. 

Seeni Sakthi Kumar S 

Live Chat Icon For mobile
Up arrow icon