Grid custom dialog template custom error message

Derick Loo

Asked On April 22, 2019 02:32 PM UTC

I have using a custom dialog template for the Add function. I want to show a custom error message from server side on the custom dialog template, i try using modelstate.adderror() and in the client side I use the @Html.ValidationSummary(true) but it not show.

Below is my code

index.cshtml

@model HomeIndexViewModel

@{

ViewData["Title"] = "Home List";

}

<h3>

Home

</h3>

<ejs-grid id="Grid" allowPaging="true" allowSorting="true" actionComplete="actionComplete" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">

<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template="#dialogTemplate" showDeleteConfirmDialog="true"></e-grid-editSettings>

<e-grid-pagesettings pageSize="5" pageSizes="true"></e-grid-pagesettings>

<e-grid-selectionsettings checkboxMode="ResetOnRowClick" type="Single"></e-grid-selectionsettings>

<e-data-manager adaptor="UrlAdaptor" url="/Home/DataSoruce" insertUrl="/Home/Create" updateUrl="/Home/Update" removeUrl="/Home/Delete"></e-data-manager>

<e-grid-columns>

<e-grid-column field="Id" headerText="Id" textAlign="Left" width="120" isPrimaryKey="true" visible="false"></e-grid-column>

<e-grid-column field="Code" headerText="Code" textAlign="Left" width="120"></e-grid-column>

<e-grid-column field="Description" headerText="Description" textAlign="Left" width="120" validationRules="@(new { required = true})"></e-grid-column>

</e-grid-columns>

</ejs-grid>

function actionComplete(args) {

console.log(args.requestType);

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 === 'add') {

args.dialog.header = 'Add Dialog11111';

var ajax = new ej.base.Ajax({

url: "/Product/CreatePartial", //render the partial view

type: "POST",

contentType: "application/json",

data: JSON.stringify({ value: args.rowData })

});

ajax.send().then(function (data) {

appendElement(data, args.form); //Render the edit form with selected record

args.form.elements.namedItem('Code').focus();

}).catch(function (xhr) {

console.log(xhr);

});

}

function appendElement(elementString, form) {

form.querySelector("#dialogTemp").innerHTML = elementString;

var script = document.createElement('script');

script.type = "text/javascript";

var serverScript = form.querySelector("#dialogTemp").querySelector('script');

script.textContent = serverScript.innerHTML;

document.head.appendChild(script);

serverScript.remove();

}

</script>

</script>

</div>

HomeController

public IActionResult CreatePartial([FromBody] CRUDModel<HomeCreateViewModel> model)

{

return PartialView("CreatePartial");

}

[HttpPost]

public async Task<IActionResult> Create([FromBody]CRUDModel<ProductCreateViewModel> model)

{

if (!ModelState.IsValid)

{

return View(model);

}

var duplicateCode = datasource.Where(r => r.Code == model.Value.Code);

if (duplicateCode.Count() > 0)

{

ModelState.AddModelError(string.Empty, "Duplicate Code!");

return View(model);

}

if (!await productService.CreateAsync(model.Value))

{

return View(model);

}

return RedirectToAction(nameof(Index));

}

CreatePartial.cshtml

@using Syncfusion.EJ2

<div>

@Html.TextBox("Code")

@Html.Label("Code", "Code", new { @class = "e-float-text e-label-top" })

</div>

@Html.TextBox("Description")

@Html.Label("Description", "Description", new { @class = "e-float-text e-label-top" })

</div>

@Html.ValidationSummary(true)

</div>

@Html.EJS().ScriptManager()

What the mistake I make? Please guide me to the correct direction.

Thanks

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On April 24, 2019 09:41 AM UTC

Hi Derick Loo,

Thanks for contacting Syncfusion support.

We could see you are using a HTML TextBox. To apply validation message to the corresponding validation element, you have to give the ValidationSummary within the form as discussed in the following article.

http://www.intstrings.com/ramivemula/articles/dropdownlist-validation-in-asp-net-mvc-3razor/

By default, we have handled the validation for Grid columns using validationRules property. But, in your case, you have applied the external validation(ValidationSummary) on grid column(“CustomerID”) in dialog edit template so we have to pass the validation failure message from the server side to client end using “ActionFailure” event of EJ2 Grid. Please refer the below code example to more information.

[index.cshtml]

<ejs-grid id="Grid" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })" actionComplete="actionComplete" actionFailure="onActionFailure">

<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template='#dialogtemplate'></e-grid-editSettings>

<e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Remove"></e-data-manager>

<e-grid-columns>

<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>

<e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>

<e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>

<e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>

</e-grid-columns>

</ejs-grid>

</div>

</script>

