[ Mini Kiebo ]

Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586 Path: D:/xampp182/htdocs/simpeg/zapatec/zpgrid/zpgrid/demo/ [ Home ]
File: splice_columns.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools">
	<title>Zapatec DHTML Grid Widget - Insert, replace, delete and rename columns</title>

	<!-- Common JS files -->
	<script type='text/javascript' src='../../utils/zapatec.js'></script>

	<!-- Custom includes -->	
	<script type="text/javascript" src="../src/zpgrid.js"></script>
	<script type="text/javascript" src="demo.js"></script>

	<!-- ALL demos need these css -->
	<link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css">
	<link href="../../website/css/template.css" rel="stylesheet" type="text/css">
	<style type="text/css">
		body {
			width: 778px;
		}
	</style>
	<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">
	
	<link href="../themes/layout.css" rel="stylesheet" type="text/css" />



</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Insert, replace, delete and rename columns</div>


<div class='leftCol'>
	<h3>Controls</h3>
	<form name="test" style="font: 11px arial, sans-serif">
		<fieldset>
			<p>Insert or replace columns</p>
			<p>
				Title 1: <input type="text" name="title1" size="5"/><br/>
			</p>
			<p>
				Row 1: <input type="text" name="row11" size="5"/><br/>
				Row 2: <input type="text" name="row12" size="5"/><br/>
				Row 3: <input type="text" name="row13" size="5"/><br/>
			</p>
			<p>
				Title 2: <input type="text" name="title2" size="5"/><br/>
			</p>
			<p>
				Row 1: <input type="text" name="row21" size="5"/><br/>
				Row 2: <input type="text" name="row22" size="5"/><br/>
				Row 3: <input type="text" name="row23" size="5"/><br/>
			</p>
			<p>
				<input type="radio" name="insAfter" checked="checked"/>At
				<input type="radio" name="insAfter"/>After<br/>
				zero-based column #: <input type="text" name="insColumn" size="1"/><br/>
				(leave blank to append to the end of the grid)
			</p>
			<p>
				<input type="button" value="Insert" onclick="insertColumns()"/>
				<input type="button" value="Replace" onclick="replaceColumns()"/>
			</p>
			<p>
			 If the grid is sorted, new cells will appear in the sort order.
			</p>
		</fieldset>
		<fieldset>
			<p>Delete column</p>
			<p>
				Zero-based column #: <input type="text" name="delColumn" size="1"/>
			</p>
			<p>
				<input type="button" value="Delete" onclick="deleteColumn(this.form.delColumn.value)"/>
			</p>
		</fieldset>
		<fieldset>
			<p>Rename column</p>
			<p>
				Zero-based column #: <input type="text" name="renColumn" size="1"/>
			</p>
			<p>
				New coumn title: <input type="text" name="title" size="10"/>
			</p>
			<p>
				<input type="button" value="Rename" onclick="renameColumn(this.form.renColumn.value, this.form.title.value)"/>
			</p>
		</fieldset>
	</form>
</div>
<div class='mainCol'>
	<p>The Grid <b>spliceColumns</b>, <b>deleteColumns</b> and <b>setFieldTitle</b>
	 methods allow you to perform following operations with one column or several
	 columns at once:
		<ul>
			<li>Insert into the specified position</li>
			<li>Append to the end of the grid</li>
			<li>Replace</li>
			<li>Delete</li>
			<li>Change title</li>
		</ul>
	</p>
	<div id="gridContainer">
		<table>
			<tr>
				<td width="100">Title 0</td>
				<td width="100">Title 1</td>
				<td width="100">Title 2</td>
			</tr>
			<tr>
				<td>Col 0 Row 0</td>
				<td>Col 1 Row 0</td>
				<td>Col 2 Row 0</td>
			</tr>
			<tr>
				<td>Col 0 Row 1</td>
				<td>Col 1 Row 1</td>
				<td>Col 2 Row 1</td>
			</tr>
			<tr>
				<td>Col 0 Row 2</td>
				<td>Col 1 Row 2</td>
				<td>Col 2 Row 2</td>
			</tr>
		</table>
	</div>
</div>
<script type="text/javascript" >

/*
 * Initialize grid
 */
var oGrid = new Zapatec.Grid({
	// Use "gridContainer" div as source and container for the grid
	container: 'gridContainer',
	// Use "lightblue" theme
	theme: 'lightblue'
});

/*
 * Inserts one or several columns.
 */
function insertColumns() {
	var oForm = document.forms.test;
	// Form new columns
	var aFields = [];
	var aRows = [
		{cells: []},
		{cells: []},
		{cells: []}
	];
	// Form 1st column
	if (oForm.title1.value !== '') {
		aFields.push({
			title: oForm.title1.value
		});
		aRows[0].cells.push({
			v: oForm.row11.value
		});
		aRows[1].cells.push({
			v: oForm.row12.value
		});
		aRows[2].cells.push({
			v: oForm.row13.value
		});
	}
	// Form 2nd column
	if (oForm.title2.value !== '') {
		aFields.push({
			title: oForm.title2.value
		});
		aRows[0].cells.push({
			v: oForm.row21.value
		});
		aRows[1].cells.push({
			v: oForm.row22.value
		});
		aRows[2].cells.push({
			v: oForm.row23.value
		});
	}
	// Get position
	var iAtColId = null;
	if (oForm.insAfter[0].checked && oForm.insColumn.value.length) {
		iAtColId = oForm.insColumn.value * 1;
	}
	var iAfterColId = null;
	if (oForm.insAfter[1].checked && oForm.insColumn.value.length) {
		iAfterColId = oForm.insColumn.value * 1;
	}
	// Change grid
	var iRemoved = oGrid.spliceColumns({
		// Id of column at which to start changing the grid (default: end of the grid)
		atColumnId: iAtColId,
		// Id of column after which to start changing the grid (ignored if atColumnId is defined)
		afterColumnId: iAfterColId,
		// Array of fields to add
		fields: aFields,
		// Array of cells to add
		rows: aRows
	});
	// Displays splice result
	alert('Added ' + aFields.length + ' columns.\nDeleted ' + iRemoved + ' columns.');
}

/*
 * Replaces one or several columns.
 */
function replaceColumns() {
	var oForm = document.forms.test;
	// Form new columns
	var aFields = [];
	var aRows = [
		{cells: []},
		{cells: []},
		{cells: []}
	];
	// Form 1st column
	if (oForm.title1.value !== '') {
		aFields.push({
			title: oForm.title1.value
		});
		aRows[0].cells.push({
			v: oForm.row11.value
		});
		aRows[1].cells.push({
			v: oForm.row12.value
		});
		aRows[2].cells.push({
			v: oForm.row13.value
		});
	}
	// Form 2nd column
	if (oForm.title2.value !== '') {
		aFields.push({
			title: oForm.title2.value
		});
		aRows[0].cells.push({
			v: oForm.row21.value
		});
		aRows[1].cells.push({
			v: oForm.row22.value
		});
		aRows[2].cells.push({
			v: oForm.row23.value
		});
	}
	// Get position
	var iAtColId = null;
	if (oForm.insAfter[0].checked && oForm.insColumn.value.length) {
		iAtColId = oForm.insColumn.value * 1;
	}
	var iAfterColId = null;
	if (oForm.insAfter[1].checked && oForm.insColumn.value.length) {
		iAfterColId = oForm.insColumn.value * 1;
	}
	// Change grid
	var iRemoved = oGrid.spliceColumns({
		// Id of column at which to start changing the grid (default: end of the grid)
		atColumnId: iAtColId,
		// Id of column after which to start changing the grid (ignored if atColumnId is defined)
		afterColumnId: iAfterColId,
		// Number of columns to delete (default: 0)
		howMany: aFields.length,
		// Array of fields to add
		fields: aFields,
		// Array of cells to add
		rows: aRows
	});
	// Displays splice result
	alert('Added ' + aFields.length + ' columns.\nDeleted ' + iRemoved + ' columns.');
}

/*
 * Deletes column.
 */
function deleteColumn(iColumn) {
	// Delete column
	var iDeleted = oGrid.deleteColumns({
		columns: [iColumn]
	});
	// Show result
	alert('Deleted ' + iDeleted + ' columns.');
}

/*
 * Renames column.
 */
function renameColumn(iColumn, sTitle) {
	// Rename column
	var iRenamed = oGrid.setFieldTitle(oGrid.getFieldById(iColumn), sTitle);
	// Show result
	alert('Renamed ' + iRenamed + ' columns.');
}

</script>

	<noscript>
		<br/>
		This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'>
		AJAX Component</a> - Zapatec DHTML Grid Widget, but your browser does not support Javascript.
		<br/>
		<br/>
	</noscript>      
		<br/><br/><br/>
		<div class="footer" style='width: 778px; text-align:center; margin-top:2em'>
		&copy; 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
		</div>
</body>
</html>