FreeKB - Visual Studio Display data from a SQL database in SlickGrid
Visual Studio - Display data from a SQL database in SlickGrid

  1. Download the latest zip from
  2. Extract the zip file
  3. Move the SlickGrid folder to a directory on your Web server

To view the basic SlickGrid page, go to 

CSS and JavaScript files

Drag the following files from the SlickGrid folder to the Scripts folder in Visual Studio:

  • slick.core.js
  • slick.formatters.js
  • slick.grid.js
  • slick.headermenu.js
  • slick.rowselectionmodel.js
  • jquery.event.drag-2.0.min.js
  • smoothness/images/ui-*.png

Drag the following file from the SlickGrid folder to the Content folder in Visual Studio:

  • slick.grid.css
  • slick.headermenu.css
  • smoothness/jquery-ui-1.8.16.custom.css


Because this tutorial will be retrieving data from SQL, follow the steps in the article on how to display data from SQL in MVC. For the purpose of this tutorial, let's say the Controller is RecordsController.cs, and the View is /View/Records.


Add the following in the RecordsController.cs. The important thing to notice here is that the public JsonResult name is GetSlickGridData.

public JsonResult GetSlickGridData()
    var slickGridData = db.Products.ToList();
    var jsonResult = Json(slickGridData, JsonRequestBehavior.AllowGet);
    jsonResult.MaxJsonLength = int.MaxValue;
    return jsonResult;


Create a JavaScript file in the Scripts folder named SlickGridApp.js. This is where we will list the columns in SQL that our SlickGrid will display data from. In this example, there is a column in SQL named column1. 

Because the RecordsController.cs contains a public JsonResult named GetSlickGridData, the getJSON call is /application_name/Records/GetSlickGridData. Replace application_name with the name of your application.

var grid;
var columns = [
    { id: "column1", name: "column1", field: "column1", width: 100 }
var options = {
    editable: true,
    enableAddRow: true,
    enableCellNavigation: true,
    asyncEditorLoading: false,
    autoEdit: false

$(function () {
    var slickdata = [];
    $.getJSON("/application_name/Products/GetSlickGridData", function (items) {
        for (var i = 0; i < items.length; i++) {
            slickdata[i] = {
                column1: items[i].column1
    grid = new Slick.Grid("#myGrid", slickdata, columns, options);
    grid.setSelectionModel(new Slick.RowSelectionModel());
    grid.setActiveCell(0, 0);



Add the following to /View/Records/Index.cshtml file:

@model IEnumerable<aqi.Models.Records>

    <link href="@Url.Content("~/Content/slick.grid.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/smoothness/jquery-ui-1.8.16.custom.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/slick.headermenu.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.event.drag.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/slick.core.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/slick.formatters.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/slick.grid.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/slick.headermenu.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/slick.rowselectionmodel.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/SlickGridApp.js")" type="text/javascript"></script>

        html, body {
            margin: 0;
            padding: 0;
            background-color: white;
            overflow: auto;

        .fill_browser {
            position: absolute;
            top: 50px;
            left: 0;
            right: 0;
            bottom: 0;


    <div id="myGrid" class="fill_browser"></div>


One of the issues that occurs is that the text in the header column does not have padding under the text. This occurs because the slick.grid.css has the following. Removing height and line height resolves this issue.

.slick-header-column.ui-state-default {
. . .
height: 16ppx;
line-height: 16px;
. . .



If the SlickGrid does not appear as expected, check the Web Inspector console for errors.

Add a Comment

We will never share your name or email with anyone. Enter your email if you would like to be notified when we respond to your comment.

Please enter e4338 in the box below so that we can be sure you are a human.


Web design by yours truely - me, myself, and I   |   |