How to send an entire grid to server side and store its

How to send an entire grid server side and store its elements in the database.

and I do not know how to receive grid at the server and store its elements in the database.

here is my complete script on the client side.

<html>
	<head>
		<title> Mission est </title>
		<script type="text/javascript" src="vue/dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
		<script type="text/javascript" src="vue/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
		<script type="text/javascript" src="vue/dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js"></script>
		<script type="text/javascript" src="vue/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
		<script type="text/javascript" src="vue/dhtmlxForm/codebase/dhtmlxcommon.js"></script>
		<script type="text/javascript" src="vue/dhtmlxForm/codebase/dhtmlxform.js"></script>
		<script src="dhtmlxDataProcessor/codebase/dhtmlxdataprocessor.js"></script>
		<script type="text/javascript">
			//formulaire
			var formData,myform;
			function doOnLoad() 
			{
				formData= 
				[
					{
						type: "select",
						name: "modetransport",
						label: "Mode de transport",
						labelWidth: 150,
						inputWidth: 160,
						options: 
						[
							{
								text: "Par Batteau",
								value: "Par Batteau"											
							}, 
							{
								text: "Par bus",
								value: "Par bus"
							},
							{
								text: "Par Train",
								value: "Par Train"
							},
							{
								text: "Par Batteau",
								value: "Par Batteau"
							}
						]
					},
					{
						type: "select",
						name: "depart",
						label: "Ville de départ",
						labelWidth: 150,
						inputWidth: 160,
						options: 
						[
							{
								text: "Bamenda",
								value: "bamenda"												
							}, 
							{
								text: "Douala",
								value: "Douala"
							},
							{
								text: "Bafoussam",
								value: "Bafoussam"
							},
							{
								text: "Garoua",
								value: "Garoua"
							}
						]
					},
					{
						type: "select",
						name: "arrivee",
						label: "Ville de destination",
						labelWidth: 150,
						inputWidth: 160,
						options: 
						[
							{
								text: "Bamenda",
								value: "bamenda"												
							}, 
							{
								text: "Douala",
								value: "Douala"
							},
							{
								text: "Bafoussam",
								value: "Bafoussam"
							},
							{
								text: "Garoua",
								value: "Garoua"
							}
						]
					},
					{
						type: "input",
						name: "cout",
						label: "Cout",
						labelWidth: 150,
						inputWidth: 160,
					},
					{
						type: "fieldset",  name: "mydata", label: "Opérations", width:330,
						list:
						[						
							{
								type: "button",
								name:"ajouter",
								value:"Ajouter"
							},
							{
								type: "newcolumn"
							},
							{
								type: "button",
								name:"envoyer",
								value:"Envoyer"
							}					
						]
					}
				]
				myform = new dhtmlXForm("box", formData);
				//formualire
				var grid = new dhtmlXGridObject('gridbox');
				grid.setImagePath("vue/dhtmlxGrid/codebase/imgs/");
				grid.setHeader("Mode de transport,Départ,Arrivée,Cout");
				grid.setInitWidths("200%,200%,200%,200%");
				grid.setColTypes("ed,ed,ed,ed");
				grid.setColAlign("center,center,center,center");
				grid.setColSorting("connector");
				grid.setSkin("dhx_skyblue");         
				grid.init();
				grid.attachEvent("onEditCell", function() {
				return false;
				});
				/*grid.addRow(1, ["Avion", " Yaoundé","Douala","9000"]);
				grid.addRow(2, ["Train", " Douala ","Bafoussam","80000"]);
				grid.addRow(3, ["Transport en commum", " Bafoussam","Yaoundé","10000"]);*/
				//alert(grid.cells(1,3).getValue());
				//alert(grid.getAllRowIds(","));
				//alert(grid.getRowsNum());
				//grid.clearAll(true);
				//grid.moveRowDown(1);
				//grid.moveRowUp(3);
				myform.attachEvent("onButtonClick", function(name)
				   {
						if(name=="ajouter")
						{
							grid.addRow(-1, [myform.getItemValue('modetransport'),myform.getItemValue('depart'), myform.getItemValue('arrivee'),myform.getItemValue('cout')]);
						}else
						if(name=="envoyer")
						{
						  alert("envoyer au serveur")
						  var dp = new dataProcessor("test.php");
							dp.init(grid);
							dp.setUpdateMode("off")
							dp.sendData();
						}						
					
					});
			}		
		</script>
		<link rel="stylesheet" type="text/css" href="vue/dhtmlxGrid/codebase/dhtmlxgrid.css">
		<link rel="stylesheet" type="text/css" href="vue/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
		<link rel="stylesheet" type="text/css" href="vue/dhtmlxForm/codebase/skins/dhtmlxform_dhx_skyblue.css"/>
	</head>
	<body onload="doOnLoad();">
		<div id="box" style='width:800px; height:160px;float:left;'></div><br/>
		<div id="gridbox" style='width:800px; height:200px;'></div>	
	</body>
</html>

here is my complete server-side script.

thank you for your help
chechbox_dhtmlx.rar (254 KB)

Please, try to remove the init of dataprocessor from the onButtonClick event and init it before you add rows to the grid with addRow() method.

