Follow these steps to install and configure SlickGrid.
- Download the latest zip from https://github.com/mleibman/SlickGrid
- Extract the zip file
- Move the SlickGrid-master folder to your Web servers document root
You should now be able to view the example pages. For example, to view the basic SlickGrid page, go to http://www.example.com/SlickGrid-master/examples/example1-simple.html.
Following is an example of how to add a new column to the example1-simple.html table.
- Open the example1-simple.html file and save the file as stage.html
- Go to http://www.example.com/SlickGrid-master/examples/stage.html to view stage.html in a browser
Add a column to the table, in the stage.html file, add the following:
var columns = [
{id: "title", name: "Title", field: "title"},
{id: "new-column", name: "New Column", field: "NewColumn"}
];
List some data in the New Column:
$(function () {
var data = [];
for (var i = 0; i < 500; i++)
{ data[i] =
{
title: "Task " + i,
NewColumn: "test"
};
}
}
When first getting comfortable with SlickGrid, we typically start by bringing up http://www.example.com/SlickGrid-master/examples/stage.html in a browser. However, we probably will need to use SlickGrid in some other directory, such as http://www.example.com/stage.html. Let move stage.html to the document root of our Web server. If we request the page is a browser, the grid will not work. We need to make some adjustments to the markup in the stage.html file. Basically, we are just adding SlickGrid-master to the directory path for the CSS and JS files.
<link rel="stylesheet" href="SlickGrid-master/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="SlickGrid-master/css/smoothness/jquery-ui-1.8.16.custom.cs" type="text/css"/>
<link rel="stylesheet" href="SlickGrid-master/css/examples.css" type="text/css"/>
<script src="SlickGrid-master/lib/jquery-1.7.min.js"></script>
<script src="SlickGrid-master/lib/jquery.event.drag-2.2.js"></script>
<script src="SlickGrid-master/slick.core.js"></script>
<script src="SlickGrid-master/slick.grid.js"></script>
Add this script to enable the feature to drag columns around the grid.
<script src="SlickGrid-master/lib/firebugx.js"></script>
<script src="SlickGrid-master/lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="SlickGrid-master/lib/slick.formatters.js"></script>
<script>
function formatter(row, cell, value, columnDef, dataContext) {
return value;
}
var options = {
editable: false,
enableAddRow: false,
enableCellNavigation: true
};
</script>
If we want to set the default width of a column, add width to the var column.
var columns = [
{id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", formatter: formatter}
];
To add drop-down menu's to the header, add the following markup:
<link rel="stylesheet" href="SlickGrid-master/plugins/slick.headermenu.css" type="text/css">
<style>
.slick-header-menu {
border: 1px solid #718BB7;
background: #f0f0f0;
padding: 2px;
-moz-box-shadow: 2px 2px 2px silver;
-webkit-box-shadow: 2px 2px 2px silver;
min-width: 100px;
z-index: 20;
}
.slick-header-menuitem {
padding: 2px 4px;
border: 1px solid transparent;
border-radius: 3px;
}
.slick-header-menuitem:hover {
border-color: silver;
background: white;
}
.slick-header-menuitem-disabled {
border-color: transparent !important;
background: inherit !important;
}
.icon-help {
background-image: url(../images/help.png);
}
</style>
<script src="SlickGrid-master/plugins/slick.headermenu.js"></script>
for (var i = 0; i < columns.lenght; i++) {
columns[1].header = {
menu: {
items: [
{
iconImage: "../images/sort-asc.gif",
title: "Sort Ascending",
command: "sort-asc"
}
]
}
};
}
Did you find this article helpful?
If so, consider buying me a coffee over at