Next Prev

DhtmlXGrid

dhtmlxGrid is a Ajax-enabled JavaScript grid control that provides professional solution for representing and editing tabular data on the web. Carefully designed, with powerful script API, this editable DHTML grid is easy configurable with XML or js methods and shows convincing results working with large amounts of data.

dhtmlxGrid allows easy implementation of nice looking (managed through css or predefined skins) DHTML tables with rich in-cell editing, fixed multiline headers/footers, resizable, sortable and draggable columns. Numerous event handlers let you add necessary interactivity to grid-based interfaces. Smart Rendering technology and built-in paginal output allow this data grid to work effectively with huge datasets.

You can sort columns by clicking on the header, drag and drop rows and edit the values by double clicking the cell.
You can also set another table as a data source.

Web 2.0 Box Generator

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<base href="http://www.ajaxdaddy.com/web20/dhtmlxgrid/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
	<title>DHTML Grid samples. dhtmlXGrid - Skinning.</title>
	<meta name="KEYWORDS" content="dhtmlxgrid, dhtml grid, javascript grid, javascript, DHTML, grid, grid control, dynamical scrolling, xml, AJAX, API, cross-browser, checkbox, XHTML, compatible, gridview, navigation, script, javascript navigation, web-site, dynamic, javascript grid, dhtml grid, dynamic grid, item, row, cell, asp, .net, jsp, cold fusion, custom tag, loading, widget, checkbox, drag, drop, drag and drop, component, html, scand">

<meta name="DESCRIPTION" content="Cross-browser DHTML grid with XML support and powerful API. This DHTML JavaScript grid can load its content dynamically from server using AJAX technology.">

</head>
<style>
	xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
	div.hdr{
		background-color:lightgrey;
		margin-bottom:10px;
		padding-left:10px;
	}
</style>

<body  style="overflow:hidden">
	
  
	<link rel="STYLESHEET" type="text/css" href="css/dhtmlXGrid.css">
	<link rel="STYLESHEET" type="text/css" href="css/dhtmlXGrid_skins.css">
	<script  src="javascript/dhtmlXCommon.js"></script>
	<script  src="javascript/dhtmlXGrid.js"></script>		
	<script  src="javascript/dhtmlXGridCell.js"></script>
  <script  src="javascript/dhtmlXGrid_drag.js"></script>
	<h1>dhtmlXGrid - Skinning</h1>
	
	
	<div id="gridbox" width="100%" height="250px" style="background-color:white;"></div>

  <div  style="margin:20px;">
	Choose skin to apply: 
	<select onchange="mygrid.setSkin(this.value)">
		<option value="gray">gray
		<option value="mt">mt
		<option value="xp">xp
		<option value="clear">clear
		<option value="modern">modern
		<option value="light" selected>light
	</select>
	</div>
	
<script>
	function doOnLoad(){
		mygrid = new dhtmlXGridObject('gridbox');
		mygrid.setImagePath("images/");
		mygrid.setHeader("Sales Dynamic,Title,Description,Price,In Store,Shipping,Date of Publication");
		mygrid.setInitWidths("120,150,*,50,80,80,150")
		mygrid.setColAlign("right,left,left,right,center,right,center")
		mygrid.setColTypes("dyn,ed,txt,price,ch,coro,ro");
		mygrid.setColSorting("int,str,str,int,str,str,na")
		//mygrid.enableMultiline(true)
		//mygrid.setColumnColor("white,#d5f1ff,#d5f1ff")
	  mygrid.getCombo(5).put(1,"1 hour");
		mygrid.getCombo(5).put(12,"12 hours");
		mygrid.getCombo(5).put(24,"24 hours");    
		mygrid.getCombo(5).put(48,"2 Days");    
		mygrid.setSkin("light");
    mygrid.enableDragAndDrop(true);
		mygrid.init();
		mygrid.loadXML("grid.xml");
	}
    doOnLoad();
  </script>
  
</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Joe

2009-02-06 07:57:59

This sample seems to be almost two years old... They have much better version now on their Web-site http://dhtmlx.com

Nish

2008-12-09 03:46:18

dosent work on chrom and ff

Asd

2008-10-06 22:02:47

Resizing columns seam to be buggy in FF 3

Bhavani

2008-06-19 01:31:23

I tried the same code to add a combobox in a dhtml grid and insert certain values in the combobox. But I get an error as mygrid.getCombo(x) has no properties.

John

2008-05-20 15:03:17

Excellent component! A newer version can be found at http://dhtmlx.com

James

2008-04-07 05:06:10

It's a good example

Arunachalam

2008-01-16 09:44:03

example is good example and good progarammer

Isabella

2008-01-02 23:55:36

Great!!! should demo all the components in the standard edition! it really helps

Suresh

2007-12-26 20:14:10

where is JS FILE

Sanjeev Vishwakarma

2007-07-06 09:39:58

Great job as well as very Easy to implements.

Alexander Bronin

2007-06-21 11:21:32

Very easy skinning. Good job!

Evgeni Bolski

2007-06-21 11:14:19

Great component with great functionality and stylish themes.

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

DhtmlXGrid

Comment on this example