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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Syncfusion Popup with Grid inside it

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
loading
Tags: DataGrid
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();
            
            });
       
    }

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? 
 
 
 
 
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. 
 
Regards, 
Sureshkumar P 


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.

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, 

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

 
Let us know if you have any concerns. 

Regards,  
Seeni Sakthi Kumar S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon