SlickGrid - Versatile, Customizable, FAST

SlickGrid is a jQuery/javascript grid framework. It has many options and can create rich grids with custom controls and displays. You can also bind it to a javascript object array, where each object in the array represents a row in the grid. When you edit the data in the grid, your bound data array will be updated in real-time. Once you figure out how to use it, it is definitely one of the most versatile and customizable grids out there (and I checked out quite a few).

Its other main selling point is that it is FAST. And I mean real fast. You can load it with one million rows and it will still perform nicely. This is because it uses a dynamic loading engine so all your data is not really loaded at once. It detects scrolling and dynamically loads data AS you scroll. Pretty clever, but one caveat is that you can’t scroll too fast or you may ‘miss’ data. The control does not show rows until you slow to a reasonable scroll rate so it can keep up with its loading.

Before continuing, I’d recommend you review the examples to get a feel for the true power and capabilities of this grid. No other grid can compare to what SlickGrid has to offer.

So with all that power, are there any downsides? Well, yes. There is really only one major gotcha that might be a deal-breaker in selecting this grid for your project; it does not support variable row heights. That’s a big gotcha. With an HTML table, if your content wraps, it automatically adjusts the cell/row height. But SlickGrid is not based on an HTML table, it is made up completely of divs. It draws the grid by using a single row height variable and the row number for quick position calculations, and thus a quick rendering time. This is pretty crucial given the dynamic data loading that takes place as you scroll. SlickGrid handles the problem of content extends beyond a cell’s width by automatically truncating it (e.g. “This is a long sentence” becomes “This is a long…”). You CAN override the renderer, but it’s a lot of work and would slow down the grid’s rendering process. For more information on what’s involved with the override, take a look at this question/response from Stack Overflow.

The only other downside might be is that there is a bit of a learning curve. There is no real documentation, just the examples on the site. So you’ll have to go through the examples, find functionality that basically matches what you’re trying to achieve, and then view the source to see how it’s done.

On that note, I’ll now document a few techniques and thus hopefully save some pain, and you can also get a feel for how the grid works.

Basic Setup

It’s as simple as defining the columns, data, and any options, then rendering:

The HTML:

Flag a Row as Edited

Flag a row as changed, which could be useful for only sending back changed data to the server.

First, add an isChanged flag to the rows in your data object:

var data = [ {fname:"Jimmy", lname:"Page", isChanged:false }, {fname:"Ritchie", lname:"Blackmore", isChanged:false }, {fname:"Michael", lname:"Schenker", isChanged:false } ];

Then subscribe to the onCellChange event and update the flag:

sgGrid.onCellChange.subscribe(function (e, args) { args.item.isChanged = true; }

Send Data Back to the Server for an Update

This doesn’t really have much to do with the grid itself, but it’s important to cover how one can get data edited in the grid posted back to the server. I achieved this by creating a form below the grid with a single hidden input and a button labeled ‘Save’. When the user clicks the “Save” button a method is called that stringifies the data object array bound to the grid (stringify converts it to json), writes that to the hidden input, and then submits the form. Since all browsers don’t support JSON/have a stringify method at this time, I use Douglas Crockford’s JSON Library.

If you wanted to send back less data, then you could iterate through and check the isChanged flag and only send back data for rows that have changed.

Create a Toggle Control

This will allow you to create a cell that can serve as a value-toggle control. Each time the user clicks the cell, it toggles to the next value in a list.

Subscribe to the onClick event and if the clicked cell matches the target, handle it:

sgGrid.onClick.subscribe(function(e) { var cell = sgGrid.getCellFromEvent(e); if (cols[cell.cell].id == "size") { var states = { "small": "medium", "medium": "large", "large": "small" }; data[cell.row].size = states[data[cell.row].size]; sgGrid.updateRow(cell.row); e.stopPropagation(); } }

Row Conditional Formatting

This example changes a row’s background color, depending on the value of a cell in the row. First you must set a formatter in the columns array:

var cols = [ {id:"fname", name:"First Name", field:"fname", formatter: fnameFormatter }, {id:"lname", name:"Last Name", field:"lname"} ];

Then define your fnameFormatter method:

function fnameFormatter(row, cell, value, columnDef, dataContext) { // if name is 'unknown', then change the entire row's font color to red if(value == "unknown") { $('div[row="'+row+'"]').children().css('color', 'red'); } }

This also demonstrates that you can use jQuery directly and don’t have to necessarily rely on native grid methods to make changes.

Set Custom CSS on a Column

Just add a cssClass key to your column definitions:

var cols = [ {id:"fname", name:"First Name", field:"fname", cssClass: "col-fname" }, {id:"lname", name:"Last Name", field:"lname", cssClass: "col-lname" } ];

So there are quite a few examples that should hopefully give you an idea of what it’s like working with the grid. It’s not rocket science, but there is a learning curve in figuring out how to achieve certain effects. Aside from the one issue of no native support for variable row height, it’s a very versatile and highly configurable grid.

Endertech is a Los Angeles Web Developer able to provide solutions for your Web Design development needs. Contact us for a free consultation.