Dialogues for editing / inserting data

Good evening, I needed to perform data insertion into a grid using the popup dialog function, while editing I have redirected it to another razor Page.
My question if there is any more streamlined way.
My current solution is to intercept using the Ajax function pressing the edit button, invalidate allow editing and redirect to the required driver.

function toolbarClick(args) {

            var gridObj = document.getElementById("Grid").ej2_instances[0];
            var selectedRow = gridObj.getSelectedRecords();

            if(selectedRow.length>0)
                ej2Grid_toolbarClick(args, "Grid", "Controller", "Edit", "id=" + selectedRow[0].Id);
        }

function ej2Grid_toolbarClick(args, nameGrid,controller,method,params) {
    var gridObj = document.getElementById(nameGrid).ej2_instances[0];

        if (args.item.id === "Grid_edit") {

            gridObj.editSettings.allowEditing = false;
            $(location).attr('rel='nofollow' href', '/' + controller + '/' + method + "?" + params);

            
    }

7 Replies

RR Rajapandi Ravi Syncfusion Team April 22, 2020 03:32 AM UTC

Hi diego, 

From validating your query, we understand you want to use dialogTemplate with razor page. So based on your query we have prepared a sample of dialogTemplate with razor page. Please refer the below code example, sample and documentation for more information.  
 
[Index.cshtml.cs] 
 
        public ActionResult OnPostEditPartial([FromBody]CRUDAction<DialogTemplateModel> value) 
        { 
            return new PartialViewResult 
            { 
                ViewName = "_EditPartial", 
                ViewData = new ViewDataDictionary<DialogTemplateModel>(ViewData, value.value) 
            }; 
        } 
 
        public ActionResult OnPostAddPartial() 
        { 
            return new PartialViewResult 
            { 
                ViewName = "_AddPartial" 
            }; 
        } 
 
 
<ejs-grid id="Grid" load="onLoad" actionComplete="actionComplete" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})"> 
    <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template='#dialogtemplate'></e-grid-editsettings> 
</ejs-grid> 
 
<script id='dialogtemplate' type="text/x-template"> 
    <div id="dialogTemp"> 
    </div> 
</script> 
 
function actionComplete(args) { 
        if (args.requestType === 'beginEdit' || args.requestType === 'add') { 
            let spinner = ej.popups.createSpinner({ target: args.dialog.element }); 
            ej.popups.showSpinner(args.dialog.element); 
            if (args.requestType === 'beginEdit') { 
 
                var ajax = new ej.base.Ajax({ 
                    type: "POST", 
                    url: "/Index?handler=EditPartial", 
                    beforeSend: function (xhr) { 
                        ajax.httpRequest.setRequestHeader("XSRF-TOKEN", 
                            $('input:hidden[name="__RequestVerificationToken"]').val()); 
                    }, 
                    contentType: "application/json", 
                    dataType: 'json', 
                    data: JSON.stringify({ value: args.rowData }) 
                }); 
                ajax.send().then(function (data) { 
                    appendElement(data, args.form); 
                    args.form.elements.namedItem('CustomerID').focus(); 
                    ej.popups.hideSpinner(args.dialog.element); 
                }).catch(function (xhr) { 
                    console.log(xhr); 
                    ej.popups.hideSpinner(args.dialog.element); 
                }); 
            } 
 
            if (args.requestType === 'add') { 
                var ajax = new ej.base.Ajax({ 
                    type: "POST", 
                    url: "/Index?handler=AddPartial", 
                    beforeSend: function (xhr) { 
                        ajax.httpRequest.setRequestHeader("XSRF-TOKEN", 
                            $('input:hidden[name="__RequestVerificationToken"]').val()); 
                    }, 
                    contentType: "application/json", 
                    dataType: 'json' 
                }); 
                ajax.send().then(function (data) { 
                    $("#dialogTemp").html(data); 
                    args.form.elements.namedItem('OrderID').focus(); 
                    ej.popups.hideSpinner(args.dialog.element); 
                }).catch(function (xhr) { 
                    console.log(xhr); 
                    ej.popups.hideSpinner(args.dialog.element); 
                }); 
            } 
        } 
    } 



And from validating your query, we have seen your provided code example we are not getting your exact requirement and what you are trying to achieve. So before start providing the better solution please share the below details that will be helpful for us to provide better solution. 

1)    Please share your exact requirement scenario and explain what are you going to achieve. 

2)      If you are facing any issue, please share the screenshot and if possible please reproduce the issue with our above attached sample. 

Regards, 
Rajapandi R 



DI diego replied to Rajapandi Ravi April 22, 2020 07:19 AM UTC

Hi diego, 

From validating your query, we understand you want to use dialogTemplate with razor page. So based on your query we have prepared a sample of dialogTemplate with razor page. Please refer the below code example, sample and documentation for more information.  
 
[Index.cshtml.cs] 
 
        public ActionResult OnPostEditPartial([FromBody]CRUDAction<DialogTemplateModel> value) 
        { 
            return new PartialViewResult 
            { 
                ViewName = "_EditPartial", 
                ViewData = new ViewDataDictionary<DialogTemplateModel>(ViewData, value.value) 
            }; 
        } 
 
        public ActionResult OnPostAddPartial() 
        { 
            return new PartialViewResult 
            { 
                ViewName = "_AddPartial" 
            }; 
        } 
 
 
<ejs-grid id="Grid" load="onLoad" actionComplete="actionComplete" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})"> 
    <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template='#dialogtemplate'></e-grid-editsettings> 
</ejs-grid> 
 
<script id='dialogtemplate' type="text/x-template"> 
    <div id="dialogTemp"> 
    </div> 
