CRUD In Kendo TreeList View Using ASP.NET WEB API

Introduction

This article tells about how to perform CRUD in Kendo TreeList View, using ASP.NET Web API. To explain it, I have created a RESTful GET Service which is used to load the DataSource of Kendo TreeList

Requirements

• VS 2010 and above
• SQL Server 2008 and above

Before going through this article, please go through my previous article to get a basic idea to implement the Kendo TreeList View.

Prerequisites

Basic knowledge of ASP.NET WebAPI, jQuery, Kendo UI.

This article flows as per the following.

1. Creating an ASP.NET Web API application.
2. Creating a Controller.
3. Testing the REST API.
4. Creating a HTML page and implementing CRUD IN kendo Tree List View

Set up the Table

For this article, I have created one table, design of which is shown below.

Figure 1 

 

Employee Table 

 

Figure 2 

 

Creating an ASP.NET WEB API Application

Create a Web API application using an installed Web template in Visual Studio, as shown below. In my case, I named the application “TreeViewCrud".


Figure 3


Figure 4 

Creating model classes

Now, we will create Entity framework models from the database tables.

Step 1

Right-click the Models folder, select Add -> ADO.NET Entity Data Model, or select Add->New Item. In the "Add New Item" window, select data in the left pane and ADO.NET Entity Data Model from the center pane. Name the new model file (In my case, I made it as Employee) and click Add. 

Step 2

In the Entity Data Model wizard, select "EF Designer" from the database and click "Next".

Figure 5 

Step 3

Click the "New Connection" button. The "Connection Properties" window will open.

Figure 6

 

Step 4 

In the "Connection Properties" window, provide the name of the local Server where the database was created (in this case, (DESKTOP-585QGBN)). After providing the Server name, select "Employee" from the available databases and click OK.

Step 5

You can use the default name for the connection to save the Web.Config file. Now, click "Next". 

Step 6

Select the table to generate the models for Employee table and click "Finish".

Figure 7

My database schema is shown in the figure given below.

Figure 8

Creating a Controller

Right click on Controller folder and add a new Web API 2 controller with actions using entity framework, as shown in the Figure 9. In my case, I named it as EmployeesController.cs.


Figure 9 

 

Figure 10 

EmployeeController.cs

public class EmployeesController : ApiController
{
    private EmployeeEntities db = new EmployeeEntities();

    // GET: api/Employees
    public IQueryable<Employee> GetEmployees()
    {
        return db.Employees;
    }

    // GET: api/Employees/5
    [ResponseType(typeof(Employee))]
    public IHttpActionResult GetEmployee(int id)
    {
        Employee employee = db.Employees.Find(id);
        if (employee == null)
        {
            return NotFound();
        }

        return Ok(employee);
    }

    // PUT: api/Employees/5
    [ResponseType(typeof(void))]
    public IHttpActionResult PutEmployee(Employee employee)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        db.Entry(employee).State = EntityState.Modified;

        try
        {
            db.SaveChanges();
        }
        catch (DbUpdateConcurrencyException)
        {
            if (!EmployeeExists(employee.EmployeeID))
            {
                return NotFound();
            }
            else
            {
                throw;
            }
        }

        return StatusCode(HttpStatusCode.NoContent);
    }

    // POST: api/Employees
    [ResponseType(typeof(Employee))]
    public IHttpActionResult PostEmployee(Employee employee)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        db.Employees.Add(employee);
        db.SaveChanges();

        return CreatedAtRoute("DefaultApi", new { id = employee.EmployeeID }, employee);
    }

    // DELETE: api/Employees/5
    [ResponseType(typeof(Employee))]
    public IHttpActionResult DeleteEmployee(Employee _employee)
    {
        Employee employee = db.Employees.Find(_employee.EmployeeID);
        if (employee == null)
        {
            return NotFound();
        }

        db.Employees.Remove(employee);
        db.SaveChanges();

        return Ok(employee);
    }

    protected override void Dispose(bool disposing)
    {
        if (disposing)
        {
            db.Dispose();
        }
        base.Dispose(disposing);
    }

    private bool EmployeeExists(int id)
    {
        return db.Employees.Count(e => e.EmployeeID == id) > 0;
    }
}

Creating a HTML page

Create one new HTML page in the application where we are going to implement the kendoTreeList View, using the RESTful Service. In my case, I named it as TreeListView.html.

CRUD action in kendoTreeList

The kendoTreeList View is used to display the self-referencing tabular data and allows sorting, filtering, and editing. We can use an empty div tag and initialize the TreeViewList settings from the script. 

Write the below code in TreeListView.html 

<!DOCTYPE html>
<html>
<head>

    <style>
        html {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.mobile.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
    <h3>Kendo TreeList View using remote data </h3>
    <br />
    <br />
    <div id="example">
        <div id="treelist"></div>

        <script>
                $(document).ready(function () {

                    var dataSource = new kendo.data.TreeListDataSource({
                        transport: {
                            read: {
                                url: "api/Employees",
                                dataType: "json",
                                type:"GET"
                            },
                            update: {
                                url: "api/Employees/",
                                dataType: "json",
                                type:"PUT"
                            },
                            destroy: {
                                url: "api/Employees/",
                                dataType: "json",
                                type:"DELETE"
                            },
                            create: {
                                url: "api/Employees",
                                dataType: "json",
                                type:"POST",

                            parameterMap: function(options, operation) {
                                if (operation !== "read" && options.models) {
                                    return {models: kendo.stringify(options.models)};
                                }
                            }
                        },
                            },
                            schema: {
                                model: {
                                    id: "EmployeeID",
                                    parentId: "ReportTo",
                                    fields: {
                                        EmployeeID: { type: "number", nullable: false },
                                        ReportTo: { field: "ReportTo", nullable: true }
                                    }
                                }
                            }
                        });

                    $("#treelist").kendoTreeList({
                        dataSource: dataSource,
                        toolbar: ["create"],
                        filterable: true,
                        editable: true,
                        sortable:true,
                        columns: [
                            { field: "FirstName", expandable: true, title: "FirstName", width: 250 },
                            { field: "LastName", title: "LastName", width: 250 },
                            { field: "Designation", title: "Designation", width: 250 },
                            {
                                title: "Edit", command: ["edit", "destroy"], width: 250,
                                attributes: {
                                    style: "text-align: center;"
                                }
                            }

                        ]
                    });
                });
        </script>
    </div>



</body>
</html>

Result

 

Read 

 

Url api/Employee

Type GET

 

 Add a New Record

 

Url - api/Employee

Type - POST  

 

Click on "Add New Record" button in the toolbar of kendo Grid. It will create a new row in the TreeListView to add the entry .

 

Update

Url - api/Employee

Type - PUT 

 

Click on "Edit" command to edit the data in particular row.

 

Delete

 

Url - api/Employee

Type - DELETE 

 

Click on "Delete" custom button  to delete a particular record.


I hope, you have enjoyed this article. Your valuable feedback, questions, or comments about this article are always welcome.

 

Get the Source code from Github.