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.

Download code Visit demo

Tags: table

<< Sorted Table Dhoni Show >>

DhtmlXGrid demo

Changes to the code below will update the demo above in real time.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
<base href="http://www.ajaxdaddy.com/media/demos/play/1/dhtmlxgrid/dhtmlxgrid/dhtmlxGrid/samples/05_drag_n_drop/" />

<title>Drag and Drop between Grids</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="featured" content="yes"><meta name="title" content="Samples" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
		<link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />

</head>
	<body>

<b>Drag and Drop between Grids</b><br />
    dhtmlxGrid supports drag-n-drop not only within one grid, but between grids as well. Check out this functionality in the sample below.

<table width="800px">
		<tr>
            <td>
				<div id="gridbox2" style="width:270px;height:270px;background-color:white;"></div>
            </td>
			<td>
				<div id="gridbox3" style="width:500px;height:270px;background-color:white;"></div>
			</td>
		</tr>
	</table>
<script>
		mygrid= new dhtmlXGridObject('gridbox3');
		mygrid.selMultiRows = true;
		mygrid.setImagePath("../../codebase/imgs/");
		mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,Date of Publication");
		mygrid.setInitWidths("50,150,120,80,80,80,80,200")
		mygrid.setColAlign("right,left,left,right,center,left,center,center")
		mygrid.setColTypes("dyn,ed,ed,price,ch,coro,ra,ro");
		mygrid.setColSorting("int,str,str,int,str,str,str,date")
		
		mygrid.setMultiLine(false);
		mygrid.enableDragAndDrop(true);
		mygrid.init();
		mygrid.setSkin("dhx_skyblue");
	   	mygrid.loadXML("../common/grid.xml");

treeGrid = new dhtmlXGridObject('gridbox2');
		treeGrid.selMultiRows = true;
		treeGrid.setImagePath("../../codebase/imgs/");
		treeGrid.setHeader("Alpha,Betta");
		treeGrid.setInitWidths("100,150")
		treeGrid.setColAlign("right,left")
		treeGrid.setColTypes("ed,ed");
		treeGrid.setColSorting("int,str");
		
		treeGrid.setMultiLine(false);
		treeGrid.enableDragAndDrop(true);
		treeGrid.init();
		treeGrid.setSkin("dhx_skyblue");
	   	treeGrid.loadXML("../common/dynscroll.xml");
</script>

</div>

</body>
</html>

June 21, 2007, 11:14 a.m. - Evgeni Bolski: Great component with great functionality and stylish themes.
June 21, 2007, 11:21 a.m. - Alexander Bronin: Very easy skinning. Good job!
July 6, 2007, 9:39 a.m. - Sanjeev Vishwakarma: Great job as well as very Easy to implements.
Dec. 26, 2007, 8:14 p.m. - suresh: where is JS FILE
Jan. 2, 2008, 11:55 p.m. - isabella: Great!!! should demo all the components in the standard edition! it really helps
Jan. 16, 2008, 9:44 a.m. - arunachalam: example is good example and good progarammer
April 7, 2008, 5:06 a.m. - James: It's a good example
June 19, 2008, 1:31 a.m. - Bhavani: 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.
Oct. 6, 2008, 10:02 p.m. - asd: Resizing columns seam to be buggy in FF 3
Dec. 9, 2008, 3:46 a.m. - nish: dosent work on chrom and ff
March 13, 2009, 7:52 p.m. - Jerry: would like to see the contents of grid.xml
Aug. 10, 2009, 5:49 a.m. - Rakhi Garg: its very good but its not working in my application. M using it in MVC web application.
March 11, 2010, 10:22 p.m. - Ashutosh gangrade: thank you very much this grid will definitely help me
May 21, 2010, 4:17 a.m. - Krishna: quick & easy integration
May 25, 2010, 7:12 a.m. - ashutosh gangrade Khalwa: Please help me to get value of more than one cell at a time.
Sept. 28, 2010, 11:05 p.m. - sudheer: How to Add Color to header(Sales Dynamic,Titles...)
Oct. 15, 2010, 4:09 p.m. - brain: where is JS FILE
March 31, 2011, 6:39 a.m. - Alok Ranjan: When i edit the grid on localhost at my page its does not chane xml file . Can i chage the xml file Where we will used this code on client side or server side