drag and drop doesn't work in dhtmlxgrid

Suite and Optimus Suite 5
#1

I found a bug:
drag n drop can’t work in dhtmlxgrid if init grid with grid.parse(jsonData, ‘json’), and if init by using
grid.loadXML(url), it works well. it confuses me.
bellow is my code, can anyone help me ?

var mygrid;
        var data;
	$(document).ready(function(){
	 
		initGrid();
		$("#reload").bind("click", function(){
			redraw();
		});
	});

	function initGrid(){
		data = getData();
		mygrid = new dhtmlXGridObject('mygrid_container');
		mygrid.setImagePath("codebase/imgs/");
		mygrid.setHeader(data.title);
		mygrid.setColAlign("right,right,right,right");
 	 	mygrid.enableColumnMove(true);
		mygrid.setSkin("xp");
	 
		mygrid.init();
		mygrid.parse(data.data, "json");
		//mygrid.loadXML('grid.xml');
	}
	 
	
	function getData() {
		var js2 = {
			rows : [{
					id : 0,
					data : [
						"a",
						"b",
						"c",
						"d"]
				}, {
					id : 1,
					data : [
						"aa",
						"bb",
						"cc",
						"dd"]
				}, {
					id : 2,
					data : [
						"aaa",
						"bbb",
						"ccc",
						"ddd"]
				},  
			]
		};
		
		return {
			'title' : ['A', 'B', 'C', 'D'],
			'data' : js2
		};
	}
#2

the file of whole code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

  <link rel="STYLESHEET" type="text/css" href="./codebase/dhtmlxgrid.css">
    <script src="./codebase/dhtmlxcommon.js"></script>
    <script src="./codebase/dhtmlxgrid.js"></script>
    <script src="./codebase/dhtmlxgridcell.js"></script>
    <script src="./codebase/ext/dhtmlxgrid_drag.js"></script>
     <script src="./codebase/ext/dhtmlxgrid_mcol.js"></script>
       <script src="./codebase/ext/dhtmlxgrid_splt.js"></script>
	<script src="http://code.jquery.com/jquery-1.9.1.js	"></script>
	<style type="text/css">
	.hover{
		color: red;
	}
	</style>
    <script>
     
	var mygrid;
        var data;
	$(document).ready(function(){
	 
		initGrid();
		$("#reload").bind("click", function(){
			redraw();
		});
	});

	function initGrid(){
		data = getData();
		mygrid = new dhtmlXGridObject('mygrid_container');
		mygrid.setImagePath("codebase/imgs/");
		mygrid.setHeader(data.title);
		mygrid.setColAlign("right,right,right,right");
 	 	mygrid.enableColumnMove(true);
		mygrid.setSkin("xp");
	 
		mygrid.init();
		mygrid.parse(data.data, "json");
		//mygrid.loadXML('grid.xml');
	}
	 
	
	function getData() {
		var js2 = {
			rows : [{
					id : 0,
					data : [
						"a",
						"b",
						"c",
						"d"]
				}, {
					id : 1,
					data : [
						"aa",
						"bb",
						"cc",
						"dd"]
				}, {
					id : 2,
					data : [
						"aaa",
						"bbb",
						"ccc",
						"ddd"]
				},  
			]
		};
		
		return {
			'title' : ['A', 'B', 'C', 'D'],
			'data' : js2
		};
	}
	
    </script>
 </head>

 <body>
  <input type = "button" value = "reload" id = "reload"/><br>
  <div id="mygrid_container" style="width:600px;height:150px;"></div>
 </body>
</html>

and the grid.xml

<?xml version="1.0" encoding="UTF-8"?>
<rows>
	<row id="1">
		<cell>a</cell>
		<cell>b</cell>
		<cell>c</cell>
		<cell>d</cell>
		 
	</row>
	<row id="2">
		<cell>aa</cell>
		<cell>bb</cell>
		<cell>cc</cell>
		<cell>dd</cell>
	</row>
	<row id="3">
		<cell>aaa</cell>
		<cell>bbb</cell>
		<cell>ccc</cell>
		<cell>ddd</cell>
	</row>
	 
</rows>
#3

BTW, grid.moveColumn not work well if init by using grid.parse(jsonData, ‘json’).



#4

Unfortunately it’s not available to set the id of the row to “0”.
Please, try to change the id of your first row in a json object.

#5

Thanks, it work wells after I change the row id to a non zero value. :smiley: