How to perform CRUD actions in Tree grid using entity framework
In TreeGrid, you can load SQL data using the entity framework in ASP.NET Core, and you can perform CRUD actions to update the SQL database.
Install NuGet packages for the following two things to use EF Core in the application:
- EF Core DB provider
- EF Core tools
Step 1: Click Tools > NuGet Package Manager > Manage NuGet Packages for installing the Microsoft.EntityFrameworkCore.SqlServer NuGet package to install the EF Core DB provider.
Step 2: To Install EF Core Tools, install the Microsoft.EntityFrameworkCore.Tools NuGet package.
Step 3: To create entity and context classes in Visual Studio, select Tools > NuGet Package Manger > Package Manger Console and run the following command:
PM>Scaffold-DbContext "Server=servername;Database=databasename;Trusted_Connection=True;" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models
The above command creates entity classes for each table in the SQL database.
Now, you can perform CRUD actions and update the remote data from the TreeGrid by using the actionComplete,endEdit,rowDragStop client-side event. Using the AJAX method, you can update the remote data from client side.
Find the code example to render the TreeGrid using the EF Core context.
using TreeGridCRUD.Models;
public IActionResult Index()
{
var context = new masterContext();
var dataSource = context.TreeGridData.ToList();
ViewBag.datasource = dataSource;
return View();
}
Find the code example for client-side actions.
<ej-tree-grid id="TreeGridContainer"
//..
action-complete="actionComplete"
end-edit="endEdit"
row-drag-stop="rowDragStop">
</ej-tree-grid>
<script type="text/javascript">
function rowDragStop(args) {
var data = args.draggedRow.item;
$.ajax({
type: "POST",
url: "/TreeGrid/Update",
data: data,
dataType: "json",
});
}
function endEdit(args) {
var editedRecord = (args.requestType == "update") ? args.currentValue : args.data.item;
editedRecord.StartDate = new Date(editedRecord.StartDate).toUTCString();
editedRecord.EndDate = new Date(editedRecord.EndDate).toUTCString();
$.ajax({
type: "POST",
url: "/TreeGrid/Update", //Update is Server side method
data: editedRecord,
dataType: "json",
});
}
function actionComplete(args) {
var record = args.data;
if (args.requestType === 'addNewRow') {
addedRecord = args.addedRow;
$.ajax({
type: "POST",
url: "/TreeGrid/Add",//Add is Server side method
data: addedRecord,
dataType: "json",
});
} else if (args.requestType === 'delete') {
var deletedRecord = args.data.item; //This is the deleted item.
$.ajax({
type: "POST",
url: "/TreeGrid/Delete", //Delete is Server side method
data: deletedRecord,
dataType: "json",
});
if (args.data.hasChildRecords) {
deleteChildRecords(args.data);
}
//If deleted item has child records, we need to delete that too
}
}
//Delete inner level child records
function deleteChildRecords(record) {
var childRecords = record.childRecords,
length = childRecords.length,
count, currentRecord;
for (count = 0; count < length; count++) {
currentRecord = childRecords[count];
var deletedChildRecord = currentRecord.item;
$.ajax({
type: "POST",
url: "/TreeGrid/Delete", //Delete is Server side method
data: deletedChildRecord,
dataType: "json",
});
if (currentRecord.hasChildRecords) {
deleteChildRecords(currentRecord);
}
}
}
</script>
Insert action
[HttpPost()]
public ActionResult Add(TreeGridData Task)
{
using (var context = new masterContext())
{
var insertData = new TreeGridData ()
{
Id = Task.Id,
Name = Task.Name,
StartDate = Task.StartDate,
EndDate = Task.EndDate,
ParentId = Task.ParentId,
Progress = Task.Progress
};
context.TreeGridData.Add(insertData);
context.SaveChanges();
}
return Json(Task);
}
Update action
[HttpPost()]
public ActionResult Update(TreeGridData Tasks)
{
using (var context = new masterContext())
{
var updateData = context.TreeGridData.FirstOrDefault(x => x.Id == Tasks.Id);
updateData.Id = Tasks.Id;
updateData.Name = Tasks.Name;
updateData.StartDate = Tasks.StartDate;
updateData.EndDate = Tasks.EndDate;
updateData.ParentId = Tasks.ParentId;
updateData.Progress = Tasks.Progress;
context.SaveChanges();
}
return Json(Tasks);
}
Delete action
[HttpPost()]
public ActionResult Delete(TreeGridData Task)
{
using (var context = new masterContext())
{
var deleteData = context.TreeGridData.Single(r => r.Id == Task.Id);
context.TreeGridData.Remove(deleteData);
context.SaveChanges();
}
return Json(Task);
}
Refer here to find the sample for CRUD actions using EF Core in the TreeGrid.
