Syncfusion Popup with Grid inside it

[Naga Padmasree]

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();

            

            });

       

    }

[Sureshkumar P]

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 

[Krishna Prasad]

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.

[Seeni Sakthi Kumar Seeni Raj]

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"> 

      <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> 

 

<script> 

  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