Telerik Grid View in ASP.NET MVC2: Part 1

In this article I will be demonstrating how to populate a Telerik Grid View in ASP.NET MVC2 using Entity Framework 4.

Please go through my artcle - Working with Telerik Controls in ASP.NET - This article will explain all of the prerequisites for working with Telerik controls in APS.NET MVC Projects.

For demonstration here, I will be using here Visual Studio 2010(MVC2.0)

1. Create a new ASP.NET MVC2 Web application - name it as MVCTelerikGridViewDemo



2. For this sample application - Let's not create the unit test project.- So select the radio button - No, Do not create a unit Test Project.

3. Now we have the readymade/default ASP.Net MVC2 Project template with few files already existing in each of the folders Model , View and Controller.

4. For this Demo - We will be placing the Telerik Grid View in existing default View ( Views ->Home->Index.aspx)
This View is called from HomeController.cs(Controller -> HomeController.cs)

5. Create ViewModel

• ViewModel can be thought as a Model - which is responsible to supply information to a View.
• ViewModels helps us to create Strongly Typed Views.
• Right Click solution explorer -> MVCTelerikGridViewDemo -> Add -> New Folder(ViewModel) = This folder can be used for placing all the ViewModel classes of the entire project.
• Right Click ViewModels -> Add Class -> IndexTelerikGridViewModel.cs
  
  
  
• Open IndexTelerikGridViewModel.cs -Include automatic properties representing each of the columns of the GridView.

Code - IndexTelerikGridViewModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.ComponentModel.DataAnnotations;

namespace MVCTelerikGridViewDemo.ViewModel
{
public class IndexTelerikGridViewModel
{
public int iArticleID { get; set; }
[Required]
public String sTitle { get; set; }
[Required]
public string sSection { get; set; }
[Required]
public int iViews { get; set; }
[Required]
public int iDownloads { get; set; }
[Required]
public string sStatus { get; set; }

}
}

6. Database Part

• We will create a sample SQL Server database - create a table and insert some sample data which would be reflected in our Telerik GridView.

• For this sample app - Let us create table by
  
  1. Right Click the App_Data folder -> Add -> New Item -> Select SQL Server database and give it some name- TestDatabase.mdf - Click Add.
  2. Double Click TestDatabase.mdf to open the Server Explorer.
  3. Right Click Table - Add New Table -
  - ArticleID- Primary Key(set to autoincrement by 1)
  
  
  
  4. Save- (CTRL+S) -> Give Table Name -> MyArticles
  5. Insert Sample Data - Right-click the tblState table and select option Show Table Data- and you can enter sample data.

7. Setting up the Models

1. Adding Entity Framework classes
   

   • Entity Framework is an ORM(object relational mapper) that ships as part of .Net 4
   • From the Solution explorer -> Go to Models folder -> Right Click Models -> Add New Item -> Select ADO.Net Entity Data Model -> Name it -> TestDataBaseModel.edmx -> Click Add -
   • Below Screenshots depicts the stepwise creation of Entity Framework Class.
     
     
     
     
     
     
     
     
     
     
   • With the Click on Finish - Our Entity Data Model is created.
     
     
     

2. Creating a Repository Class
   

   • This approach using a Repository class helps encapsulate data querying and persistence logic.
   • In the Repository Class - We can specify all the Querying methods required in our application
   • Right Click Models-Add Class - DataRepository.cs
     
     
     
   • Open DataRepository.cs
   • Add the following using Statement
     
     
   using System.Web.Mvc;
   using MVCTelerikGridViewDemo.ViewModel;
   
   • Create the object of TestDatabaseEntities
   • Include a function which would fetch the records to be displayed in Telerik Grid View
     
     Code-DataRepository.cs
     
     using System;
     using System.Collections.Generic;
     using System.Linq;
     using System.Web;
     using System.Web.Mvc;
     using MVCTelerikGridViewDemo.ViewModel;

     namespace MVCTelerikGridViewDemo.Models
     {
     public class DataRepository
     {
     //Create an instance of TestDatabaseEntities
     public TestDatabaseEntities entities = new TestDatabaseEntities();
     //Fetching Records from database to be displayed in Telerik Grid
     public IEnumerable<IndexTelerikGridViewModel> MyArticles_DisplayRecords()
     {
     try
     {
     var records = from MyArticle in entities.MyArticles
     select new IndexTelerikGridViewModel
     {
     iArticleID=MyArticle.ArticleID,
     sTitle=MyArticle.Title,
     sSection=MyArticle.Section,
     iViews=MyArticle.Views,
     iDownloads=MyArticle.Downloads,
     sStatus=MyArticle.Status
     };
     return records;
     }
     catch (Exception ex)
     {
     return null;
     }
     }

     }
     }

8. Now you need to perform all the steps which I have mentioned as prerequisites before including a Telerik Control in your Views - Working with Telerik Controls in ASP.NET

9. Views

Open Index.aspx (default View already existing in Views->Home folder)

• We can strongly type this View to our ViewModel class we created by updating the Page directive as below-

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MVCTelerikGridViewDemo.ViewModel.IndexTelerikGridViewModel>>" %>

• Include Telerik Grid View in Index.aspx

<%=

Html.Telerik().Grid(Model)
.Name("tgvArticle")
.DataKeys(keys=>keys.Add(c=>c.iArticleID))
.Columns(columns=>
{

columns.Bound(p=>p.sTitle).Title("Title");
columns.Bound(p=>p.sSection).Title("Section");
columns.Bound(p=>p.iViews).Title("Views");
columns.Bound(p=>p.iDownloads).Title("Downloads");
columns.Bound(p=>p.sStatus).Title("Status");
}).Pageable()
.Sortable()
.Filterable()

%>

10. Controller

• Our View Index.aspx is called from HomeController.cs (Controller -> HomeController.cs)

• Open HomeController.cs

• Add the following using statement
  
  using MVCTelerikGridViewDemo.Models;
  using MVCTelerikGridViewDemo.ViewModel;
  

• Create an instance of Repository Class which we created in Model.

  DataRepository objRepository = new DataRepository();
  

• Update the ActionResult Index to pass the fetched records to be displayed in the View - Index.aspx
  
  public ActionResult Index()
  {
  ViewData["Message"] = "Telerik Grid View Demo!!!";
  return View(objRepository.MyArticles_DisplayRecords());
  }
  

• Code HomeController.cs
  
  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  using MVCTelerikGridViewDemo.Models;
  using MVCTelerikGridViewDemo.ViewModel;

  namespace MVCTelerikGridViewDemo.Controllers
  {
  [HandleError]
  public class HomeController : Controller
  {
  DataRepository objRepository = new DataRepository();

  public ActionResult Index()
  {
  ViewData["Message"] = "Telerik Grid View Demo!!!";
  return View(objRepository.MyArticles_DisplayRecords());
  }
  }
  }

11. Output - Run the application

Telerik Grid View would be displayed on the page as -



Since we have mentioned out Telerik Grid View as Pageable,Sotable and Filterable in code (refer Telerik Grid View Code added in the View)- So all these functionality come with this Grid.

Example - Records can be filtered based on column values



I will come soon with Part 2 of Telerik Grid View - with the Insert,Update and Delete Operations

Happy Learning!!