CRUD with Kendo UI Grid

In order to perform CRUD operations with kendo grid, we have to configure the grid with following two changes:-

1.We have to specify command columns which accepts command actions.And

2.We have to configure DataSource for each action.

We do not specify any create command column as it does not make sense too. Rather we specify the Create Command when configuring the toolbar for grid.

For Inline Add and Edit we have to set the GridEditMode to Inline by configuring the Editable settings of Grid.

So, Create Methods for Read,Create,Update and Delete in controller like below.

   public ActionResult GetEmployees(DataSourceRequest req)
        { 
            KendoGridContext db=new KendoGridContext();
            List emps=new List();
            emps= db.Employees.ToList();
           return Json(emps.ToDataSourceResult(req),JsonRequestBehavior.AllowGet);
        }
       
       
        public void AddEmployee(Employee emp)
        {
            KendoGridContext db = new KendoGridContext();
            db.Employees.Add(emp);
            db.SaveChanges();
        }
        public void UpdateEmployee(Employee emp)
        {
            KendoGridContext db = new KendoGridContext();
            Employee objToUpdate = db.Employees.Find(emp.Id);
            objToUpdate.Name = emp.Name;
            objToUpdate.Salary = emp.Salary;
            objToUpdate.Gender = emp.Gender;
            objToUpdate.DOB = emp.DOB;
            db.Entry(objToUpdate).State =EntityState.Modified;
            db.SaveChanges();
        }
        public void DeleteEmployee(Employee emp)
        {
             KendoGridContext db = new KendoGridContext();
             Employee objToDelete = db.Employees.Find(emp.Id);
             db.Employees.Remove(objToDelete);
             db.SaveChanges();
        }

I have used Entity Framework for database interaction, You can use whatever you want.

Now Let's Create the view like below.

  @using Kendo.Mvc.UI;
  @using DataAccess;
  @model Employee
  @{
    ViewBag.Title = "Index";
   }
  @(Html.Kendo().Grid <DataAccess.Employee >()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(c => c.Id).Title("Id").Visible(false);
                columns.Bound(c => c.Name).Title("Name").Width(150);
                columns.Bound(c => c.DOB).Title("DOB").Width(150).Filterable(false);
                columns.Bound(c => c.Salary).Title("Salary").Width(150).Filterable(false);
                columns.Bound(c => c.Gender).Title("Gender").Width(150).Filterable(false);
                columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
            }).HtmlAttributes(new { style = "height: 550px;" })
                 .ToolBar(toolbar => toolbar.Create())
        .Scrollable()
        .Groupable()
        .Sortable()
       .Editable(e => e.Mode(GridEditMode.InLine))
      
        .DataSource(dataSource => dataSource
            .Ajax()
                 .Model(model => model.Id(p => p.Id))
                    .Read(read => read.Action("GetEmployees", "Home"))
                                  .Update(update => update.Action("UpdateEmployee", "Home"))
                                  .Destroy(d => d.Action("DeleteEmployee", "Home"))
                                  .Create(c => c.Action("AddEmployee", "Home"))
            .PageSize(20)
         )
     )

Now run The Application and you will be able to perform crud.