How to install and configure SlickGrid

Home > Search > How-to
  by

Follow these steps to install and configure SlickGrid.

  1. Download the latest zip from https://github.com/mleibman/SlickGrid
  2. Extract the zip file
  3. 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.

  1. Open the example1-simple.html file and save the file as stage.html
  2. 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"
        }
      ]
    }
  };
}

 



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