CRUD with Kendo UI Grid

by Sachin Singh


Posted on Tuesday, 03 March 2020

Tags: CRUD opertaion with kendo UI Grid in Asp.Net MVC Inline Add and Edit Kendo UI Grid in Asp.net MVC Kendo UI grid with Entity Framework

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.