New on DHTMLGoodies.com:

DHTML Chess is now available for WordPress at WordPressChess.com.

DHTMLGoodies Grid

Demo with remote data | Demo with static data

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Download

You can download the DHTML Goodies Grid script from here.

Demo

Click on column headings to sort
Hold mouse down on column header to rearrange
Use menu (top right corner of columns and top right corner of widget) to show/hide columns
Place mouse pointer between columns to resize
Move mouse pointer to the bottom edge to resize the Grid.

Configuration

Include files:

You need to include the following files:

Creating a Grid

You create a new grid by calling DG.Grid with a config object.

var grid = new DG.Grid({
...
...
});

How to build the Config object

This is an overview of the config object:

General properties

title: (string) : Title inside title bar above the grid
height: (number) : Height of the grid
minHeight: (number) : Minimum height of the grid (if behaviour.resizable is set to true)
maxHeight: (number) : Maximum height of the grid (if behaviour.resizable is set to true)
stretch: (true | false) : True to let last column fill up remaining space of the grid.
icon: (string/url) : Path to icon shown in the title bar.
titleBar: (boolean) : True to have a title bar, false to hide the title bar.

els

Code example:

els : {
parent : 'gridContainer'
}

els.parent is used to specify where to render the grid. In this example, the grid will be inserted inside <div id="gridContainer"></div> on my page.

data

Data can be sent to the grid static, by using the "data" property of remote from the server by specifying a value for remote.data

This is an example of static data:

var grid = new DG.Grid({
  ...
  ...
  data : [
  {
     firstname : 'John',
     lastname : 'Doe',
     zipcode : 'AF-2034'
  },
  {
     firstname : 'Anna',
     lastname : 'Doe',
     zipcode : 'ZA-12323'
  } ]
});

Here, we have an array of two people. A person is described by keys and values, example: key "firstname" with value "John".

Data can also be loaded from the server. To do this, you need to specify an url, example:

var grid = new DG.Grid({
  ...
  ...
  remote : {
     url : 'datasource/get-data.php',
     params : { 'param1' : 'value1' }   }
});

In this example, an Ajax request will be sent to datasource/get-data.php along with the optional parameters specified in the "params" object.

The "remote" object also supports the attribute "refreshInterval" which is the number of seconds between each reload of data from server. This is default turned off.

get-data.php on the server should return data in this format:

{
  data : [
  {
     firstname : 'John',
     lastname : 'Doe',
     zipcode : 'AF-2034'
  },
  {
     firstname : 'Anna',
     lastname : 'Doe',
     zipcode : 'ZA-12323'
  } ]
}

columnConfig

The "columnConfig" Array is used to specify how to handle the data sent to the grid.

Example of a columnConfig object for the data above:

columnConfig : [
    {
        resizable : false,
        width : 40,
        sortable : false,
        txt : 'View',
        event : 'viewPerson',
        movable : false
    },
    {
        width : 120,
        key : 'firstname',
        heading : 'First name',
        sortable : true,
        sortWith : 'lastname'
    },
    {
        width : 120,
        key : 'lastname',
        sortable : true,
        heading : 'Last name',
        sortWith : 'firstname'
    },
    {
        width : 50,
        key : 'zip',
        sortable : true,
        heading : 'Zip Code',
        hidden : true,
        removable : true
    }
]

With this config, we will display a link in the first column, first name in the second column and last name in the third column. Zip code will initially be hidden since "hidden" is set to true.

When configuration a column, you have access to these properties:

heading: (string): Text for the column heading.
key: (string): Reference to key in the data object
width: (number): Width of column in pixels
minWidth: (number): Minimum width of column (Optional)
maxWidth: (number): Maximum width of column (Optional)
movable: (true | false): True to make this column movable (Drag and drop)
removable: (true | false): True to be able to remove the column.
sortable: (true | false): True to make this column sortable
sortWith: (key): Use a second key when sorting. If two values are equal (Example: Two persons have the last name "Smith"), the value of the second key will determine how they are sorted. (Smith, Anna will appear before Smith, Jeffrey)
txt: (string): Static text to display in the column. Example: The string "View" for the first column above.
event: (string): Name of a event to fire when clicking on the cell. Example: "viewPerson" for the "view" column above.
align: ("right"): Specify right if you want to right align text. Only supported arguments are "left" and "right"
renderer: (function): A function used to render values for the cells in this column. Example: renderer : function(val, dataRecord){
   if(val == 0){
     return val;
   }else if(val > 0){
     return '<span style="color:red">' + val + '</span>';
   }else{
     return '<span style="color:green">' + val + '</span>';
   }
} Instead of showing the value directly, the grid will instead show the value returned by this function. If the value sent to this function is 5, it will be displayed in a red color. If it is -2, it will be displayed in green.
The data record will be sent to the renderer function as second argument.

