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

ASP.NET Core - Razor Page - Open EJ2 Dialog from custom Command inside grid and pass record/row information

Hello

How can I open an EJ2 (Modal) Dialog when the user clicks on a custom command inside a grid AND pass the selected row information to the Dialog ?

Thanks 1

5 Replies

PS Pavithra Subramaniyam Syncfusion Team April 18, 2019 06:53 AM UTC

Hi moez, 
 
Thanks for contacting Syncfusion support. 
 
Based on your requirement we have prepared a sample in which we have opened the EJ2 dialog component inside the click event of custom command button and shown the row data in the dialog content. Please refer to the below code example and sample link for more information. 
 
[index.cshtml] 
 
@{ 
    List<object> commands = new List<object>(); 
    commands.Add(new { type = "userstatus", buttonOption = new { click="click",content = "Details", cssClass = "e-flat e-details" } }); // custom 
} 
<div id="dialog"></div> 
<ejs-grid id="Grid" allowPaging="true" load="onLoad"> 
    <e-data-manager url="/Index?handler=DataSource" insertUrl="/Index?handler=Insert" updateUrl="/Index?handler=Update" removeUrl="/Index?handler=Delete" adaptor="UrlAdaptor"></e-data-manager> 
    <e-grid-editSettings allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings> 
    <e-grid-columns> 
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 
         .  .  . 
        <e-grid-column headerText="Manage Records" width="120" commands=commands> 
        </e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
<script> 
     
    
    function onLoad() { 
        document.getElementsByClassName('e-grid')[0].addEventListener("click", (args) => { 
            if (args.target.classList.contains("e-details")) { 
                var grid = ej.grids.parentsUntil(args.target, 'e-grid').ej2_instances[0]; 
                var rowObj = grid.getRowObjectFromUID(ej.grids.parentsUntil(args.target, 'e-row').getAttribute('data-uid'));      // getting row data 
                var data = rowObj.data; 
                var dialog = new ej.popups.Dialog({ 
                    showCloseIcon: true, 
                    content: 'OrderID:'+data.OrderID, 
                    header: "Show ID", 
                    target: document.getElementsByClassName("e-grid")[0], 
                    width: '250px' 
                }); 
                // Render initialized Dialog 
                dialog.appendTo('#dialog'); 
                dialog.show(); 
            } 
 
        }) 
 
        this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }]; 
 
    } 
</script> 
 
  
 
 
Regards, 
Pavithra S. 
 



MO moez April 26, 2019 06:13 PM UTC

That worked, Thank you Pavithra !


PS Pavithra Subramaniyam Syncfusion Team April 29, 2019 04:37 AM UTC

Hi moez,  

Thanks for your update. 

We are happy to hear that your problem has been solved. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  
Pavithra S. 



AH Ahmed September 13, 2021 08:56 AM UTC

Hi,

Q1- In asp.net core MVC, How I Can Pass My Partial View to content instead of 'OrderID:'+data.OrderID ?


var data = rowObj.data;
var dialog = new ej.popups.Dialog({
showCloseIcon: true,
content: 'OrderID:'+data.OrderID,
header: "Show ID",
target: document.getElementsByClassName("e-grid")[0],
width: '250px'
});

Q2- How I Can Show partial view in dialog by sending row data to controller when click on command to render partial view as a dialog and submit result to controller again?

Thanks Very Much


RR Rajapandi Ravi Syncfusion Team September 14, 2021 01:08 PM UTC

Hi Ahmed, 
 
Thanks for contacting Syncfusion support. 
 
We have validated your requirement and we already have the option of edit the row value and display in dialog from the partial view. Also, we have updated the changes in your database when submit the form by using ‘dialogTemplate’ feature. Please find the demo and documentation for your reference. 
 

Note : If you want to perform the CRUD option in your server/controller, then we suggest using ‘DataAdaptor’ feature. Please find the documentation for this 


This is not meet your requirement, please explain more details about your requirement and why did you need to display the value in partial view and did you update that values or not? 

Please contact us if you need any further assistance.  
 
Rajapandi R 


Loader.
Live Chat Icon For mobile
Up arrow icon