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
-
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.
-
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>>"
%>
<%=
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!!