Thank you for your support;
I did, but when I click on the send button, I get the following eurreur.

TypeError: this.obj is undefined

myform.attachEvent("onButtonClick", function(name)
				   {
						var dp = new dataProcessor("test.php");
						if(name=="ajouter")
						{
							grid.addRow(-1, [myform.getItemValue('modetransport'),myform.getItemValue('depart'), myform.getItemValue('arrivee'),myform.getItemValue('cout')]);							
							dp.init(grid);
						}else
						if(name=="envoyer")
						{
						  //alert("envoyer au serveur")						  
							dp.setUpdateMode("off")
							dp.sendData();
						}						
					
					});

what I want to do: I want after building the grid, send the grid on the server and register its lines in the database;

thank you .

Please, try the following order:

  1. init of the grid:
    var grid = new dhtmlXGridObject(‘gridbox’);

    grid.init();

  2. init of the data processor:
    var dp = new dataProcessor(“test.php”);
    dp.setUpdateMode(“off”)
    dp.init(grid);

3.in a onButtonClick:
3.1. adding rows
3.2. send data to dataprocessor

I did this:

var grid = new dhtmlXGridObject('gridbox');
				grid.setImagePath("vue/dhtmlxGrid/codebase/imgs/");
				grid.setHeader("Mode de transport,Départ,Arrivée,Cout");
				grid.setInitWidths("200%,200%,200%,200%");
				grid.setColTypes("ed,ed,ed,ed");
				grid.setColAlign("center,center,center,center");
				grid.setColSorting("connector");
				grid.setSkin("dhx_skyblue"); 
				grid.init();				
				var dp = new dataProcessor("test.php");
				dp.setUpdateMode("off");				
				dp.init(grid);
				grid.attachEvent("onEditCell", function() {
				return false;
				});
				/*grid.addRow(1, ["Avion", " Yaoundé","Douala","9000"]);
				grid.addRow(2, ["Train", " Douala ","Bafoussam","80000"]);
				grid.addRow(3, ["Transport en commum", " Bafoussam","Yaoundé","10000"]);*/
				//alert(grid.cells(1,3).getValue());
				//alert(grid.getAllRowIds(","));
				//alert(grid.getRowsNum());
				//grid.clearAll(true);
				//grid.moveRowDown(1);
				//grid.moveRowUp(3);
				myform.attachEvent("onButtonClick", function(name)
				   {						
						if(name=="ajouter")
						{
							dp.init(grid);
							grid.addRow(-1, [myform.getItemValue('modetransport'),myform.getItemValue('depart'), myform.getItemValue('arrivee'),myform.getItemValue('cout')]);														
						}else
						if(name=="envoyer")
						{
							dp.sendData();
						}						
					
					});

but after inserting 4 lines in the grid, I sent it, and is only the last row of the grid that is sent,
But I wanted to send all four rows of the grid.

grid.addRow(-1, [myform.getItemValue('modetransport')

“-1” - id of a row. Each row should have a unique id.

Thank you for accuracy

i change the ligne by this:

grid.addRow(grid.getRowsNum()+1, [myform.getItemValue('modetransport'),myform.getItemValue('depart'), myform.getItemValue('arrivee'),myform.getItemValue('cout')]);

the current problem is how to handle this at the server side.

i do this

<?php
var_dump($_GET);

?>

but no data appear

can someone help me?

Please, have a look at the ready-working examples in "dhtmlxDataProcessor\samples\01_grid" directory.
Here is the example of the update.php
update.zip (1001 Bytes)

thank you,
all is well at the moment, but I can not delete a row on the grid.
Here is the full script attached.

thank you for giving me some of your valuable time.
chechbox_dhtmlx.rar (255 KB)

All data operations - update, insert, delete will be routed to the same script. In your case it is a test.php

Currently you are have code in it which inserts data, so it is expected that row deleting will not be stored in DB

Normally you will have in server side file the code with connector initialization, or custom code fo r all CRUD operations.

Thank you for your availability,

the row of the grid are not from the database.
I summarize what I want to do:

I want to build a grid with the rows of the grid from the form (not from the database). ie my adding, deletion of the rows of my grid does not interact with the database.

but what happens is that when I delete a row from my grid with the method

grid.deleteRow(grid.getSelectedId());
grid.deleteSelectedRows();

line is not removed from my grid, but it is rather strikethrough.

Thank you.

I remove the grid lines with this:

if(name=="supprimer")
						{														
							dp.init(grid);
							if(grid.getSelectedId() == null)
							{
							  alert("veuillez selectionnez une ligne SVP !!");
							}														
							grid.deleteRow(grid.getSelectedId());
							grid.deleteSelectedRows();
						}

but still appear in the grid.

If you need not save the changes of grid in db - you need to remove dataprocessor code( init grid, but without dataprocessor ), after that deleteRow call will remove row from the grid without any delays.

Thank you for the support !,
I want to know how to send an entire grid (with 5 lines, for example) to the server side.

//serialize grid back to xml var data = grid.serialize(); //post xml to server side dhtmlxAjax.post("data.php", "xml="+encodeURIComponent(data));