Click here to Skip to main content
15,798,672 members
Articles / Web Development / ASP.NET

Using a SlickGrid within an ASP.NET MVC 3 Application

Rate me:
Please Sign up or sign in to vote.
4.70/5 (9 votes)
12 Apr 2012CPOL3 min read 81.7K   2.2K   22   15
This article demonstrates how to use SlickGrid within an ASP.NET MVC 3 application.


This article is intended to be a quick start guide to implementing a grid within an ASP.NET MVC application. Keeping it simple is key here so I don't want to get distracted with code that's not related to the grid, so with this in mind a number of best-practice design liberties have been taken.

I've tried to use as little code as possible to demonstrate how to drive the grid from an MVC controller by passing JSON-encoded data.

The source code was created with Visual Studio 2010 and tested on Windows 7 but it should compile with Mono and run on Linux/OS X machines too.


There are many excellent JavaScript grid components available that I could have used but I've chosen SlickGrid as it is established, actively developed, and has great documentation. In addition to this, SlickGrid has a reputation for being lightning fast.

Create a new ASP.NET MVC Web Application

Open Visual Studio and create a new ASP.NET MVC 3 Application:

Create the ASP.NET MVC project

When prompted, select "Internet Application" as the template and the view engine as "Razor".

Add SlickGrid to the project

SlickGrid is currently hosted on GitHub and can be downloaded from here.

Download and extract the archive and copy the following files into the project Scripts directory and add them to the project:

  • slick.core.js
  • slick.grid.js

SlickGrid also has a dependency on jquery.event.drag, this should be included in the above archive so copy that into the Scripts folder and add it to the project as well:

  • jquery.event.drag-2.0.min.js

Finally add the SlickGrid stylesheet to the Content directory and add it to the project:

  • slick.grid.css

Create some dummy data in the Controller (HomeController.cs)

The first thing to do is define a class for the data type we want to display in the grid. To keep things simple, the following class is defined in HomeController.cs:

public class Player
	public int ShirtNo { get; set; }
	public string Name { get; set; }

Now a dummy method is implemented to return data that can be displayed in the grid. Again this is implemented in the HomeController class within HomeController.cs:

public string ArsenalX11()
    List<Player> theSquad = new List<Player>{
        new Player{ShirtNo=4, Name="Mertesacker"},
        new Player{ShirtNo=5, Name="Vermaelen"},
        new Player{ShirtNo=7, Name="Rosicky"},
        new Player{ShirtNo=8, Name="Arteta"},
        new Player{ShirtNo=10, Name="Van Persie"},
        new Player{ShirtNo=11, Name="Santos"},
        new Player{ShirtNo=13, Name="Szczesney"},
        new Player{ShirtNo=14, Name="Walcott"},       
        new Player{ShirtNo=17, Name="Song"},
        new Player{ShirtNo=19, Name="Wilshere"},
        new Player{ShirtNo=28, Name="Gibbs"}
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    return serializer.Serialize(theSquad);

JavaScriptSerializer requires System.Web.Script.Serialization, to add this, right click on JavaScriptSerializer and Resolve.

We're returning JSON data here as it's a simple format that can be fed directly into SlickGrid so this takes us nicely onto the next step.

Define the grid in a JavaScript file

Create a new JavaScript file in the Scripts directory and call it SlickGridTest.js.

This JavaScript in the SlickGridTest.js file will do the following:

  • Define the grid columns
  • Request the data from the HomeController

The JSON encoded data from the controller is loaded via the jQuery call getJSON().

var grid;
var columns = 	[
					{ id: "ShirtNo", name: "ShirtNo", field: "ShirtNo" },
					{ id: "Name", name: "Name", field: "Name" },          

var options = {
    enableCellNavigation: true,
    enableColumnReorder: false

$(function () {
    var myData = [];
    $.getJSON('/Home/ArsenalX11', function (data) {
        myData = data;
        grid = new Slick.Grid("#teamGrid", myData, columns, options);

Note that the columns are hard coded for simplicity, but they could easily be setup via data received from the controller as per the content. Refer to the SlickGrid documentation for more information.

With the JavaScript in place, the last task is to define the grid in the Home View.

Add the grid to the View (Home\Index.cshtml)

The final step is to display the grid within the view, this requires adding the references to SlickGrid and the above SlickGridTest.js file:

<link href="@Url.Content("~/Content/slick.grid.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.event.drag-2.0.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/slick.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/slick.grid.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/SlickGridTest.js")" type="text/javascript"></script>

Adding the grid is now simply a case of specifying it within a div:

<table width="100">
      <div id="teamGrid" style="width:400px;height:300px;"></div>


Press F5 to run the application and see the grid in action:

Run the Application


  • 11 April 2012: Initial post.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Software Developer
United Kingdom United Kingdom
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

QuestionExcellent tutorial Pin
Member 1204553419-Jan-16 3:29
Member 1204553419-Jan-16 3:29 
Questiondynamic column names Pin
AnishManShrestha1-Sep-14 2:03
AnishManShrestha1-Sep-14 2:03 
QuestionExcellent for Started Pin
hk_hector5-Jun-13 13:51
hk_hector5-Jun-13 13:51 
QuestionExcellent for Started Pin
hk_hector5-Jun-13 13:49
hk_hector5-Jun-13 13:49 
QuestionThanks! Pin
ArsenalFan90924-Apr-13 5:57
ArsenalFan90924-Apr-13 5:57 
QuestionQuestion about ? Pin
Chamiss18-Mar-13 11:17
Chamiss18-Mar-13 11:17 
QuestionExcellent Article Pin
raajesshh4-Feb-13 2:33
raajesshh4-Feb-13 2:33 
Questionhi Pin
shalinibharani1-Jun-12 2:56
shalinibharani1-Jun-12 2:56 
BugDidn't work with IE8, no problem with IE9, Firefox or Chrome. Fixed after some testing and thinking. Pin
R. Zwinkels10-May-12 11:26
R. Zwinkels10-May-12 11:26 
Questiongood article Pin
Member 87543775-May-12 1:08
Member 87543775-May-12 1:08 
AnswerRe: good article Pin
Matthew Laver7-May-12 23:13
Matthew Laver7-May-12 23:13 
SuggestionRe: good article Pin
Hal Diggs28-Jun-12 11:02
professionalHal Diggs28-Jun-12 11:02 
GeneralRe: good article Pin
ase69s29-Nov-12 1:29
ase69s29-Nov-12 1:29 
+1 to Editable Grid Example Smile | :)
AnswerRe: good article Pin
Member 97024538-Jan-13 7:41
Member 97024538-Jan-13 7:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.