Category / Section
How to prevent the addition of duplicate records to the Grid?
1 min read
You can check and prevent the insertion of the duplicate records to the Grid. The following code example shows how to check and prevent adding identical records to the Grid.
- Render the Grid control.
JS
<div id="Grid"></div>
<script type="text/javascript">
$(function () {// Document is ready.
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: ej.Grid.EditMode.Dialog },
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
columns: [
{ field: "OrderID", headerText: "Order ID", isPrimaryKey: true, width: 100, isIdentity: true },
{ field: "CustomerID", headerText: "Customer ID", width: 130 },
{ field: "Freight", headerText: "Freight", width: 100, format: "{0:C}" },
{ field: "ShipCountry", headerText: "Ship Country", width: 100, },
],
actionBegin: "begin",
});
});
</script>
MVC
[In View]
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.data))
.AllowPaging()
.EditSettings(edit => edit.AllowEditing().AllowAdding().AllowDeleting().EditMode(EditMode.Dialog))
.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);
});
})
.Columns(col =>
{ col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).IsIdentity(true).TextAlign(TextAlign.Right).Width(100).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(100).Add();
col.Field("Freight").Width(100).Format("{0:c2}").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width(100).Add();
})
.ClientSideEvents(eve=>eve.ActionBegin("begin"))
)
[Controller]
namespace EJGrid.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
var DataSource = OrderRepository.GetAllRecords();
ViewBag.data = DataSource;
return View();
}
}
}
ASP.NET
[aspx]
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" >
<ClientSideEvents ActionBegin="begin" />
<EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="Dialog" ></EditSettings>
<ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" IsIdentity="True" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" />
<ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}"
<ej:Column Field="ShipCountry" HeaderText="Ship Country" />
</Columns>
</ej:Grid>
[CS]
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.OrdersGrid.DataSource = new NorthwindDataContext().Orders;
this.OrdersGrid.DataBind();
}
}
- In the actionBegin event of the Grid, when the requestType is save, you need to check whether the added data is already present in the DataSource of the Grid. In case it is present, then the save operation is reverted or cancelled.
function begin(args) {
if (args.requestType == "save") {//When the save action is triggered.
if ($.inArray(args.data,args.model.dataSource) != -1) {
args.cancel = true;
alert("Please enter only unique values");
$("#" + this._id + "_dialogEdit").ejDialog("close");
break;
}
}
}