Listenes

Example of a listeners object:

listeners : {
  'viewPerson' : viewPlayer,
  'renderdata' : function(obj, gridObj){
    gridObj.setStatusText('Number of players ' + gridObj.getCountRows());
  },
  'add' : function(obj, gridObj){
    gridObj.setStatusText('Number of players ' + gridObj.getCountRows());
  },
  'click' : clickOnData,
  'dblclick' : dblClickOnData
}

Inside the listeners object, you specify function to call when an event is fired. The script supports the events below in addition to the ones you have defined in the columnConfig object.

add : Triggered when you add data to the widget
load : Triggered when data has been loaded from the server
click : Triggered when you click on a data cell.
dblclick : Triggered when you double click on a data cell.
renderdata : This event will be triggered every time data is rendered. This will also happen when data is re-rendered after sorting a column.

Behaviour:

The behaviour object specifies behaviours of the grid widget. These are the available attributes :

minimizable : (true | false) : True if you want to be able to minimize/maximize the grid.
closable : (true | false) : True if you want to be able to close/destroy grid.
resizable : (true | false) : True if you want to be able to vertically resize the grid.
resizable : (true | false) : True if you want to be able to vertically resize the grid.

Code example:

behaviour : {
resizable : true,
closable : false
}

defaultSort

defaultSort can be used to specify how to initially sort the grid.

Code example:

defaultSort : {
key : 'lastname',
direction : 'asc'
},

With this code, the grid will be initially sorted by "lastname" in ascending order. If you want to sort in descending order use "desc" instead of "asc".

Public methods

setTitle(string) : Set new title for the title bar
getConfigObject : This will return an up-to-date config object for the Grid, i.e. the object you can pass to the constructor of DG.Grid(). This may be useful in case you want to preserve the state of the Grid to the next time user visits the page.
setStatusText(String) : Set new title for the status bar.
showStatusIcon(String / url) : Show icon in status bar.
hideStatusIcon() : Hide status bar icon.

CSS Layout

You can change the layout of the grid by modifying CSS classes.

CSS Selectors:

.DG-grid-data-cell : CSS for data cells
.DG-grid-data-odd-row : CSS for odd rows in the table
.DG-grid-data-even-row : CSS for even rows in the table
.DG-grid-header-container: CSS for the grid headers
.DG-grid-header-cell: CSS for the a header cell
.DG-grid-header-cell-over: Mouse over effect for header cell
.DG-grid-data-cell-menu: CSS class for the menu at the right hand side of column headers.
.DG-dashboard-item-titlebar: CSS class for the title bar.
.DG-dashboard-item-titlebar-controls: CSS class for the button container at top right side of title bar.
.DG-grid-movable-insertion-marker: When moving a column(Drag and Drop), an element with this class is used to indicate where the column will be inserted.

For more info, open css/grid.css in a text editor.

Complete code example

Convert plain HTML Tables to Grid

If you want to convert existing HTML Tables into a grid, include the file grid-autoload.js into your page:

And assign the tables you wish to convert to the CSS class "table-dg-grid". Example:

You can use the optional gridHeight property as shown above to set a fixed height for the grid

Comments

No one has commented this - be first!

Post your comment

Please wait...

Your name:
Your email:
Your website:
Don't have an avatar? Create one at Gravatar.com.

DHTMLGoodies Grid

Licensing

Download

Demo

Configuration

Include files:

Creating a Grid

How to build the Config object

General properties

els

data

columnConfig

Listenes

Behaviour:

defaultSort

Public methods

CSS Layout

Complete code example

Convert plain HTML Tables to Grid

Comments

Post your comment

Comment preview: