How to display data from a SQL database in SlickGrid in MVC

Home > Search > How-to
  by

 

  1. Download the latest zip from https://github.com/mleibman/SlickGrid
  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 http://www.example.com/SlickGrid/examples/example1-simple.html. 


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

SQL

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.


RecordsController.cs

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;
}

SlickGridApp.js

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);
    });
})

 


View

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

@model IEnumerable<aqi.Models.Records>

<html>
<head>
    <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>

    <style>
        html, body {
            margin: 0;
            padding: 0;
            background-color: white;
            overflow: auto;
        }

        .fill_browser {
            position: absolute;
            top: 50px;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>

</head>

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

 

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;
. . .
}

 


Troubleshooting

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 in the box below so that we can be sure you are a human.




Comments