Prevent User from Adding Duplicate Items in Grid
|
<script>
function complete(args) {//actionComplete event of Grid
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
// add the custom validation rule to the primary key field
args.form.ej2_instances[0].addRules('OrderID', { required: true, maxLength: [customFn, "duplicate value"] });
}
}
function customFn(args) { //custom validation function
var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0];
var newPrimarykeyData = parseInt(args.value);
var primaryKey = grid.getPrimaryKeyFieldNames()[0];
var records = grid.dataSource.dataSource.json;
// check whether the added/edited value is already present in the datasource or not
// likewise, you can check your added/edited value
var x = new ej.data.DataManager(records).executeLocal(new ej.data.Query().where(primaryKey, "equal", newPrimarykeyData));
return x.length > 0 ? false : true; // return the Boolean value
}
</script>
|
This did not do anything. I got the validation to work by setting the custom function in the validation part of the field in the grid. See the Below code. However, I can not set the validation message this way. How can I modify the validation message?
Code:
@Html.EJS().Grid("ContainerGrid").DataSource(DataManager => { DataManager.Json(@Model.ContainerTransactions.ToArray()).InsertUrl(@Url.Action("AddContainerTransaction", "Containers")).UpdateUrl(@Url.Action("UpdateContainerTransaction", "Containers")).RemoveUrl(@Url.Action("DeleteContainerTransaction", "Containers")).Adaptor("RemoteSaveAdaptor"); }).AllowFiltering(true).AllowSorting(true).ToolbarClick("toolbarClick").Load("onLoad").EnableAdaptiveUI(false).RowRenderingMode(Syncfusion.EJ2.Grids.RowRenderingDirection.Horizontal).Width("auto").Columns(col =>
{
col.Field("TransactionNo").Visible(false).Add();
col.Field("InventoryID").HeaderText("Item").IsPrimaryKey(true).Width("60").Visible(false).EditType("dropdownedit").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).ValidationRules(new { required = true, maxLength =duplicateFn}).Add();
col.Field("ContainerID").ValueAccessor(containerAccessor).Visible(false).Add();
}).ActionBegin("actionBegin")
<script>
function duplicateFn(args) { //custom validation function
var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0];
var newPrimarykeyData = parseInt(args.value);
var primaryKey = grid.getPrimaryKeyFieldNames()[0];
var records = grid.dataSource.dataSource.json;
// check whether the added/edited value is already present in the datasource or not
// likewise, you can check your added/edited value
var x = new ej.data.DataManager(records).executeLocal(new ej.data.Query().where(primaryKey, "equal", newPrimarykeyData));
return x.length > 0 ? false : true; // return the Boolean value
}
</script>
Result:
|
@Html.EJS().Grid("Grid").DataSource(dataManager =>{dataManager.Json(ViewBag.dataSource).InsertUrl("/Home/Insert").RemoveUrl("/Home/Delete").UpdateUrl("/Home/Update").Adaptor("RemoteSaveAdaptor");
}).EditSettings(e => { e.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("30%").Add();
col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
col.Field("CustomerID").HeaderText("CustomerID").Width("70").Add();
}).AllowPaging().ActionComplete("complete").AllowSorting(true).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
<script>
function complete(args) { //actionComplete event of Grid
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
// add the custom validation rule to the primary key field
args.form.ej2_instances[0].addRules('OrderID', { required: true, maxLength: [customFn, "duplicate value"] });
//column name //custom rules //here we can set the validation message as we want
}
}
function customFn(args) {
var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0];
var newPrimarykeyData = parseInt(args.value);
var primaryKey = grid.getPrimaryKeyFieldNames()[0];
var records = grid.dataSource.dataSource.json;
// check whether the added/edited value is already present in the datasource or not
// likewise you can check your added/edited value
var x = new ej.data.DataManager(records).executeLocal(new ej.data.Query().where(primaryKey, "equal", newPrimarykeyData));
return x.length > 0 ? false : true; // return the Boolean value
}
</script>
|
