New on DHTMLGoodies.com:

DHTML Chess Wordpress Plugin (Beta) . Participate in the beta testing of the DHTML Chess for WordPress plugin, and receive a free Commercial License worth USD99.

DHTMLGoodies Grid

Demo with remote data | Demo with static data

Bookmark and Share

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:

<script type="text/javascript" src="js/external/mootools-core-1.3-full-compat.js"></script> <script type="text/javascript" src="js/dg-grid-all.js"></script> <link rel="stylesheet" href="css/grid.css" type="text/css">

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

var grid = new DG.Grid({
  title : 'Grid demo',
  height : 400,
  els : {
    parent : 'gridContainer'
  },
  behaviour : {
    resizable : false,
    closable : false,
    minimizable : false
  },
  listeners : {
    'viewPerson' : viewPerson,
    'load' : function(obj, gridObj){
      gridObj.setStatusText('Count: ' + gridObj.getCountRows());
    },
    'add' : function(obj, gridObj){
      gridObj.setStatusText('Count: ' + gridObj.getCountRows());
    },
    'preview' : previewElement,
    'click' : clickOnData,
    'dblclick' : dblClickOnData
  },

  stretch : true,

  defaultSort : {
    key : 'score',
    direction : 'asc'
  },
  statusBar : {
    visible : true
  },

  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 : 90,
      hidden : true,
      key : 'zip',
      sortable : true,
      removable : true,
      heading : 'Zip code'
    }
  ],
  remote : {
    url : 'scripts/dhtmlgoodies-grid/datasource/grid-data.php',
    pleaseWaitMessage : 'Loading content...'
  }
});

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:

<script type="text/javascript" src="js/grid-autoload.js"></script>

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

<table id="myTable" class="table-dg-grid" width="500" gridHeight="400">

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

Comments

Cinema
Interesting and works. Some of us don't use PHP; how about providing some plain old classic ASP accessing an Access database for the data source?
Cinema at 04:59PM, 2011/11/07.
Admin comment
DHTMLgoodies
Hi Cinema,

PHP is not required. It's just an example for this page.

You can use whatever server side language you want as long as you output data as JSON.Just change the url and send data as JSON from your ASP page.
DHTMLgoodies at 05:50PM, 2011/11/07.
Sam
Grid is not working in IE. Error is: Invalid argument mootools-yui-compressed.js and this.els.resizeHandles is null or not an object dg-grid-all.js
Sam at 11:20PM, 2011/11/14.
Admin comment
DHTMLGoodies
Sam,

A fix has been added for IE.
DHTMLGoodies at 04:12AM, 2011/11/15.
Sam
Thanks, top right menu is still missing to hide/unhide table columns in IE.
Sam at 05:06AM, 2011/11/15.
Admin comment
DHTMLGoodies
Sam,

That has also been fixed now :)
DHTMLGoodies at 08:17AM, 2011/11/15.
SAM
Great thanks, Scroll bars are also not being appeared in IE.
SAM at 10:15AM, 2011/11/15.
Nick
Scrollbars work in IE9 but not in IE8 or below.
Nick at 10:23PM, 2011/11/16.
Arbyter
looks like great work to me!! i am interested in the plain table to grid feature; where can i download grid-autoload.js ?
Arbyter at 08:31AM, 2011/11/21.
Admin comment
DHTMLGoodies
Arbyter,

grid-autoload.js has now been included in the zip file.

ps! If you want a title, use the <caption> tag inside the table.

Example:
<table id="myTable" class="table-dg-grid" width="500" gridHeight="400">
<caption>Users</caption>
<tr>
<td>First name</td>
<td>Last name</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
DHTMLGoodies at 11:03AM, 2011/11/21.
Gustavo
Como hacer para que en internet explore 8 o menor se puedan ver la barras de desplazamiento

Gracias
Gustavo at 12:20PM, 2011/12/05.
Mike Cabolet
Hi, Can you pls show me your asp page where you create the grid on.
Thanks
Mike


<a href="#comment1126">SAM wrote:</a>
Great thanks, Scroll bars are also not being appeared in IE.


Mike Cabolet at 01:51PM, 2011/12/05.
Hammad
i am unable to display long data from DB,, whose data Type is text or big string, how can i put big strings in it, like address, description etc
Hammad at 02:19AM, 2011/12/22.
SGIA
Hi, nice component.

2 questions:
How do I get the grid to refresh it's data manually?

How can I alter the remote data URL and then retrieve using the new parameters?

Thanks
SGIA at 04:48AM, 2012/01/07.
Dan
Looks like a great widget. I've got a site that utilizes you drag and drop to columns demo. I've modified that a little and it is working great to drag LI elements between different ULs that represent different priorities for task. No I'd like each UL to be replaced by a grid. And be able to drag records between the grids like we do in the drag and drop to columns. Knowing both demos do you think this is doable? Also, can I have more than one grid on a page?
Thanks!
Dan at 02:23PM, 2012/01/13.
Joel Silva
How do I adapt to classic ASP vbscript?
Joel Silva at 01:20PM, 2012/01/15.
Sam
Separator is coming only in header of grid. Can i add border as separator in data section of grid as well?
Sam at 02:14PM, 2012/03/10.
Khurram
'click' : clickOnData event in firefox doesn't work. Can i get any help?
Khurram at 04:43AM, 2012/03/12.
Admin comment
DHTMLGoodies
SAM,

