Import/export from/to CSV

Serialization to CVS is possible in dhtmlxGrid. You can choose which delimiter to use.

Use as delimiter:
  • Tab - \t
  • Comma - ,
  • Other
  • Load from CSV

  • Load Grid from CSV (content of textarea below)
  • </> Source
    <!DOCTYPE html>
    <!--pro-->
    <html>
    <head>
    	<title>Import/export from/to CSV</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
    	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
    	<script src="../../../codebase/dhtmlx.js"></script>
    	<script>
    		var myGrid;
    		function doOnLoad(){
    			myGrid = new dhtmlXGridObject('gridbox');
    			myGrid.setImagePath("../../../codebase/imgs/");
    			myGrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,Date of Publication");
    			myGrid.setInitWidths("70,150,100,80,80,80,80,100");
    			myGrid.setColAlign("right,left,left,right,center,left,center,center");
    			myGrid.setColTypes("dyn,ed,ed,price,ch,co,ra,ro");
    			var combobox = myGrid.getCombo(5);
    			combobox.put("1","1 Hour");
    			combobox.put("12","12 Hours");
    			combobox.put("24","24 Hours");
    			combobox.put("48","2 days");
    			combobox.put("168","1 week");
    			combobox.put("pick","pick up");
    			combobox.put("na","na");
    			myGrid.enableAutoWidth(true);
    			myGrid.enableAutoHeight(true);
    			myGrid.init();
    			myGrid.enableCSVAutoID(false);
    			myGrid.load("../common/grid.csv","csv");
    		}
    		function serilaizeToCSVWithDelim(delim){
    			myGrid.setCSVDelimiter(delim);
    			document.getElementById('ser_1').value=myGrid.serializeToCSV();
    		}
    	</script>
    </head>
    <body onload="doOnLoad()">
    	<h1>Import/export from/to CSV</h1>
    	<table width="800" cellspacing="0" cellpadding="0">
    		<tr>
    			<td valign="top">
    				<div id="gridbox" style="width:756px;height:314px;overflow:hidden"></div>
    			</td>
    		</tr>
    		<tr>
    			<td valign="top" width="400px">
    				<p>Serialization to CVS is possible in dhtmlxGrid. You can choose which delimiter to use.</p>
    				Use as delimiter:<br>
    				<li hrei><a href="javascript:void(0)" onClick="serilaizeToCSVWithDelim('\t')">Tab</a> - \t</li>
    				<li><a href="javascript:void(0)" onClick="serilaizeToCSVWithDelim(',')">Comma</a> - ,</li>
    				<li><a href="javascript:void(0)" onClick="serilaizeToCSVWithDelim(document.getElementById('serdelim').value)">Other</a> <input id="serdelim" size="1" maxlength="1"></li>
    				<p>Load from CSV</p>
    				<li><a href="javascript:void(0)" onClick="myGrid.clearAll();myGrid.parse(document.getElementById('ser_1').value, 'csv')">Load Grid from CSV (content of textarea below)</a></li>
    			</td>
    		</tr>
    	</table>
    	<textarea style="font-size:8pt; font-family:Arial; width:700px; height:150px;" id="ser_1"></textarea>
    </body>
    </html>
    

    Documentation

    Check documentation to learn how to use the components and easily implement them in your applications.