Slickgrid getting started

Although the source of the first example is self-explanatory, it's worth to point out the basics of slickgrid. the following line:

var slickgrid = new Slick.Grid("#node", rows, columns, options);

Initializes-but doesn' t display-slickgrid, asigning its interface toslickgridVar. Now we can useslickgrid.someMethod()In order to interact with it.

Node

"#node"Points to the HTML element where the grid shoshould appear, typically being an empty<div>.

Rows

rowsIs an array of data objects. Example:

var rows = [    {        field_1: "value1",        field_2: "value2"    }, {        field_1: "value3",        field_2: "value4"    }];

Providing data to the grid is explained in more detail here

As it is passed by reference toSlick.Grid()Method, you can add and remove data objects to it without having to pass them again, but just refreshing slickgrid's data model and view:

slickgrid.updateRowCount();slickgrid.render();

The only exception to this is when deleting or replacing all data objects fromrows:

slickgrid.setData(rows); // A different, empty or sorted array.slickgrid.updateRowCount();slickgrid.render();

Dataview prevents having to modify the data for sorting and filtering purposes.

Columns

columnsIs an array of objects, having at least the following fields:

• Name-The name to be displayed in the view.
• Field-The field name used in the data row objects.
• ID-An unique identifier for each column in the model, allowing to set more than one column reading the same field.

Other fields include:

    resizable    sortable    minWidth    rerenderOnResize    headerCssClass

Example:

var columns = [    {        name: "Address",        field: "address"        id: "address", // In most cases field and id will have the same value.        sortable: true    },     {        name: "Rating, in %",        field: "rating" // This and the following column read the same data, but can present it in a different way.        id: "rating_percent",        resizable: false    },     {        name: "Rating, in stars",        field: "rating"        id: "rating_stars"    }];

Options

enableCellNavigation: trueAllows keyboard navigation..activeCSS property defines the appearance of the currently selected cell.

These are all the currently available options.

Events

An example:

slickgrid.onDblClick.subscribe(function(e, args){    var cell = slickgrid.getCellFromEvent(e);    var row = cell.row;    var column = slickgrid.getColumns()[cell.cell]; // object containing name, field, id, etc});

To date, these following events are available. They can be figured out by browsinghandleDblClick,handleKeyDown, Etc, source, sorted ded in slick. Grid. js.

Basic sorting

It can be achieved by listeningonSortMethod:

    slickgrid.onSort.subscribe(function(e, args){ // args: sort information.         var field = args.sortCol.field;        rows.sort(function(a, b){            var result =                 a[field] > b[field] ? 1 :                a[field] < b[field] ? -1 :                0            ;             return args.sortAsc ? result : -result;        });        slickgrid.setData(rows);        slickgrid.updateRowCount();        slickgrid.render();             });

Dataview

It allows to sort and filter the data without modifying it.