Category / Section
How to show the serverside validation message for column Validation?
1 min read
This knowledge base explains the way to show the validation message for the specific columns from the server-end after failing the save action in the remote binding.
Render the Grid with the ActionFailure event.
HTML
<div id="Grid"></div>
JS
$(function () {
$("#Grid").ejGrid({
dataSource: new ej.DataManager({
url: "/Home/DataSource",
insertUrl: "/Home/Insert",
updateUrl: "/Home/Update",
removeUrl: "/Home/Remove",
adaptor: new ej.UrlAdaptor()
}),
allowPaging: true,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
toolbarSettings: {
showToolbar: true,
toolbarItems: ["add", "edit", "delete", "update", "cancel"]
},
actionFailure: "onFailure",
columns: [
{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID" },
{ field: "CustomerID", headerText: 'Customer ID' },
{ field: "EmployeeID", headerText: 'Employee ID' },
{ field: "Freight", headerText: 'Freight', format: "{0:C}" },
{ field: "ShipName", headerText: 'Ship Name' }
]
});
});
RAZOR:
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource(ds => {
ds.URL("/Home/DataSource");
ds.UpdateURL("/Home/Update");
ds.InsertURL("/Home/Insert");
ds.RemoveURL("/Home/Remove");
ds.Adaptor(AdaptorType.UrlAdaptor);
})
.AllowPaging()
.EditSettings(edit => edit.AllowAdding().AllowDeleting().AllowEditing())
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
items.AddTool(ToolBarItems.Edit);
items.AddTool(ToolBarItems.Delete);
items.AddTool(ToolBarItems.Update);
items.AddTool(ToolBarItems.Cancel);
});
})
.ClientSideEvents(eve => { eve.ActionFailure("onFailure"); })
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add();
col.Field("CustomerID").HeaderText("Customer ID").Add();
col.Field("EmployeeID").HeaderText("Employee ID").Add();
col.Field("Freight").HeaderText("Freight").Format("{0:C}").Add();
col.Field("ShipName").HeaderText("Ship Name").Add();
})
)
Handle the Insert and Update Action Handlers with the ModelState validators and return the List of Objects with the field name and error details.
C#
public class HomeController : Controller
{
public ActionResult Index()
{
var data = OrderRepository.GetAllRecords();
ViewBag.datasource = data;
return View();
}
public ActionResult DataSource(DataManager dm)
{
DataOperations dp = new DataOperations();
List<EditableOrder> data = (List<EditableOrder>)OrderRepository.GetAllRecords();
int count = data.Count();
data = data.Skip(dm.Skip).Take(dm.Take).ToList();
return Json(new { result = data, count = count }, JsonRequestBehavior.AllowGet);
}
public ActionResult Update(EditableOrder value)
{
if (ModelState.IsValid)
OrderRepository.Update(value);
else if (!ModelState.IsValid)
{
List<object> err = new List<object>();
var listv = ModelState.Values.ToList();
var listm = ModelState.Keys.ToList();
for (var v = 0; v < listv.Count; v++)
{
if (listv[v].Errors.Count > 0)
err.Add(new
{
field = listm[v].ToString().Split(new[] { "value." }, StringSplitOptions.None)[1],
message = listv[v].Errors[0].ErrorMessage
});
}
string errMsg = JsonConvert.SerializeObject(err);
return new HttpStatusCodeResult(HttpStatusCode.BadRequest, errMsg);
}
return Json(value, JsonRequestBehavior.AllowGet);
}
public ActionResult Insert(EditableOrder value)
{
if (ModelState.IsValid)
OrderRepository.Add(value);
else if (!ModelState.IsValid)
{
List<object> err = new List<object>();
var listv = ModelState.Values.ToList();
var listm = ModelState.Keys.ToList();
for (var v = 0; v < listv.Count; v++)
{
if (listv[v].Errors.Count > 0)
err.Add(new
{
field = listm[v].ToString().Split(new[] { "value." }, StringSplitOptions.None)[1],
message = listv[v].Errors[0].ErrorMessage
});
}
string errMsg = JsonConvert.SerializeObject(err);
return new HttpStatusCodeResult(HttpStatusCode.BadRequest, errMsg);
}
return Json(value, JsonRequestBehavior.AllowGet);
}
public void Remove(int key)
{
OrderRepository.Delete(key);
}
}
Define the ActionFailure event, process the retrieved objects and loop them to assign those validation messages to the form elements.
var validate;
function onFailure(args) {
var str = "";
str = args.error.statusText;
var errorLst = ej.parseJSON(args.error.statusText);
if (args.requestType == "save") {
for (i = 0; i < errorLst.length; i++) {
var field = errorLst[i].field;
this.setValidationToField(field, { customRegex: errorLst[i].message });
$("#" + this.element.attr("id") + field).focusout();
$("#" + this.element.attr("id") + field).parent().find(".e-error .e-field-validation-error").text(errorLst[i].message);
$("#" + this.element.attr("id") + field).rules("remove");
}
};
}
$.validator.addMethod("customRegex", function (value, element, params) {
return false;
}, validate);
Figure: Grid with custom validation from the server-end
