CRUD Data Operations
7 Sep 201724 minutes to read
The DataManager fully supports the CRUD (Create, Read, Update, Destroy) data operations. However, it must be combined with some user interface or another Syncfusion UI widget such as the Grid, ListView, etc.
Local CRUD Operations
The information in this section is applicable to scenarios, in which the data is already available on the client, or when it is you that is going to take care of its retrieval and submission. In other words, DataManager will not make any HTTP requests on its own.
Insert
The insert method of the data manager is used to add a new record to the table. The JSON data passed as a parameter to the insert method that is inserted to the data source of the data manager.
public static List<Employee> employee = new List<Employee>();
public ActionResult Insert()
{
BindDataSource();
ViewBag.data = order;
return View();
}
public void BindDataSource()
{
int code = 10000;
order.Add(new OrderDetails(code + 1, "ALFKI", 1 + 0, 2.3 * 1, "Berlin"));
order.Add(new OrderDetails(code + 2, "ANATR", 1 + 2, 3.3 * 1, "Madrid"));
order.Add(new OrderDetails(code + 3, "ANTON", 1 + 1, 4.3 * 1, "Cholchester"));
order.Add(new OrderDetails(code + 4, "BLONP", 1 + 3, 5.3 * 1, "Marseille"));
order.Add(new OrderDetails(code + 5, "BOLID", 1 + 4, 6.3 * 1, "Tsawassen"));
}
public class OrderDetails
{
public OrderDetails()
{
}
public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, string ShipCity)
{
this.OrderID = OrderID;
this.CustomerID = CustomerId;
this.EmployeeID = EmployeeId;
this.Freight = Freight;
this.ShipCity = ShipCity;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public int? EmployeeID { get; set; }
public double? Freight { get; set; }
public string ShipCity { get; set; }
}@(Html.EJ().DataManager("FlatData").Json((IEnumerable<object>)ViewBag.data).Adaptor(AdaptorType.JsonAdaptor))
@Html.EJ().Button("submit").Text("Insert").ClientSideEvents(e => { e.Click("onClick"); })
@(Html.EJ().Grid<object>("FlatGrid")
.DataManagerID("FlatData")
.Query("new ej.Query().select(['OrderID', 'CustomerID', 'EmployeeID', 'ShipCity', 'Freight'])")
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();
col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();
col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();
})
)
<script type="text/javascript" class="jsScript">
function onClick(e) {
var record = { OrderID: 10253, CustomerID: "ANGEL", EmployeeID: 4, ShipCity: "Reims", Freight:23.1 };
window.FlatData.insert(record)
var obj = $("#FlatGrid").ejGrid("instance");
obj.dataSource(window.FlatData.executeLocal(ej.Query().sortByDesc("OrderID")));
}
</script>
Update
The update method is used to update the modified changes made to a record in the data source of the DataManager.
public static List<Employee> employee = new List<Employee>();
public ActionResult Update()
{
BindDataSource();
ViewBag.data = order;
return View();
}
public void BindDataSource()
{
int code = 10000;
order.Add(new OrderDetails(code + 1, "ALFKI", 1 + 0, 2.3 * 1, "Berlin"));
order.Add(new OrderDetails(code + 2, "ANATR", 1 + 2, 3.3 * 1, "Madrid"));
order.Add(new OrderDetails(code + 3, "ANTON", 1 + 1, 4.3 * 1, "Cholchester"));
order.Add(new OrderDetails(code + 4, "BLONP", 1 + 3, 5.3 * 1, "Marseille"));
order.Add(new OrderDetails(code + 5, "BOLID", 1 + 4, 6.3 * 1, "Tsawassen"));
}
public class OrderDetails
{
public OrderDetails()
{
}
public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, string ShipCity)
{
this.OrderID = OrderID;
this.CustomerID = CustomerId;
this.EmployeeID = EmployeeId;
this.Freight = Freight;
this.ShipCity = ShipCity;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public int? EmployeeID { get; set; }
public double? Freight { get; set; }
public string ShipCity { get; set; }
}@(Html.EJ().DataManager("FlatData").Json((IEnumerable<object>)ViewBag.data).Adaptor(AdaptorType.JsonAdaptor))
@Html.EJ().Button("submit").Text("Update").ClientSideEvents(e => { e.Click("onClick"); })
@(Html.EJ().Grid<object>("FlatGrid")
.DataManagerID("FlatData")
.Query("new ej.Query().select(['OrderID', 'CustomerID', 'EmployeeID', 'ShipCity', 'Freight'])")
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();
col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();
col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();
})
)
<script type="text/javascript" class="jsScript">
function onClick(e) {
var record = { OrderID: 10005, CustomerID: "ANGEL", EmployeeID: 5, ShipCity: "Reims", Freight:23.1 };
window.FlatData.update("OrderID", record, window.FlatData.dataSource.json);
var obj = $("#FlatGrid").ejGrid("instance");
obj.dataSource(window.FlatData.executeLocal(ej.Query().sortByDesc("OrderID")));
}
</script>
Remove
The remove function receives the items to be deleted in the Data Table. The function should remove the provided items from the data source of the DataManager.
public static List<Employee> employee = new List<Employee>();
public ActionResult Remove()
{
BindDataSource();
ViewBag.data = order;
return View();
}
public void BindDataSource()
{
int code = 10000;
order.Add(new OrderDetails(code + 1, "ALFKI", 1 + 0, 2.3 * 1, "Berlin"));
order.Add(new OrderDetails(code + 2, "ANATR", 1 + 2, 3.3 * 1, "Madrid"));
order.Add(new OrderDetails(code + 3, "ANTON", 1 + 1, 4.3 * 1, "Cholchester"));
order.Add(new OrderDetails(code + 4, "BLONP", 1 + 3, 5.3 * 1, "Marseille"));
order.Add(new OrderDetails(code + 5, "BOLID", 1 + 4, 6.3 * 1, "Tsawassen"));
}
public class OrderDetails
{
public OrderDetails()
{
}
public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, string ShipCity)
{
this.OrderID = OrderID;
this.CustomerID = CustomerId;
this.EmployeeID = EmployeeId;
this.Freight = Freight;
this.ShipCity = ShipCity;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public int? EmployeeID { get; set; }
public double? Freight { get; set; }
public string ShipCity { get; set; }
}@(Html.EJ().DataManager("FlatData").Json((IEnumerable<object>)ViewBag.data).Adaptor(AdaptorType.JsonAdaptor))
@Html.EJ().Button("submit").Text("Remove").ClientSideEvents(e => { e.Click("onClick"); })
@(Html.EJ().Grid<object>("FlatGrid")
.DataManagerID("FlatData")
.Query("new ej.Query().select(['OrderID', 'CustomerID', 'EmployeeID', 'ShipCity', 'Freight'])")
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();
col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();
col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();
})
)
<script type="text/javascript" class="jsScript">
function onClick(e) {
var record = { OrderID: 10005, CustomerID: "BOLID", EmployeeID: 4, ShipCity: "Tsawassen", Freight: 6.3 };
window.FlatData.remove("OrderID", record, window.FlatData.dataSource.json);
var obj = $("#FlatGrid").ejGrid("instance");
obj.dataSource(window.FlatData.executeLocal(ej.Query().sortByDesc("OrderID")));
}
</script>
Remote CRUD Operations
The information in this section is applicable to scenarios, in which the data should be retrieved from and submitted to a remote data service via HTTP requests made by the DataManager.
CRUD operations with remote data rely on server code to perform the read, update, create and destroy actions. Instead of configuring client functions, the DataManager defines remote service URLs and the expected format in which data should be sent and received. Theoretically, it is possible to use remote CRUD operations with transport functions, similar to the above examples that use local data, but this is rarely required.
Each of the CRUD operation settings—read, update, create, destroy—provides some common settings that need to be set accordingly:
- The client request type can be “get” or “post”.
- Additional optional headers parameters can be sent to the server if needed.
- The client request and expected server response dataType can be “json”, “jsonp”, “odata”, etc.
Insert
The insert method of the data manager is used to add a new record to the table. The JSON data passed as a parameter to the insert method that is inserted to the data source of the data manager.
//Employee Model class
public class Employee
{
public int EmployeeID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public Employee()
{
}
public Employee(int id, string LN, string FN)
{
this.EmployeeID = id;
this.LastName = LN;
this.FirstName = FN;
}
}
//Employee Repository interface
interface IEmployeeRepository
{
IEnumerable<Employee> GetAll();
Employee Get(int EmployeeID);
Employee Add(Employee employee);
void Remove(int EmployeeID);
bool Update(Employee employee);
}
//EmployeeRepository class
public class EmployeeRepository : IEmployeeRepository
{
private List<Employee> employee = new List<Employee>();
public EmployeeRepository()
{
employee.Add(new Employee(1, "Davolio", "Nancy"));
employee.Add(new Employee(2, "Fuller", "Andrew"));
employee.Add(new Employee(3, "Leverling", "Janet"));
employee.Add(new Employee(4, "Peacock", "Margaret"));
employee.Add(new Employee(5, "Buchanan", "Steven"));
}
public IEnumerable<Employee> GetAll()
{
return employee;
}
public Employee Get(int id)
{
return employee.Find(p => p.EmployeeID == id);
}
public Employee Add(Employee eObj)
{
if (eObj == null)
{
throw new ArgumentNullException("eObj");
}
employee.Add(eObj);
return eObj;
}
public void Remove(int id)
{
employee.RemoveAll(p => p.EmployeeID == id);
}
public bool Update(Employee eObj)
{
if (eObj == null)
{
throw new ArgumentNullException("eObj");
}
int index = employee.FindIndex(p => p.EmployeeID == eObj.EmployeeID);
if (index == -1)
{
return false;
}
employee.RemoveAt(index);
employee.Add(eObj);
return true;
}
}
// Employee WebAPI controller
public class EmployeeController : ApiController
{
static readonly IEmployeeRepository repository = new EmployeeRepository();
// GET API/<controller>
[HttpGet]
public object Get()
{
var queryString = HttpContext.Current.Request.QueryString;
var data = repository.GetAll().ToList();
return new { Items = data, Count = data.Count() };
}
public Employee GetEmployee(int id)
{
Employee employee = repository.Get(id);
if (employee == null)
{
throw new HttpResponseException(HttpStatusCode.NotFound);
}
return employee;
}
// POST API/<controller>
public HttpResponseMessage PostEmployee(Employee employee)
{
employee = repository.Add(employee);
var response = Request.CreateResponse<Employee>(HttpStatusCode.Created, employee);
string addEmployee = Url.Link("Employee", new { id = employee.EmployeeID });
response.Headers.Location = new Uri(addEmployee);
return response;
}
[HttpPut]
// PUT API/<controller>
public void PutEmployee(Employee employee)
{
if (!repository.Update(employee))
{
throw new HttpResponseException(HttpStatusCode.NotFound);
}
}
[HttpDelete]
public void Delete(int id)
{
Employee employee = repository.Get(id);
if (employee == null)
{
throw new HttpResponseException(HttpStatusCode.NotFound);
}
repository.Remove(id);
}
}@(Html.EJ().DataManager("FlatData").URL("/api/Employee").Adaptor(AdaptorType.WebApiAdaptor))
@(Html.EJ().Grid<Sample.Models.Employee>("FlatGrid")
.DataManagerID("FlatData")
.Query("new ej.Query().select(['EmployeeID', 'FirstName', 'LastName'])")
.Columns(col =>
{
col.Field("EmployeeID").HeaderText("EmployeeID").IsPrimaryKey(true).Width(75).Add();
col.Field("FirstName").HeaderText("FirstName").Width(80).Add();
col.Field("LastName").HeaderText("LastName").Add();
})
)
@Html.EJ().Button("submit").Text("Insert").ClientSideEvents(e => { e.Click("onClick"); })
<script type="text/javascript" class="jsScript">
function onClick(e) {
var record = { EmployeeID: 6, FirstName: "ANGEL", LastName: "Reims" };
window.FlatData.insert(record);
setTimeout(function () {
var query = ej.Query();
var dataSource = window.FlatData.executeQuery(query).done(function (args) {
var obj = $("#FlatGrid").ejGrid("instance");
obj.dataSource(args.result);
// renderTable(args.result);
}).fail(function (args) {
//error handling
});
}, 2000);
}
</script>
Update
The update method is used to update the modified changes made to a record in the data source of the DataManager.
@(Html.EJ().DataManager("FlatData").URL("/api/Employee").Adaptor(AdaptorType.WebApiAdaptor))
@(Html.EJ().Grid<Sample.Models.Employee>("FlatGrid")
.DataManagerID("FlatData")
.Query("new ej.Query().select(['EmployeeID', 'FirstName', 'LastName'])")
.Columns(col =>
{
col.Field("EmployeeID").HeaderText("EmployeeID").IsPrimaryKey(true).Width(75).Add();
col.Field("FirstName").HeaderText("FirstName").Width(80).Add();
col.Field("LastName").HeaderText("LastName").Add();
})
)
@Html.EJ().Button("submit").Text("Update").ClientSideEvents(e => { e.Click("onClick"); })
<script type="text/javascript" class="jsScript">
function onClick(e) {
var record = { EmployeeID: 1, FirstName: "Nancy", LastName: "Kamal" };
window.FlatData.update("ItemID", record);
setTimeout(function () {
var query = ej.Query();
var dataSource = window.FlatData.executeQuery(query).done(function (args) {
var obj = $("#FlatGrid").ejGrid("instance");
obj.dataSource(args.result);
// renderTable(args.result);
}).fail(function (args) {
//error handling
});
}, 2000);
}
</script>
Remove
The remove action submits the data items that should be deleted, or just its IDs.
@(Html.EJ().DataManager("FlatData").URL("/api/Employee").Adaptor(AdaptorType.WebApiAdaptor))
@(Html.EJ().Grid<Sample.Models.Employee>("FlatGrid")
.DataManagerID("FlatData")
.Query("new ej.Query().select(['EmployeeID', 'FirstName', 'LastName'])")
.Columns(col =>
{
col.Field("EmployeeID").HeaderText("EmployeeID").IsPrimaryKey(true).Width(75).Add();
col.Field("FirstName").HeaderText("FirstName").Width(80).Add();
col.Field("LastName").HeaderText("LastName").Add();
})
)
@Html.EJ().Button("submit").Text("Remove").ClientSideEvents(e => { e.Click("onClick"); })
<script type="text/javascript" class="jsScript">
function onClick(e) {
window.FlatData.remove("EmployeeID", 2);
setTimeout(function () {
var query = ej.Query();
var dataSource = window.FlatData.executeQuery(query).done(function (args) {
var obj = $("#FlatGrid").ejGrid("instance");
obj.dataSource(args.result);
// renderTable(args.result);
}).fail(function (args) {
//error handling
});
}, 2000);
}
</script>
Batch Edit
Batch Editing is a unique feature, where requests to add, remove and change are handled altogether at a time rather than passing the request separately for each operation.
@(Html.EJ().DataManager("FlatData").Adaptor(AdaptorType.JsonAdaptor))
@(Html.EJ().Grid<MVCdoc.OrdersView>("FlatGrid")
.DataManagerID("FlatData")
.Query("ej.Query().take(5)")
.Columns(col =>
{
col.Field("EmployeeID").HeaderText("EmployeeID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
col.Field("FirstName").HeaderText("FirstName").Width(80).Add();
col.Field("LastName").HeaderText("LastName").TextAlign(TextAlign.Right).Width(75).Add();
})
)Employee ID
<input id="EmployeeID" class="e-ejinputtext" type="text" value="" />
First Name
<input id="FirstName" class="e-ejinputtext" type="text" value="" />
Last Name
<input id="LastName" class="e-ejinputtext" type="text" value="" />
@Html.EJ().Button("submit").Text("Add").ClientSideEvents(e => { e.Click("onClick"); })
@Html.EJ().Button("submit").Text("Change").ClientSideEvents(e => { e.Click("onClick"); })
@Html.EJ().Button("submit").Text("Delete").ClientSideEvents(e => { e.Click("onClick"); })
@Html.EJ().Button("submit").Text("Save All").ClientSideEvents(e => { e.Click("onClick"); })
<script type="text/javascript" class="jsScript">
window.changes = { changed: [], added: [], deleted: [] };
function Click(args) {
if (document.activeElement.value == "Change") {
data = window.FlatData.executeLocal(ej.Query().where("EmployeeID", ej.FilterOperators.equal, parseInt($("#EmployeeID").val(), 10)));
if (data.length) {
data[0].FirstName = $("#FirstName").val();
window.changes.changed.push(data);
}
}
else if (document.activeElement.value == "Add") {
window.changes.added.push({
EmployeeID: parseInt($("#EmployeeID").val(), 10),
FirstName: $("#FirstName").val(),
LastName: $("#LastName").val(),
});
}
else if (document.activeElement.value == "Delete") {
data = window.FlatData.executeLocal(ej.Query().where("EmployeeID", ej.FilterOperators.equal, parseInt($("#EmployeeID").val(), 10)));
if (data.length)
window.changes.deleted.push(data[0]);
}
else {
var obj = $("#MainContent_OrdersGrid").ejGrid("instance");
window.FlatData.saveChanges(window.changes, "EmployeeID");
(window.FlatData.dataSource.json);
}
}
</script>
</asp:Content>Result of the above code example is illustrated as follows.
Batch Editing