- Download the latest zip from https://github.com/mleibman/SlickGrid
- Extract the zip file
- 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.
Did you find this article helpful?
If so, consider buying me a coffee over at 