Telerik Grid View in ASP.NET MVC2: Part 2

This article will demonstrate the Insert, Update and Delete Operations in a Telerik Grid View.

It is a continuation of my earlier article - Telerik Grid View in ASP.NET MVC2- Part 1 ( http://www.c-sharpcorner.com/uploadfile/2124ae/9566/ ) - in which I have shown how to display data in a Telerik Grid.

So if you are coming directly to this article - I would recommend you go through Telerik Grid View - Part 1. I will be using the project I created in Part 1

So you can download it and follow the below steps to include the Insert , Update and Delete functionality in Telerik Grid View.

1. Model - Update Repsitory Class

• Open Models-> DataRepository.cs
• Include the below lines of Code for Insert operations.
  
  //Insert Record from Telerik Grid View
  public int MyArticles_InsertRecord(IndexTelerikGridViewModel tempVM)
  {

try
{

entities.MyArticles.AddObject(new MyArticle()
{
Title = tempVM.sTitle,
Section = tempVM.sSection,
Views = tempVM.iViews,
Downloads = tempVM.iDownloads,
Status = tempVM.sStatus

});
entities.SaveChanges();
return 1;
}

catch (Exception ex)
{
return 0;
}
}

• Include the below lines of Code for Update operations.

  //Update Record from Telerik Grid View
  public int MyArticles_UpdateRecord(IndexTelerikGridViewModel tempVM)
  {
  try
  {
  var toUpdate = (from MyArticle in entities.MyArticles where MyArticle.ArticleID == tempVM.iArticleID select MyArticle).FirstOrDefault();
  if (toUpdate != null)
  {
  toUpdate.Title=tempVM.sTitle;
  toUpdate.Section=tempVM.sSection;
  toUpdate.Views=tempVM.iViews;
  toUpdate.Downloads=tempVM.iDownloads;
  toUpdate.Status = tempVM.sStatus;
  }

  entities.SaveChanges();
  return 1;
  }

  catch(Exception ex)
  {
  return 0;
  }
  }
  

• Include the below lines of Code for Delete operations.
  
  //Delete Record from Telerik Grid View
  public int MyArticles_DeleteRecord(IndexTelerikGridViewModel tempVM)
  {
  try
  {
  var toDelete = (from MyArticle in entities.MyArticles where MyArticle.ArticleID == tempVM.iArticleID select MyArticle).FirstOrDefault();
  if (toDelete != null)
  {
  entities.DeleteObject(toDelete);
  entities.SaveChanges();
  }

  return 1;
  }

  catch (Exception ex)
  {
  return 0;

  }
  }

2. Controller - Include methods for Insert, Update and Delete Action

• Open Controllers-> HomeController.cs

• In part 1 - we have defined one action which populated our Telerik Grid based from the database.

• Here we will add 3 more actions which would respond for Insert, Update and Delete operations.

• Action for Insert
  
  //Telerik GridView-Insert Action
  [AcceptVerbs(HttpVerbs.Post)]
  public ActionResult ArticlesTGVInsert()
  {
  IndexTelerikGridViewModel objArticles = new IndexTelerikGridViewModel();

//route values defining the grid state - current page, sort expression, filter etc.
RouteValueDictionary routeValues=this.GridRouteValues();
if (TryUpdateModel(objArticles))
{
int success_Insert = objRepository.MyArticles_InsertRecord(objArticles);
if (success_Insert == 1)
{
TempData["UploadValidationMessage_Success"] = "Insert Operation Succeded!!";
}
else
{
TempData["UploadValidationMessage_Failure"] = "Insert Operation Failded!!";
}
}

return RedirectToAction("Index",routeValues);

}

• Action for Update
  
  //Telerik GridView-Update Action
  [AcceptVerbs(HttpVerbs.Post)]
  public ActionResult ArticlesTGVUpdate(int id)
  {
  IndexTelerikGridViewModel objArticles = new IndexTelerikGridViewModel
  {
  iArticleID = id
  };

  if (TryUpdateModel(objArticles))
  {
  int success_Update = objRepository.MyArticles_UpdateRecord(objArticles);
  //route values defining the grid state - current page, sort expression, filter etc.
  RouteValueDictionary routeValues = this.GridRouteValues();
  if (success_Update == 1)
  {

  TempData["UploadValidationMessage_Success"] = "Update Operation Succeeded";
  return RedirectToAction("Index", routeValues);
  }
  else
  {
  TempData["UploadValidationMessage_Failure"] = "Update Operation Failed";
  return RedirectToAction("Index", routeValues);

  }
  }
  //The model is invalid - render the current view to show any validation errors
  return RedirectToAction("Index");
  

• Action for Delete
  
  //Telerik GridView-Delete Action
  [AcceptVerbs(HttpVerbs.Post)]
  public ActionResult ArticlesTGVDelete(int id)
  {
  IndexTelerikGridViewModel objArticles = new IndexTelerikGridViewModel
  {
  iArticleID=id
  };

  //route values defining the grid state - current page, sort expression, filter etc.
  RouteValueDictionary routeValues = this.GridRouteValues();

  if (objArticles == null)
  {
  routeValues = this.GridRouteValues();
  return RedirectToAction("Index", routeValues);
  }
  //Delete the Record
  int success_Delete = objRepository.MyArticles_DeleteRecord(objArticles);
  if (success_Delete == 1)
  {
  routeValues = this.GridRouteValues();
  TempData["UploadValidationMessage_Success"] = "Delete Operation Succeeded";
  return RedirectToAction("Index", routeValues);
  }
  else
  {
  TempData["UploadValidationMessage_Failure"] = "Delete Operation Failed";
  
  }
  return RedirectToAction("Index", routeValues);
  }

3. View - Update Telerik Grid View

• Open Views->Home->Index.aspx - where we inlcuded our Telerik Grid View in part1

• Update the Telerik Grid View Code-code in yellow background - new lines of code added to inlcude the Insert, Update and Delete button with the corresponding Actions being called.
  
  <%=
  
  Html.Telerik().Grid(Model)
  .Name("tgvArticle")
  .DataKeys(keys=>keys.Add(c=>c.iArticleID))
  .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.ImageAndText))
  .DataBinding(databinding => databinding.Server()
  .Insert("ArticlesTGVInsert", "Home")
  .Update("ArticlesTGVUpdate", "Home")
  .Delete("ArticlesTGVDelete", "Home"))

.Columns(columns=>
{
columns.Bound(p=>p.sTitle).Title("Title").Width(100);
columns.Bound(p=>p.sSection).Title("Section").Width(200);
columns.Bound(p=>p.iViews).Title("Views").Width(100);
columns.Bound(p=>p.iDownloads).Title("Downloads").Width(100);
columns.Bound(p=>p.sStatus).Title("Status").Width(120);
columns.Command(commands =>
{
commands.Edit().ButtonType(GridButtonType.ImageAndText);
commands.Delete().ButtonType(GridButtonType.ImageAndText);
}).Width(180).Title("Commands");

}).Pageable()
.Sortable()
.Filterable()
%>

4. Update Index.aspx - to include the Success or Faliure message

<span style="color:Red;font-weight:bold">
<%=TempData["UploadValidationMessage_Failure"]%>
</span>
<span style="color:Green;font-weight:bold">
<%=TempData["UploadValidationMessage_Success"]%>
</span>

5. Run the application



Here we have seen how to perform Insert , Update and Delete operations in Telerik Grid View.

Happy Learning!