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

[moez]

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

[Pavithra Subramaniyam]

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> 

 

  

Documentation: https://ej2.syncfusion.com/javascript/documentation/dialog/es5-getting-started/ 

 

Sample               : http://www.syncfusion.com/downloads/support/directtrac/general/ze/custom-command-179943711 

 

Regards, 

Pavithra S. 

 

[moez]

That worked, Thank you Pavithra !

[Pavithra Subramaniyam]

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. 

[Ahmed]

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

[Rajapandi Ravi]

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. 

 

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

UG: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#dialoginline-template 

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 

https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#persisting-data-in-server  

https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/#remote-data 

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.  

 

Regards, 

Rajapandi R