[ 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: editable_xml.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="description" content=" This example shows how to load data in XML format from the server into the editable grid dynamically, edit them, and then send changes back to the server. Press Load data from the server button to load data. Using grid spliceXml method you can change the content of the grid, adding new rows while removing old rows. Double-click any cell except Item to edit it. The Item column is not editable. After one or several cells are edited, press Save changes to the server button to send changes back to the server. See also example with JSON format. ">
	<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 - Zapatec Grid communications with server using XML example</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>
	<script type="text/javascript" src="../src/zpgrid-editable.js"></script>
	<script type="text/javascript" src="../src/zpgrid-validate.js"></script>
	<script type="text/javascript" src="../../zpslider/src/slider.js"></script>


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Zapatec Grid communications with server using XML example</div>

<div class='leftCol'>
	<h3> Controls</h3>
	<form onsubmit="return filter(this)"><br/>
		<fieldset>
			Filter Rate Period<div id="filterOutRate"></div>
		</fieldset>
		<fieldset>
			<p>Range of Dates</p>
			<center>
			<div id="rangeOfDatesScale"></div>
			<div id="rangeOfDates" style="white-space: nowrap"></div>
			</center>
		</fieldset>
		<fieldset>
			<p>Range of Minutes</p>
			<center>
			<div id="rangeOfMinutesScale"></div>
				<div id="rangeOfMinutes"></div>
			</center>
		</fieldset>
		<fieldset>
			Filter Minutes<div id="filterOutMinutes"></div>
		</fieldset>
		<fieldset>
			<p>Find Value</p>
			<p><input type="checkbox" name="isRegExp"/> Use regular expression</p>
			<p>Search: <input type="text" name="textFilter" size="6"/>
			<input type="button" name="buttonText" value="Go" onclick="filter(this.form)"/></p>
		</fieldset>
		<fieldset>
			<p>Reset all filters</p>
			<input type="button" value="Reset" onclick="resetControls(this.form)"/></p>
		</fieldset>
	</form>

</div>
			<div id="2"></div>
			<div id="1"></div>
			<div id="3"></div>
			<div id="4"></div>
			<div id="5"></div>    
			<div id="scroll" style="margin-left : 300px;">
			</div>

<div class='mainCol'>
	Zapatec Grid communications with server using XML example.

		<div class='zpCalDemoText'>
		<ul>
		
		
		<li>This example shows how to load data in XML format from the server into
		 the editable grid dynamically, edit them, and then send changes back to
		 the server.</li>
		<li>Press <i>Load data from the server</i> button to load data.</li>
		<li>Using grid <b>spliceXml</b> method you can change the content of the
		 grid, adding new rows while removing old rows.</li>
		<li>Double-click any cell except <b>Item</b> to edit it.</li>
		<li>The <b>Item</b> column is not editable.</li>
		<li>After one or several cells are edited, press <i>Save changes to the
		 server</i> button to send changes back to the server.</li>
		<li>See also <a href="editable_json.html">example with JSON format</a>.</li>

		</ul>
		</div>


	<table>
		<tr>
			<td id="gridContainer">
				<table id="gridSource">
					<tr>
						<td class="zpGridTypeInt zpGridTypeNoedit">Item</td>
						<td class="zpGridTypeDate">Date</td>
						<td class="zpGridTypeTime">Time</td>
						<td class="zpGridTypeString zpGridTypeList">Rate Period</td>
						<td class="zpGridTypeString">Phone Number</td>
						<td class="zpGridTypeInt">Minutes</td>
						<td class="zpGridTypeFloat">Total Charges</td>
						<td class="zpGridTypeBoolean">Local</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
	<form style="margin: 20px 0px">
		<input type="button" id="buttonLoad" value="Load data from the server" onclick="loadData()" />
		<input type="button" id="buttonSave" value="Save changes to the server" onclick="saveData()" />
	</form>
	<p>Note: This demo shows interaction with server and thus it must be invoked from server. It doesn't work if opened from local hard drive.</p>
</div>

<script type="text/javascript">

	// Check if demo loaded from server
	var strLocation = document.location.toString();
	if (strLocation.indexOf('http') != 0) {
		alert('Since this example demonstrates interaction between server and javascript application, it must be loaded from server. This example does not work if opened from local hard drive.');
	}

	/*
	 * Initialize grid
	 */
	var objGrid = new Zapatec.EditableGrid({

		// Ininialize grid from the HTML table
		source: 'gridSource',
		sourceType: 'html',

		// Use "winxp" theme
		theme: 'winxp',

		// Put the grid into element with id "gridContainer"
		container: 'gridContainer',

				// Initially sort ascending by first column
		sortColumn: 0,

		// Display 10 rows per page
		rowsPerPage: 10,

		// Display filter out forms
		filterOut: [
			// Filter Rate Period
			{
				// Use column number 3 (first column number is 0)
				column: 3,
				// Put checkboxes into element with id "filterOutRate"
				container: 'filterOutRate',
				// This will press "Filter" button for you if you changed range of items
				// or minutes and forgot to press it
				onclick: 'filter(this.form)'
			},
			// Filter Minutes
			{
				// Use column number 5 (first column number is 0)
				column: 5,
				// Sort descending
				sortDesc: true,
				// Put checkboxes into element with id "filterOutMinutes"
				container: 'filterOutMinutes',
				// This will press "Filter" button for you if you changed range of items
				// or minutes and forgot to press it
				onclick: 'filter(this.form)'
			}
		],

		// Event listeners
		eventListeners: {
			'gridInitialized': onGridInit,
			'gridModified': onGridInit,
			'gridMovedColumn': onGridMovedColumn
		}

	});

	/*
	 * Loads grid updates from the server.
	 */
	function loadData() {
		// Disable button
		document.getElementById('buttonLoad').disabled = 'disabled';
		// Load data
		Zapatec.Transport.fetchXmlDoc({
			// Server-side script
			url: 'editable_xml.xml',
			// onLoad handler
			onLoad: updateGrid,
			// Show "Loading" animated GIF
			busyContainer: 'gridContainer'
		});
	}

	/*
	 * Updates grid with data received from the server.
	 */
	function updateGrid(objData) {
		// Remove filters and go to the first page
		objGrid.resetFilters();
		// Replace certain rows
		objGrid.spliceXml(objData);
		// Enable button
		document.getElementById('buttonLoad').disabled = '';
	}

	/*
	 * Buffer to hold edited cell values.
	 */
	var arrChanges = [];

	/*
	 * Accumulates changes to send them later to the server.
	 */
	function logChanges(objCell) {
		// Get row from cell
		var objRow = this.getRowByCell(objCell);
		// Log changes
		arrChanges.push(
			// Edited item number
			'<item>' + this.getCellValueOriginal(this.getCellByRow(objRow, 0)) +
			'</item>' +
			// Edited column number
			'<column>' + this.getCellId(objCell) + '</column>' +
			// New cell value
			'<value>' + this.getCellValueOriginal(objCell) + '</value>'
		);
		// Redraw sliders
		onGridInit.call(objGrid);
	}

	/*
	 * Changes will be accumulated with logChanges function to send them later to
	 * the server
	 */
	objGrid.addEventListener('gridEdited', logChanges);

	/*
	 * Sends changes to the server.
	 */
	function saveData() {
		// Check buffer
		if (!arrChanges.length) {
			alert('There were no changes since last saving.');
			return;
		}
		// Disable button
		document.getElementById('buttonSave').disabled = 'disabled';
		// Send changes to the server
		Zapatec.Transport.fetch({
			// Server-side script
			url: 'editable_xml.php',
			// Use POST method
			method: 'POST',
			// Arguments string
			content: 'changes=' +
			 escape(serializeChanges()),
			// onLoad handler
			onLoad: showResponse,
			// Show "Saving" animated GIF
			busyContainer: 'gridContainer',
			// Use standard "Saving" animated GIF
			busyImage: 'zpsaving.gif'
		});
		// Clean feedback
		arrChanges = [];
	}

	/*
	 * Forms XML fragment to send to the server.
	 */
	function serializeChanges() {
		var strXml = '<changes>';
		for (var iChange = 0; iChange < arrChanges.length; iChange++) {
			strXml += '<change>' + arrChanges[iChange] + '</change>';
		}
		strXml += '</changes>';
		return strXml;
	}

	/*
	 * Shows server response.
	 */
	function showResponse(objResponse) {
		// Show response
		alert(objResponse.responseText);
		// Enable button
		document.getElementById('buttonSave').disabled = '';
	}

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