- Home
- Forum
- ASP.NET Core - EJ 2
- Dialogues for editing / inserting data
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.
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);
}
SIGN IN To post a reply.
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
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.
Reference links: https://stackoverflow.com/a/8148657
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
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
SIGN IN To post a reply.
- 7 Replies
- 4 Participants
-
DI diego
- Apr 20, 2020 09:17 PM UTC
- Apr 28, 2020 09:45 AM UTC