Wednesday, August 22, 2012

SlickGrid - Where to Start

I'm no documentation specialist or blogger, but someone's got to put this out. This is by no means a  SlickGrid tutorial.  It's more of a completely incomprehensive guide on how to get started messing around with it.

Include the following in the head of your html

CSS

SlickGrid/slick.grid.css - at a minimum so your columns don't overlap
SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css - to make it pretty
SlickGrid/examples/examples.css - to make it even prettier

JavaScript

SlickGrid/lib/jquery-1.7.min.js - this is a jQuery plugin afterall
SlickGrid/lib/jquery.event.drag-2.0.min.js - dependency of Grid class
SlickGrid/slick.core.js - core SlickGrid goodness
SlickGrid/slick.grid.js - Grid class

Create a div to hold the grid.

Make sure you include an ID and height. If there is no height, SlickGrid can't determine how to display the rows and you'll end up seeing nothing.

<div id="grid" style="width:600px; height:200px;"></div>

Define the grid's columns.

var columns = [
    {id: "column_1_id", name: "Column 1 Label", field: "column_1"},
    {id: "column_2_id", name: "Column 2 Label", field: "column_2"},
    {id: "column_3_id", name: "Column 3 Label", field: "column_3"},
    {id: "column_4_id", name: "Column 4 Label", field: "column_4"},
    {id: "column_5_id", name: "Column 5 Label", field: "column_5"},
];

Gather the data for the grid as an array. Just spoof it for now.

var data = [], i = 50;
while(i--){
    data[i] = {
        column_1: 'column 1, row ' + i,
        column_2: 'column 2, row ' + i,
        column_3: 'column 3, row ' + i,
        column_4: 'column 4, row ' + i,
        column_5: 'column 5, row ' + i
    };
};

Set the grid's options.

var options = {
    enableColumnReorder: false,
    enableGridNavigation: false
};

When the DOM's ready, instantiate a new SlickGrid.

Since you're obviously using jQuery, you can just call all this as a .ready() handler.

var grid = new Slick.Grid('#grid', data, columns, options);

That's it!

Now open up the source code and start reading.

1 comment:

  1. Hi

    Good article..Very Simple explanation.
    As you told It's more of a completely incomprehensive guide on how to get started messing around with it.

    Can you please provide features or advantages of this and also what we can do more with it.

    ReplyDelete