Display and Sort Data Using GridMVC DLL

In this demo you will learn how to use grid mvc. I hope this will help you.

Prerequisite

1. Visual Studio 2013
2. I downloaded Entity Framework 6.1 just to update the default entity framework in MVC.3. Grid.MVC , you may check samples here : http://gridmvc.codeplex.com/wikipage?title=Quick%20start&referringTitle=Documentation

Let's get started.

 

Step 1: First Create new project in visual studio choose c# for this demo I named the project as UsingGridMvc.

After that you may right click the project and choose Manage Nuget Packages see image below.

 

 

Step 2: Update/Download Entity Framework to 6.1 (this is for my own reason, I always update my entity before working with any project.)

 

 

Step 3: Download grid.mvc from nuget package.

 

 

Step 4: Now since were done with our prerequisite. Create a Controller,

Right click the folder Controller choose Add then Controller.

 

 

in this demo I named the controller as DisplayDataController.

 

Step 5: Double click the DisplayDataController.cs Inside on it right click the public ActionResult Index() method then choose Add View.

 

 

Step 6: Name the your view anything you want, In this demo I named the view as Index

 

Step 7: Inside the View folder you may see the DisplayData folder Double click the Index.cstml file.

And add this code under the ViewBag.Title = "Index"

Layout = "~/Views/Shared/_Layout.cshtml";

Script should be like this.

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml"; //Add this Layout property
}

 Step 8: Now lets create a temporary Model Class / Properties.

Right click the Model Folder then choose Add then New Item

In this demo I named the class as Person.

Double click the Person.cs Class Inside the Model Folder, Inside the class Person should be like this.

Or you may copy this code.

namespace UsingGridMvc.Models
{
public class Person
{
public string Fname { get; set; }
public string Lname { get; set; }
public int Age { get; set; }
public DateTime Bdate { get; set; }
}
}
Step 9: Go back to

 Your Controller which is DisplayDataController.cs

Add the ff. Code. In this demo I just use this kind of code.

As you can see I declare the var person = new List<Person> (); and I created some dummy data which I added into the person (List). then return into our View.

You may Copy this Code:

public class DisplayDataController : Controller
{
// GET: DisplayData
public ActionResult Index()
{
var person = new List<Person>();
var data1 = new Person {
Fname = "John",
Lname = "Wane",
Age = 26,
Bdate = DateTime.Parse("02/26/1988")
};
person.Add(data1);
var data2 = new Person
{
Fname = "Bill",
Lname = "Cuber",
Age = 28,
Bdate = DateTime.Parse("01/01/1980")
};
person.Add(data2);
var data3 = new Person
{
Fname = "Mike",
Lname = "Burger",
Age = 22,
Bdate = DateTime.Parse("05/22/1990")
};
person.Add(data3);
return View(person.ToList());
}
}

 Step 10: Go back you your Index.cshtml Script which located in View Folder inside the DisplayData folder.

Paste the ff. code.

@using GridMvc.Html
@model List<UsingGridMvc.Models.Person>
<h2>Display Data and Sortable column with Grid MVC</h2>
@Html.Grid(Model).Columns(columns =>
{
columns.Add(data => data.Fname).Titled("First Name").SetWidth(110);
columns.Add(data => data.Lname).Titled("Last Name").SetWidth(110);
columns.Add(data => data.Age).Titled("Age").Sortable(true);
columns.Add(data => data.Bdate).Titled("Birth Date").Sortable(true);
}).WithPaging(20)

 Script and Code should be like this.

 

Note: Kindly read the documentation and tutorials for Grid.Mvc so you can manipulate the design size etc. regarding Grid.Mvc.

 

Step 11: Rebuild the project and Hit ctrl+f5 to run the program w/o debugging.

It should be like the image below.

 

NOTE: In this demo our sorted list or column are Age and Birth Date

Click Age column the Image should be like this.

There you go hope you enjoy and learn something.

Rock and Roll! #GodBless... #HappyCoding