You can add this css:

.DG-grid-data-column{
border-right:1px solid #EEE;
}

to get a border between each column.

I'm using the grid here:
http://www.dhtmlgoodies.com/scripts/dhtml-chess-3/demo/game-viewer.html
You can see an example of how it looks in that demo.

DG-grid is part of larger framework I have been working on since last summer. I hope to release it here sometime soon.

Khurram,
The click event works in my Firefox. Do you get any error messages ?
DHTMLGoodies at 03:54PM, 2012/03/13.
Khurram
I have tried in Firefox, Safari and Chrome but click doesn't work. I just want to open new window with the specific row id as parameter on click. Please help.
Khurram at 10:38PM, 2012/03/13.
Khurram
Click event is working fine accross the browsers my mistake. How can i get the cell data i have clicked. I tried as:

'click' : function (obj) {alert("data "+obj);} It says [object Object]. Please help me to get the cell value.
Khurram at 02:44PM, 2012/03/14.
Admin comment
DHTMLGoodies
Try

'click' : function (obj) {alert(obj);}

instead

You cannot alert string + object

If you have Firefox, I will suggest using the Firebug plugin and console.log instead of alert

example:

'click' : function (obj) {console.log(obj);}
DHTMLGoodies at 03:48PM, 2012/03/14.
Khurram
'click' : function (obj) {console.log(obj);} returns me LOG: [object Object] in IE and Object { field1="value1", field2="value2", field3="value3", more...} in Firefox console . How can i get field name or value?
Khurram at 10:07PM, 2012/03/14.
Khurram
'click' : function (obj) {alert(obj.field);} returned me the value. Great help!!!

How can i bind a text field with grid to search data on blur?
Khurram at 10:15PM, 2012/03/14.
Khurram
Can i change mouse over color?
Khurram at 01:36PM, 2012/03/26.
Marina
Hi, is there a way to a) make the grid editable and b) integrate it with a form be able to save column values into a MySQL database? TIA.
Marina at 05:32PM, 2012/03/26.
Nauman
How can i change row color on mouseover?
Nauman at 11:28PM, 2012/03/27.
Khurram
Dear Support, when i try to hover to one row then it applies to one cell only:

$('.DG-grid-data-odd-row').css('background-color', '#F00');

Please help me to find out div on which hover should be applied.
Khurram at 05:02AM, 2012/03/30.
Omar
Hi ! Very nice Grid. This one implement most of the functionalities I was looking for. Except one... freezing columns.
Is it possible ?
Omar at 07:07AM, 2012/04/10.
Peter Nguyen
Hi Admin,

Pls. help me a asp data example code (grid-data.asp). I am a beginner and try code but no success.

Thanks & regards,
Peter Nguyen at 01:39AM, 2012/04/18.
Sam
Kindly update how to do row rollover.
Sam at 03:35AM, 2012/05/31.
Ingrid
Hi

Thanks a lot for the grid-autoload.js.
If I have tablecells with a lot of text in it, how do I get a line break?

Thanks & regards
Ingrid at 12:03AM, 2012/06/13.
bxl
sorting by date looks like this:

Apr 04, 2012 09:54:17 AM
Jan 20, 2004 01:03:16 PM
Jun 18, 2012 11:50:55 AM

...alpha sorting by month. is there a way to tell it to sort on some other datum inside the data tuple, and display the date as formatted?
bxl at 03:09PM, 2012/06/18.
bxl
renderer, maybe?
bxl at 03:11PM, 2012/06/18.
FREDRENAULT
Hello,
I would like to know if it will be possible to have pagination in this grid ?
Thanks
FREDRENAULT at 08:45AM, 2012/06/27.
Andreas
May it possible to highlight each marked row?
Andreas at 04:09AM, 2012/07/01.
kd12
Good script but no more support :-(
kd12 at 01:34PM, 2012/07/30.
SAM
Can we get column name which is clicked for sorting?
SAM at 12:31AM, 2012/08/22.
SAM
How can we use public method "getConfigObject"? Can I have any example to preserve the grid state for next use.
SAM at 06:59AM, 2012/08/22.
boner
how can i use html table tag for data ?
boner at 01:45AM, 2013/05/17.
Dev
With Chrome (tested with version 36), if you include DHTMLGoodies Grid on an HTML page with a number input type (like this : <input type="number" name="test" id="test" min="2" max="10"> ), the spinner of the input works no more.
Dev at 06:05AM, 2014/08/22.
J Games
I like the script. It is very useful. I have it working in static but cannot seem to get the remote url working. I plug in the remote url link . But nothing happens. What's wrong?
J Games at 08:04AM, 2015/01/28.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com