Persisting Data in Server

21 Dec 202218 minutes to read

Edited data can be persisted in the database using the RESTful web services.

All the CRUD operations in the treegrid are done through DataManager. The DataManager has an option to bind all the CRUD related data in server-side.

NOTE

For your information, the ODataAdaptor persists data in the server as per OData protocol.

In the following section, we have explained how to perform CRUD operation in server-side using the UrlAdaptor and RemoteSave Adaptor.

URL adaptor

You can use the UrlAdaptor of DataManager when binding data source from remote data. In the initial load of grid, data are fetched from remote data and bound to the grid using url property of DataManager.

You can map The CRUD operation in grid can be mapped to server-side Controller actions using the properties InsertUrl, RemoveUrl, UpdateUrl and BatchUrl.

The following code example describes the above behavior.

CSHTML

<ejs-treegrid id="TreeGrid" height="400" idMapping="TaskId" hasChildMapping="isParent" parentIdMapping='ParentId' treeColumnIndex="1" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
    <e-data-manager url="/Home/DataSource" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Remove" adaptor="UrlAdaptor"></e-data-manager>
    <e-treegrid-editsettings allowAdding="true" allowEditing="true" allowDeleting="true" mode="Row" newRowPosition="Below"></e-treegrid-editsettings>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" isPrimaryKey="true" textAlign="Right" width="70"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" editType="stringedit" width="180"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText="Start Date" editType="datetimepickeredit" format="yMd" textAlign="Right" width="185"></e-treegrid-column>
        <e-treegrid-column field="Priority" headerText="Priority" defaultValue="Normal" width="100"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

Urladaptor.cs

public IActionResult DataSource([FromBody]DataManager dm)
{
    var DataSource = TreeData.GetTree();
    DataOperations operation = new DataOperations();
    if (dm.Where != null && dm.Where.Count > 0)
    {
        DataSource = operation.PerformFiltering(DataSource, dm.Where, "and");  //perform Filtering based on query passed as well as maintain child records Expand/Collapse 
    }
    var count = DataSource.ToList<TreeData>().Count();
    if (dm.Skip != 0)
    {
        DataSource = operation.PerformSkip(DataSource, dm.Skip);   //Paging
    }
    if (dm.Take != 0)
    {
        DataSource = operation.PerformTake(DataSource, dm.Take);
    }
    return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);
}

Also, when using the UrlAdaptor, you need to return the data as JSON from the controller action and the JSON object must contain a property as result with dataSource as its value and one more property count with the dataSource total records count as its value.

Insert record

Using the InsertUrl property, you can specify the controller action mapping URL to perform insert operation on the server-side.

The following code example describes the above behavior.

CSHTML

<ejs-treegrid id="TreeGrid" height="400" idMapping="TaskId" hasChildMapping="isParent" parentIdMapping='ParentId' treeColumnIndex="1" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
    <e-data-manager url="/Home/DataSource" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Remove" adaptor="UrlAdaptor"></e-data-manager>
    <e-treegrid-editsettings allowAdding="true" allowEditing="true" allowDeleting="true" mode="Row" newRowPosition="Below"></e-treegrid-editsettings>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" isPrimaryKey="true" textAlign="Right" width="70"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" editType="stringedit" width="180"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText="Start Date" editType="datetimepickeredit" format="yMd" textAlign="Right" width="185"></e-treegrid-column>
        <e-treegrid-column field="Priority" headerText="Priority" defaultValue="Normal" width="100"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

Insert.cs

public void Insert([FromBody]ICRUDModel value)
{
    var i = 0;
    var index = value.rowIndex;
    for (; i < TreeData.tree.Count; i++)
    {
        if (TreeData.tree[i].TaskID == index)
        {
            break;
        }
    }
    i += FindChildRecords(index);
    TreeData.tree.Insert(i + 1, value.value);
}

public int FindChildRecords(int? id)
{
    var count = 0;
    for (var i = 0; i < TreeData.tree.Count; i++)
    {
        if (TreeData.tree[i].ParentItem == id)
        {
            count++;
            count += FindChildRecords(TreeData.tree[i].TaskID);
        }
    }
    return count;
}

public class CustomBind : TreeData
{
    public TreeData parentItem;
}

public class ICRUDModel
{
    public CustomBind value;
    public int key;
    public string action;
    public int? relationalKey;
}

The newly added record details are bound to the value parameter and relationalKey contains primaryKey value of an selected record helps to find out the position of newly added record. Refer to the following screenshot.

Update record

Using the UpdateUrl property, the controller action mapping URL can be specified to perform save/update operation on the server-side.

The following code example describes the previous behavior.

CSHTML

<ejs-treegrid id="TreeGrid" height="400" idMapping="TaskId" hasChildMapping="isParent" parentIdMapping='ParentId' treeColumnIndex="1" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
    <e-data-manager url="/Home/DataSource" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Remove" adaptor="UrlAdaptor"></e-data-manager>
    <e-treegrid-editsettings allowAdding="true" allowEditing="true" allowDeleting="true" mode="Row" newRowPosition="Below"></e-treegrid-editsettings>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" isPrimaryKey="true" textAlign="Right" width="70"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" editType="stringedit" width="180"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText="Start Date" editType="datetimepickeredit" format="yMd" textAlign="Right" width="185"></e-treegrid-column>
        <e-treegrid-column field="Priority" headerText="Priority" defaultValue="Normal" width="100"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

Update.cs

public ActionResult Update([FromBody]CRUDModel value)
{
    var val = TreeData.tree.Where(ds => ds.TaskID == value.Value.TaskID).FirstOrDefault();
    val.TaskName = value.Value.TaskName;
    val.StartDate = value.Value.StartDate;
    val.Duration = value.Value.Duration;
    val.Priority = value.Value.Priority;
    val.Progress = value.Value.Progress;
    return Json(val);            
}

public class CRUDModel
{
    public List<TreeData> Added { get; set; }

    public List<TreeData> Changed { get; set; }

    public List<TreeData> Deleted { get; set; }

    public TreeData Value;

    public int Key;

    public int? RelationalKey;
}

The updated record details are bound to the value parameter. Refer to the following screenshot.

Delete record

Using the RemoveUrl and BatchUrl property, the controller action mapping URL can be specified to perform delete operation on the server-side.

The following code example describes the previous behavior.

CSHTML

<ejs-treegrid id="TreeGrid" height="400" idMapping="TaskId" hasChildMapping="isParent" parentIdMapping='ParentId' treeColumnIndex="1" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
    <e-data-manager url="/Home/DataSource" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Remove" adaptor="UrlAdaptor"></e-data-manager>
    <e-treegrid-editsettings allowAdding="true" allowEditing="true" allowDeleting="true" mode="Row" newRowPosition="Below"></e-treegrid-editsettings>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" isPrimaryKey="true" textAlign="Right" width="70"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" editType="stringedit" width="180"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText="Start Date" editType="datetimepickeredit" format="yMd" textAlign="Right" width="185"></e-treegrid-column>
        <e-treegrid-column field="Priority" headerText="Priority" defaultValue="Normal" width="100"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

Delete.cs

public void Remove([FromBody]CRUDModel value)
{
    TreeData.tree.Remove(TreeData.tree.Where(ds => ds.TaskID == int.Parse(value.Key.ToString())).FirstOrDefault());
}

public ActionResult Delete(CRUDModel value)
{
    if (value.Deleted != null) 
    {
       for (var i = 0; i < value.Deleted.Count().Count; i++)
        {
            TreeData.tree.Remove(TreeData.tree.Where(ds => ds.TaskID == value.Deleted[i].TaskID).FirstOrDefault());
        }
    }
}

public class CRUDModel
{
    public List<TreeData> Added { get; set; }

    public List<TreeData> Changed { get; set; }

    public List<TreeData> Deleted { get; set; }

    public TreeData Value;

    public int Key;

    public int? RelationalKey;
}

