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){
&nbsp if(val == 0){
&nbsp &nbsp return val;
&nbsp }else if(val > 0){
&nbsp &nbsp return '<span style="color:red">' + val + '</span>';
&nbsp }else{
&nbsp &nbsp return '<span style="color:green">' + val + '</span>';
&nbsp }
}
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.

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.

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

Comments

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?

Cinemaat 11:59PM, 2011/11/07.

Admin comment

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.

DHTMLgoodiesat 12:50AM, 2011/11/08.

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

Samat 06:20AM, 2011/11/15.

Admin comment

Sam,A fix has been added for IE.

DHTMLGoodiesat 11:12AM, 2011/11/15.

Thanks, top right menu is still missing to hide/unhide table columns in IE.

Samat 12:06PM, 2011/11/15.

Admin comment

Sam,That has also been fixed now :)

DHTMLGoodiesat 03:17PM, 2011/11/15.

Great thanks, Scroll bars are also not being appeared in IE.

SAMat 05:15PM, 2011/11/15.

Scrollbars work in IE9 but not in IE8 or below.

Nickat 05:23AM, 2011/11/17.

looks like great work to me!! i am interested in the plain table to grid feature; where can i download grid-autoload.js ?

Arbyterat 03:31PM, 2011/11/21.

Admin comment

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>

Hi, Can you pls show me your asp page where you create the grid on.ThanksMike

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

Mike Caboletat 08:51PM, 2011/12/05.

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

Hammadat 09:19AM, 2011/12/22.

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

SGIAat 11:48AM, 2012/01/07.

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!

Danat 09:23PM, 2012/01/13.

How do I adapt to classic ASP vbscript?

Joel Silvaat 08:20PM, 2012/01/15.

Separator is coming only in header of grid. Can i add border as separator in data section of grid as well?

Samat 09:14PM, 2012/03/10.

'click' : clickOnData event in firefox doesn't work. Can i get any help?

Khurramat 10:43AM, 2012/03/12.

Admin comment

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.htmlYou 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 ?

DHTMLGoodiesat 09:54PM, 2012/03/13.

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.

Khurramat 04:38AM, 2012/03/14.

Click event is working fine accross the browsers my mistake. How can i get the cell data i have clicked. I tried as:

Try'click' : function (obj) {alert(obj);}insteadYou cannot alert string + object If you have Firefox, I will suggest using the Firebug plugin and console.log instead of alertexample:'click' : function (obj) {console.log(obj);}

DHTMLGoodiesat 09:48PM, 2012/03/14.

'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?

Khurramat 04:07AM, 2012/03/15.

'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?

Khurramat 04:15AM, 2012/03/15.

Can i change mouse over color?

Khurramat 07:36PM, 2012/03/26.

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.

Marinaat 11:32PM, 2012/03/26.

How can i change row color on mouseover?

Naumanat 05:28AM, 2012/03/28.

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.

Khurramat 11:02AM, 2012/03/30.

Hi ! Very nice Grid. This one implement most of the functionalities I was looking for. Except one... freezing columns.Is it possible ?

Omarat 01:07PM, 2012/04/10.

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 Nguyenat 07:39AM, 2012/04/18.

Kindly update how to do row rollover.

Samat 09:35AM, 2012/05/31.

HiThanks 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

Ingridat 06:03AM, 2012/06/13.

sorting by date looks like this:Apr 04, 2012 09:54:17 AMJan 20, 2004 01:03:16 PMJun 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?

bxlat 09:09PM, 2012/06/18.

renderer, maybe?

bxlat 09:11PM, 2012/06/18.

Hello,I would like to know if it will be possible to have pagination in this grid ?Thanks

FREDRENAULTat 02:45PM, 2012/06/27.

May it possible to highlight each marked row?

Andreasat 10:09AM, 2012/07/01.

Good script but no more support :-(

kd12at 07:34PM, 2012/07/30.

Can we get column name which is clicked for sorting?

SAMat 06:31AM, 2012/08/22.

How can we use public method "getConfigObject"? Can I have any example to preserve the grid state for next use.

SAMat 12:59PM, 2012/08/22.

how can i use html table tag for data ?

bonerat 07:45AM, 2013/05/17.

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.

Devat 12:05PM, 2014/08/22.

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?