</script> 
 
function actionComplete(args) { 
        if (args.requestType === 'beginEdit' || args.requestType === 'add') { 
            let spinner = ej.popups.createSpinner({ target: args.dialog.element }); 
            ej.popups.showSpinner(args.dialog.element); 
            if (args.requestType === 'beginEdit') { 
 
                var ajax = new ej.base.Ajax({ 
                    type: "POST", 
                    url: "/Index?handler=EditPartial", 
                    beforeSend: function (xhr) { 
                        ajax.httpRequest.setRequestHeader("XSRF-TOKEN", 
                            $('input:hidden[name="__RequestVerificationToken"]').val()); 
                    }, 
                    contentType: "application/json", 
                    dataType: 'json', 
                    data: JSON.stringify({ value: args.rowData }) 
                }); 
                ajax.send().then(function (data) { 
                    appendElement(data, args.form); 
                    args.form.elements.namedItem('CustomerID').focus(); 
                    ej.popups.hideSpinner(args.dialog.element); 
                }).catch(function (xhr) { 
                    console.log(xhr); 
                    ej.popups.hideSpinner(args.dialog.element); 
                }); 
            } 
 
            if (args.requestType === 'add') { 
                var ajax = new ej.base.Ajax({ 
                    type: "POST", 
                    url: "/Index?handler=AddPartial", 
                    beforeSend: function (xhr) { 
                        ajax.httpRequest.setRequestHeader("XSRF-TOKEN", 
                            $('input:hidden[name="__RequestVerificationToken"]').val()); 
                    }, 
                    contentType: "application/json", 
                    dataType: 'json' 
                }); 
                ajax.send().then(function (data) { 
                    $("#dialogTemp").html(data); 
                    args.form.elements.namedItem('OrderID').focus(); 
                    ej.popups.hideSpinner(args.dialog.element); 
                }).catch(function (xhr) { 
                    console.log(xhr); 
                    ej.popups.hideSpinner(args.dialog.element); 
                }); 
            } 
        } 
    } 



And from validating your query, we have seen your provided code example we are not getting your exact requirement and what you are trying to achieve. So before start providing the better solution please share the below details that will be helpful for us to provide better solution. 

1)    Please share your exact requirement scenario and explain what are you going to achieve. 

2)      If you are facing any issue, please share the screenshot and if possible please reproduce the issue with our above attached sample. 

Regards, 
Rajapandi R 


Hi Rajapandi, I have explained myself wrong sorry.
I need to implement a dialog template when inserting but when editing I need to redirect it to another view


MF Mohammed Farook J Syncfusion Team April 23, 2020 08:23 AM UTC

Hi diego, 
 
In the last provided sample , we have used the different views while Inserting and  Editing in dialogTemplate. Please find the code example. 
 
function actionComplete(args) {  
        if (args.requestType === 'beginEdit' || args.requestType === 'add') {  
            let spinner = ej.popups.createSpinner({ target: args.dialog.element });  
            ej.popups.showSpinner(args.dialog.element);  
            if (args.requestType === 'beginEdit') {  
  
                var ajax = new ej.base.Ajax({  
                    type: "POST",  
                    url: "/Index?handler=EditPartial",  
                    beforeSend: function (xhr) {  
                        ajax.httpRequest.setRequestHeader("XSRF-TOKEN",  
                            $('input:hidden[name="__RequestVerificationToken"]').val());  
                    },  
                    contentType: "application/json",  
                    dataType: 'json',  
                    data: JSON.stringify({ value: args.rowData })  
                });  
                ajax.send().then(function (data) {  
                    appendElement(data, args.form);  
                    args.form.elements.namedItem('CustomerID').focus();  
                    ej.popups.hideSpinner(args.dialog.element);  
                }).catch(function (xhr) {  
                    console.log(xhr);  
                    ej.popups.hideSpinner(args.dialog.element);  
                });  
            }  
  
            if (args.requestType === 'add') {  
                var ajax = new ej.base.Ajax({  
                    type: "POST",  
                    url: "/Index?handler=AddPartial",  
                    beforeSend: function (xhr) {  
                        ajax.httpRequest.setRequestHeader("XSRF-TOKEN",  
                            $('input:hidden[name="__RequestVerificationToken"]').val());  
                    },  
                    contentType: "application/json",  
                    dataType: 'json'  
                });  
 
 
 
This is not meet your requirement . Could you please explained more details about your requirement. 
 
Regards, 
J Mohammed Farook   



DI diego April 23, 2020 08:54 AM UTC

Good morning, what I previously explained is redirecting the edit button from the toolbar to another window, not rendererizing another view in a dialog, I asked if the way I do it, if there is another more efficient way. Sorry for not understanding us


SK Sujith Kumar Rajkumar Syncfusion Team April 24, 2020 11:53 AM UTC

Hi Diego, 

Sorry for misunderstanding your query. 

You can redirect to another razor page using the approach you mentioned with the location object which would be simple and direct. An alternate approach would be to use the Ajax function to call the required action controller’s method and assign the returned URL to the location object’s hyperlink reference. But this would be like complicating a simple operation so our suggestion would be to use your approach itself. 


Let us know if you have any concerns. 

Regards, 
Sujith R 



DI diego April 27, 2020 06:56 AM UTC

Ok, thanks for the support, I wanted to know if there was another more optimal way to solve it, thanks for the clarification.
Thanks


RR Rajapandi Ravi Syncfusion Team April 28, 2020 09:45 AM UTC

Hi Diego, 

We are happy to hear that our suggested solution was helps to clarified from your end. 

Please get back to us if you need further assistance. 


Regards, 
Rajapandi R 


Loader.
Up arrow icon