The deleted record primary key value is bound to the key parameter. Refer to the following screenshot.

While delete parent record, the parent and child records is bound to the deleted parameter. Refer to the following screenshot.

Remote save adaptor

You may need to perform all Tree Grid Actions in client-side except the CRUD operations, that should be interacted with server-side to persist data. It can be achieved in TreeGrid by using RemoteSaveAdaptor.

Datasource must be set to json property and set RemoteSaveAdaptor to the adaptor property. CRUD operations can be mapped to server-side using updateUrl, insertUrl, removeUrl and batchUrl properties.

You can use the following code example to use RemoteSaveAdaptor in TreeGrid.

CSHTML

<ejs-treegrid id="TreeGrid" hasChildMapping="isParent" idMapping="TaskID" parentIdMapping="parentItem" treeColumnIndex="1" allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
    <e-data-manager json ="@ViewBag.dataSource" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Remove" batchUrl="/Home/Delete" adaptor="RemoteSaveAdaptor"></e-data-manager>
    <e-treegrid-editsettings allowAdding="true" allowEditing="true" allowDeleting="true" newRowPosition="Below" mode="Row"></e-treegrid-editsettings>
        <e-treegrid-columns>
            <e-treegrid-column field="TaskID" headerText="Task ID" textAlign="Right" width="120"></e-treegrid-column>
            <e-treegrid-column field="TaskName" headerText="Task Name" width="150"></e-treegrid-column>
            <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="110"></e-treegrid-column>
            <e-treegrid-column field="Progress" headerText="Progress" textAlign="Right" width="110"></e-treegrid-column>
        </e-treegrid-columns>
</ejs-treegrid>

Crudcore.cs

public ActionResult Index(DataManager dm)
{
   var data = TreeData.GetTree();
   ViewBag.dataSource = data;
   return View();
}

public ActionResult Insert([FromBody]CRUDModel value)
{
    var i = 0;
    for (; i < TreeData.tree.Count; i++)
    {
        if (TreeData.tree[i].TaskID == value.RelationalKey)
        {
            break;
        }
    }
    i += FindChildRecords(value.RelationalKey);  // Finds Inserted new record index when newRowPosition API is in "Below".
    TreeData.tree.Insert(i + 1, value.Value);
    return Json(value.Value);
}

public int FindChildRecords(int? id)
{
    var count = 0;
    for (var i = 0; i < TreeData.tree.Count; i++)
    {
        if (TreeData.tree[i].ParentID == id)
        {
            count++;
            count += FindChildRecords(TreeData.tree[i].TaskID);
        }
    }
    return count;
}

public ActionResult Update([FromBody]CRUDModel value)
{
    var val = TreeData.tree.Where(ds => ds.TaskID == value.Value.TaskID).FirstOrDefault();
    val.TaskName = value.Value.TaskName;
    val.StartDate = value.Value.StartDate;
    val.Duration = value.Value.Duration;
    val.Priority = value.Value.Priority;
    val.Progress = value.Value.Progress;
    return Json(val);            
}

public void Remove([FromBody]CRUDModel value)
{
    TreeData.tree.Remove(TreeData.tree.Where(ds => ds.TaskID == int.Parse(value.Key.ToString())).FirstOrDefault());
}

public ActionResult Delete([FromBody]CRUDModel value)
{
    if (value.Deleted != null) 
    {
       for (var i = 0; i < value.Deleted.Count().Count; i++)
        {
            TreeData.tree.Remove(TreeData.tree.Where(ds => ds.TaskID == value.Deleted[i].TaskID).FirstOrDefault());
        }
    }
}

public class CRUDModel
{
    public List<TreeData> Added { get; set; }

    public List<TreeData> Changed { get; set; }

    public List<TreeData> Deleted { get; set; }

    public TreeData Value;

    public int Key;

    public int? RelationalKey;
}

NOTE

You can refer to our ASP.NET Core Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Tree Grid example ASP.NET Core Tree Grid example to knows how to present and manipulate data.