New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Edit Grids with Entity Framework Code First

Environment

Product	Telerik UI for ASP.NET MVC Grid
Product version	2025.1.227

Description

How can I edit Grids with Entity Framework Code First?

Solution

You can achieve this requirement using the following implementation:

Define a Grid that binds to remote data:

Razor

@(Html.Kendo().Grid<Telerik.Examples.Mvc.Areas.GridEditingEFCodeFirst.Models.Customer>()
    .Name("Customers")
    .ToolBar(tb => tb.Create())
    .Pageable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(c => c.CustomerID))
        .Read("GetCustomers", "Home")
        .Update("UpdateCustomer", "Home")
        .Create("InsertCustomer", "Home")
        .Destroy("DeleteCustomer", "Home")
    )
    .Columns(cols =>
    {
        cols.Bound(c => c.Name).Width(300);
        cols.Bound(c => c.Phone);
        cols.Bound(c => c.Email);
        cols.Command(cmd =>
        {
            cmd.Edit();
            cmd.Destroy();
        });
    })
)

Implement the Action methods for the CRUD operations:

public ActionResult GetCustomers([DataSourceRequest] DataSourceRequest request)
{
    using (var dbContext = new CustomerContext())
    {
        return Json(dbContext.Customers.ToDataSourceResult(request,
                c => new CustomerViewModel
                {
                    CustomerID = c.CustomerID,
                    Name = c.Name,
                    Email = c.Email,
                    Phone = c.Phone
                }));
    }
}

public ActionResult UpdateCustomer([DataSourceRequest] DataSourceRequest request, Customer customer)
{
    using (var dbContext = new CustomerContext())
    {
        var customerToUpdate = dbContext.Customers.First(cust => cust.CustomerID == customer.CustomerID);

        TryUpdateModel(customerToUpdate);

        dbContext.SaveChanges();

        return Json(ModelState.ToDataSourceResult());
    }
}

public ActionResult InsertCustomer([DataSourceRequest] DataSourceRequest request, Customer customerToAdd)
{
    using (var dbContext = new CustomerContext())
    {
        if (ModelState.IsValid)
        {
            dbContext.Customers.Add(customerToAdd);
            dbContext.SaveChanges();
        }

        return Json(new[] { customerToAdd }.ToDataSourceResult(request));
    }
}

public ActionResult DeleteCustomer([DataSourceRequest] DataSourceRequest request, Customer customer)
{
    using (var dbContext = new CustomerContext())
    {
        var customerToDelete = dbContext.Customers.First(cust => cust.CustomerID == customer.CustomerID);

        if (customerToDelete != null)
        {
            dbContext.Customers.Remove(customerToDelete);
            dbContext.SaveChanges();
        }

        return Json(new[] { customerToDelete }.ToDataSourceResult(request));
    }
}

To review the complete implementation, refer to the project on how to implement Grid's CRUD data operations using Entity Framework Code First.

Edit Grids with Entity Framework Code First

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also