UI preferences save for page reload

Hello,

How to save settings for UI: resize, order, group?
When I press syncGrid() the grid sends all data to the server and reloads, so all my (resize) actions turn back to default.
Is there a way to set UI preferences from JSON, maybe? Or to configure dataProcessor on different way?
Any idea?

<html>
	<head>
//localhost		
	<link rel="STYLESHEET" type="text/css" href="http://localhost:8080/dhtmlxGrid/codebase/dhtmlxgrid.css">
	<link rel="stylesheet" type="text/css" href="http://localhost:8080/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
	<link rel="STYLESHEET" type="text/css" href="http://localhost:8080/dhtmlxGrid/codebase/ext/dhtmlxgrid_pgn_bricks.css">
	<script src="http://localhost:8080/dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
	<script src="http://localhost:8080/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
	<script src="http://localhost:8080/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
	<script src="http://localhost:8080/dhtmlxDataProcessor/codebase/dhtmlxdataprocessor.js"></script>
	<script src="http://localhost:8080/dhtmlxDataProcessor/codebase/dhtmlxdataprocessor_debug.js"></script>
		
	<script>
		var mygrid;
		var dp;
		var columnWidthDhtmlx = "70,150,150,150,150,150,150,100,150,100,100";	
		function doInitGrid(){
			mygrid = new dhtmlXGridObject("mygrid_container");
			mygrid.setImagePath("codebase/imgs/");
			mygrid.setHeader("Column1, Column2, Column3, Column4, Column5, Column6, Column7, Column8, Column9, Column10, Column11");
			mygrid.setInitWidths(columnWidthDhtmlx);
			mygrid.setColAlign("left,right,right,right,right,right,right,right,right,right,right");
			mygrid.setSkin("light");
	
			mygrid.setColSorting("str,str,str,str,str,str,str,str,str,str,str");
			mygrid.attachEvent("onBeforeSorting",function(ind,type,direction){alert("onBeforeSorgi "+mygrid.getSortingState()); return true;});
			mygrid.setColTypes("ed,ed,ed,ed,ed,ed,ed,ed,ed,ed,ed");
			mygrid.init();
//localhost		
			mygrid.load("http://localhost:8080/...","json");
			dp = new dataProcessor("http://localhost:8080/...");
		
			dp.setTransactionMode("GET", true);
			dp.setUpdateMode("off");
			dp.defineAction("updated",responseUpdated);
			dp.init(mygrid);
		};
		
		
		function syncGrid(){
			alert("Sync Grid With DB...");
			dp.sendData();
			alert("Sync with DB DONE! Waiting for server response(s)...");			
		};

		function responseUpdated(node){
			alert("responseUpdated()");
			alert(node.getAttribute("type"));
			alert(node.firstChild.data);			
		};

		
		</script>
		</head>
		
		<body onLoad="doInitGrid()">
			<div id="mygrid_container" style="width:600px;height:150px;"></div>			
			<div>
				<a href="#" OnClick="addRow();" title="Add Row">Add Row</a>		
			</div>
			<div>
				<a href="#" OnClick="removeRow();" title="Remove Row">Remove Row</a>
			</div>	
			<div>
				<button onClick="syncGrid()" id="submitButton" style="margin-left:30px;">Sync</button>	
			</div>	
		</body>
</html>

Regards

Best approach will be to use ajax calls instead of full page reloading.

If page reloading is a must, you can check
docs.dhtmlx.com/doku.php?id=dhtm … operations

Thank you for your reply, Stanislav!

Can you share an example of ajax call on dp.sendData() instead of above whole page submit?
body onLoad() always resets the initialization

Regards

You can send additional Ajax request to the server side using dhtmlxAjax library docs.dhtmlx.com/doku.php?id=dhtmlxajax:toc