[ 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: splicexml.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 and delete rows using spliceXml method</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" />


	<script type="text/javascript" src="../src/zpgrid-xml.js"></script>


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Insert, replace and delete rows using spliceXml method</div>



<div class='leftCol'>
	<h3>Controls</h3>

	<form name="test" style="font: 11px arial, sans-serif">
		<fieldset>
			<p>Insert or replace rows</p>
			<p>
				Column 1: <input type="text" name="col11" size="5" /><br />
				Column 2: <input type="text" name="col12" size="5" /><br />
				Column 3: <input type="text" name="col13" size="5" /><br />
			</p>
			<p>
				Column 1: <input type="text" name="col21" size="5" /><br />
				Column 2: <input type="text" name="col22" size="5" /><br />
				Column 3: <input type="text" name="col23" size="5" /><br />
			</p>
			<p>
				<input type="radio" name="insAfter" checked="checked"/>At
				<input type="radio" name="insAfter"/>After<br/>
				row #: <input type="text" name="insRowNum" size="1"/><br/>
				(leave blank to append to the end of grid)
			</p>
			<p>
				<input type="button" value="Insert" onclick="insertRows()" />
				<input type="button" name="rplcButton"value="Replace" onclick="replaceRows()" />
			</p>
			<p>
				Note: If grid is sorted, new rows will appear in the sort order.
			</p>
		</fieldset>
		<fieldset>
			<p>Delete rows</p>
			<p>
				Starting at row #: <input type="text" name="delAtRow" size="1"/><br />
				Number of rows: <input type="text" name="delNum" size="1"/><br />
			</p>
			<p>
				<input type="button" name="delButton" value="Delete" onclick="deleteRows()" />
			</p>
			<p>
				Note: Row # should be entered in original (unsorted) order.
			</p>
		</fieldset>
	</form>

</div>

<div class='mainCol'>

<p>Grid <b>spliceXml</b> method allows to do following operations with one or several rows at once:
	<ul>
		<li>Insert into the specified position</li>
		<li>Append to the end of grid</li>
		<li>Replace</li>
		<li>Delete</li>
	</ul>
</p>
<p>It works like <b><a href="splice.html">splice</a></b> method, but takes in XMLDocument object instead of JSON object.</p>
<p>Note: XML string can be converted to XMLDocument object using <b>Zapatec.Transport.parseXml()</b> function.</p>

<div id="myGrid"></div>

</div>

<script type="text/javascript" >

/*
 * Grid source
 */
var strXmlSource = '<grid><table><fields>' +
 '<field nosort="true"><title>Column 1</title><datatype>string</datatype></field>' +
 '<field nosort="true"><title>Column 2</title><datatype>string</datatype></field>' +
 '<field nosort="true"><title>Column 3</title><datatype>string</datatype></field>' +
 '</fields><rows>' +
 '<row><cell>Row 0</cell><cell>Row 0</cell><cell>Row 0</cell></row>' +
 '<row><cell>Row 1</cell><cell>Row 1</cell><cell>Row 1</cell></row>' +
 '<row><cell>Row 2</cell><cell>Row 2</cell><cell>Row 2</cell></row>' +
 '</rows></table></grid>';

/*
 * Initialize grid
 */
var objGrid = new Zapatec.Grid({
	// Use XML string as source
	source: strXmlSource,
	sourceType: 'xml',
	// Use "myGrid" div as container for the grid
	container: 'myGrid',
	// Use "lightblue" theme
	theme: 'lightblue'
});

/*
 * Inserts one or several rows
 */
function insertRows() {
	var objForm = document.forms.test;
	// Number of rows added
	var iAdded = 0;
	// Get rows to insert
	var strRows = '';
	if (objForm.col11.value !== '' || objForm.col12.value !== '' ||
	 objForm.col13.value !== '') {
		strRows += '<row><cell>' + objForm.col11.value + '</cell><cell>' +
		 objForm.col12.value + '</cell><cell>' + objForm.col13.value +
		 '</cell></row>';
		iAdded++;
	}
	if (objForm.col21.value !== '' || objForm.col22.value !== '' ||
	 objForm.col23.value !== '') {
		strRows += '<row><cell>' + objForm.col21.value + '</cell><cell>' +
		 objForm.col22.value + '</cell><cell>' + objForm.col23.value +
		 '</cell></row>';
		iAdded++;
	}
	// Get position
	var iAtRow = '';
	if (objForm.insAfter[0].checked && objForm.insRowNum.value.length) {
		iAtRow = objForm.insRowNum.value * 1;
	}
	var iAfterRow = '';
	if (objForm.insAfter[1].checked && objForm.insRowNum.value.length) {
		iAfterRow = objForm.insRowNum.value * 1;
	}
	// Form XML string
	var strXml = '<grid><table><atrow>' + iAtRow + '</atrow><afterrow>' +
	 iAfterRow + '</afterrow><rows>' + strRows + '</rows></table></grid>';
	// Change grid
	var arrRemoved =
	 objGrid.spliceXml(Zapatec.Transport.parseXml({strXml: strXml}));
	// Displays splice result
	displaySpliceResult(iAdded, arrRemoved);
	// Enabling Delete and Replace buttons
	if (objGrid.getRows().length == 1) {
		objForm = document.forms.test;
		objForm.delButton.disabled = false;
		objForm.rplcButton.disabled = false;
	}
}

/*
 * Replaces one or several rows
 */
function replaceRows() {
	var objForm = document.forms.test;
	// Get number of rows to remove
	var iHowMany = 0;
	// Get rows to insert
	var strRows = '';
	if (objForm.col11.value !== '' || objForm.col12.value !== '' ||
	 objForm.col13.value !== '') {
		strRows += '<row><cell>' + objForm.col11.value + '</cell><cell>' +
		 objForm.col12.value + '</cell><cell>' + objForm.col13.value +
		 '</cell></row>';
		iHowMany++;
	}
	if (objForm.col21.value !== '' || objForm.col22.value !== '' ||
	 objForm.col23.value !== '') {
		strRows += '<row><cell>' + objForm.col21.value + '</cell><cell>' +
		 objForm.col22.value + '</cell><cell>' + objForm.col23.value +
		 '</cell></row>';
		iHowMany++;
	}
	// Get position
	var iAtRow = '';
	if (objForm.insAfter[0].checked && objForm.insRowNum.value.length) {
		iAtRow = objForm.insRowNum.value * 1;
	}
	var iAfterRow = '';
	if (objForm.insAfter[1].checked && objForm.insRowNum.value.length) {
		iAfterRow = objForm.insRowNum.value * 1;
	}
	// Form XML string
	var strXml = '<grid><table><atrow>' + iAtRow + '</atrow><afterrow>' +
	 iAfterRow + '</afterrow><howmany>' + iHowMany + '</howmany><rows>' +
	 strRows + '</rows></table></grid>';
	// Change grid
	var arrRemoved =
	 objGrid.spliceXml(Zapatec.Transport.parseXml({strXml: strXml}));
	// Displays splice result
	displaySpliceResult(iHowMany, arrRemoved);
}

/*
 * Deletes one or several rows
 */
function deleteRows() {
	var objForm = document.forms.test;
	// Get position
	var iAtRow = '';
	if (objForm.delAtRow.value !== '') {
		iAtRow = objForm.delAtRow.value * 1;
	}
	// Get number of rows to remove
	var iHowMany = 0;
	if (objForm.delNum.value !== '') {
		iHowMany = objForm.delNum.value * 1;
	}
	// Form XML string
	var strXml = '<grid><table><rows atRow="' + iAtRow + '" howMany="' +
	 iHowMany + '"></rows></table></grid>';
	// Change grid
	var arrRemoved =
	 objGrid.spliceXml(Zapatec.Transport.parseXml({strXml: strXml}));
	// Displays splice result
	displaySpliceResult(0, arrRemoved);
	// Disabling Delete and Replace buttons
	if (objGrid.getRows().length == 0) {
		objForm = document.forms.test;
		objForm.delButton.disabled = true;
		objForm.rplcButton.disabled = true;
	}
}

/*
 * Displays splice result
 */
function displaySpliceResult(iAdded, arrRemoved) {
	// Will hold the message
	var strMessage = '';
	// Number of added rows
	if (iAdded) {
		strMessage += 'Added ' + iAdded + ' row' +
		 (iAdded > 1 ? 's' : '') + '.';
	} else {
		strMessage += 'Nothing was added.';
	}
	// Number of removed rows
	if (arrRemoved instanceof Array) {
		// Get ids of removed rows
		var arrRemovedIds = [];
		for (var iRow = 0; iRow < arrRemoved.length; iRow++) {
			arrRemovedIds.push(objGrid.getRowId(arrRemoved[iRow]));
		}
		if (arrRemoved.length) {
			strMessage += ' Replaced or removed ' + arrRemoved.length + ' row' +
			 (arrRemoved.length > 1 ? 's' : '') +
			 '. Ids of replaced or removed rows: ' + arrRemovedIds.join(', ') + '.';
		} else {
			strMessage += ' Nothing was replaced or removed.';
		}
	} else {
		strMessage = 'Error occured during splice.';
	}
	// Display message
	alert(strMessage);
}

</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>