function onActionFailure(args) {

var errorMsg ;

// get the error message when failed the validation

if (args.error) {

errorMsg = args.error[0].error.responseText;

} else {

errorMsg = args[0].error.responseText;

}

// Generate error message is show on dialog edit template

var grid = document.getElementById("Grid").ej2_instances[0];

var validationEle = grid.element.querySelector(".e-edit-dialog .form-row div.e-float-input #CustomerID");

var spanEle = document.createElement("span");

spanEle.textContent = '*'+ errorMsg;

spanEle.style.color = "red";

validationEle.parentElement.appendChild(spanEle);

}

Documentation: https://ej2.syncfusion.com/javascript/documentation/api/grid/#actionfailure

Sample link : http://www.syncfusion.com/downloads/support/forum/144149/ze/EJ2GridDTVrules-2404201939304149.zip

Please get back to us, if you need further assistance.

Regards,

Pavithra S.

Reply | Reply with quote

Derick Loo

Replied On April 24, 2019 02:21 PM UTC

Hi Pavithra,

I follow the sample project but can't get it. I get the error when I inspect the page

Uncaught (in promise) TypeError: Cannot read property 'parentElement' of null

at t.onActionFailure (Product:110)

at e.notify (treemap.ts:2)

at t.e.trigger (treemap.ts:2)

at e.dataManagerFailure (treemap.ts:2)

at treemap.ts:2

my code as below

</script>

function onActionFailure(args) {

var errorMsg;

if (args.error) {

errorMsg = args.error[0].error.responseText;

} else {

errorMsg = args[0].error.responseText;

}

alert(errorMsg);

var grid = document.getElementById("Grid").ej2_instances[0];

var validationEle = grid.element.querySelector(".e-edit-dialog .form-row div.e-float-input #ShipCity");

var validationEle = grid.element.querySelector(".e-edit-dialog #ErrorMessage")

var spanEle = document.createElement("span");

spanEle.textContent = '*' + errorMsg;

spanEle.style.color = "red";

validationEle.parentElement.appendChild(spanEle)

}

function actionComplete(args) {

console.log(args.requestType);

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 === 'add') {

args.dialog.header = 'Create Product';

var ajax = new ej.base.Ajax({

//url: "/Product/CreatePartial", //render the partial view

url: "@Url.Action("CreatePartial", "Product")", //render the partial view

type: "POST",

contentType: "application/json",

data: JSON.stringify({ value: args.rowData })

});

ajax.send().then(function (data) {

appendElement(data, args.form); //Render the edit form with selected record

args.form.elements.namedItem('Code').focus();

ej.popups.hideSpinner(args.dialog.element);

}).catch(function (xhr) {

console.log(xhr);

ej.popups.hideSpinner(args.dialog.element);

});

}

function appendElement(elementString, form) {

form.querySelector("#dialogTemp").innerHTML = elementString;

var script = document.createElement('script');

script.type = "text/javascript";

var serverScript = form.querySelector("#dialogTemp").querySelector('script');

script.textContent = serverScript.innerHTML;

document.head.appendChild(script);

serverScript.remove();

}

</script>

My partial file

@model ProductIndexViewModel

@using Syncfusion.EJ2

<div>

@Html.TextBox("Code")

@Html.Label("Code", "Code", new { @class = "e-float-text e-label-top" })

</div>

@Html.TextBox("Description")

@Html.Label("Description", "Description", new { @class = "e-float-text e-label-top" })

</div>

@Html.ValidationSummary(true)

</div>

<ejs-scripts></ejs-scripts>

Best regards,

Derick

Reply | Reply with quote

Derick Loo

Replied On April 24, 2019 03:12 PM UTC

I try to put an alert in the action failure, it seem like the grid element query selector is null

var validationEle = grid.element.querySelector(".e-edit-dialog .form-row div.e-float-input");

What's the wrong of my code?

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On April 25, 2019 06:50 AM UTC

Hi Derick Loo,

Thanks for your update.

As per your query, we have applied your code in our end but we are unable to reproduce the reported defect and we can get the error message on “ActionFailure” event of EJ2 Grid. since we have shared the video demonstrate your requirement for your references.

Video Demo: http://www.syncfusion.com/downloads/support/directtrac/general/7z/editing314380822

If you are still facing the issue, Could please share the reported issue reproducing video demonstrate and hosted sample link to better assistance.

Regards,

Pavithra S.

Reply | Reply with quote

Derick Loo

Replied On April 25, 2019 01:45 PM UTC

Hi Pavithra ,

May I know any configuration in the startup file? Any MVC services need added?

Thanks,

Derick

Reply | Reply with quote

Derick Loo

Replied On April 25, 2019 02:47 PM UTC

I have attached the video demo of the error.

Attachment: 20190425_51d3eace.rar

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On April 29, 2019 11:54 AM UTC

Hi Derick,

Thanks for your update.

We have created a new incident #234720 under your account, regarding your query. So we suggest you to log in your account and follow the new incident to get more update.

Regards,

Pavithra S.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
144149	Apr 22,2019 02:32 PM UTC	Apr 29,2019 11:54 AM UTC	ASP.NET Core - EJ 2	7

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US