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

Telerik.gif

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

Happy Learning!

Up Next
    Ebook Download
    View all
    Learn
    View all