|
<div>
<ejs-grid id="Grid" toolbarClick="toolbarClick" dataSource="@ViewBag.datasource" load="load" toolbar="@(new List<string>() { "Add","Delete","Update", "Cancel" })" allowPaging="true">
<e-grid-editSettings allowDeleting="true" allowEditing="true" allowAdding="true"></e-grid-editSettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="EmployeeID" headerText="ID" width="170"></e-grid-column>
…….
</e-grid-columns>
</ejs-grid>
</div>
<script>
var value;
var validationflag = false;
var updatebuttonflag = false;
var saveflag= false
var rfinal = false;
function load() {
this.columns[1].validationRules = { required: true, minLength: [customFn, 'Checking....'] };
}
function toolbarClick(args) {
if (args.item.text == "Update") {
updatebuttonflag = true //enable when update toolbar button click
}
}
function customFn(args) {
let finalvalue = parseInt(args['value'], 10);
if (saveflag) {
saveflag= false
return true;
}
if (validationflag == true) {
rfinal = true;
validationflag = false;
} else {
rfinal = false;
let ajax = new ej.base.Ajax("/Home/getStatus", "POST", true); // call API
ajax.send(JSON.stringify({ EmployeeID: finalvalue }));
// Then we change the validation message content based on ajax return value in the ajax.onSuccess function
ajax.onSuccess = function (data) {
var gridInstance = document.getElementById('Grid').ej2_instances[0] // Grid Instances
value = JSON.parse(data); // declaring the ajax return value
if (value.result === true) { // check the status
validationflag = true;
if (updatebuttonflag) {
//call endEdit method manually to save the value when the update toolbar button is clicked and ajax return value as “true” in setTimeOut function
setTimeout(() => {
var gridObj = document.getElementById("Grid").ej2_instances[0]; // Grid Instances
saveflag = true;
gridObj.endEdit();
}, 50);
updatebuttonflag= false
}
gridInstance.element.querySelector('form').ej2_instances[0].validate();// validating the form in ajax.onSuccess when the return value as “true”
} else {
if (gridInstance.element.querySelector('form').children[1]) {
// Here we change the validation inner tooltip message
gridInstance.element.querySelector('form').children[1].querySelector('.e-tip-content').innerText = value.customText
}
rfinal = false;
validationflag = false;
}
};
}
return rfinal;
};
</script>
-------------------------------------------------------------------------------------------------------------
[HomeController]
public ActionResult getStatus([FromBody]OrdersDetails value)
{
if (value.EmployeeID <= 5)
{
return new JsonResult(new { result = false, customText = "The value cannot be lower than 5" });
}
else if (value.EmployeeID >= 20)
{
return new JsonResult(new { result = false, customText = "The value cannot be higher that 20" });
}
else
{
return new JsonResult(new { result = true });
}
} | 
