[ Mini Kiebo ]

Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586 Path: D:/Backup/14082024/Data/htdocs/htdocs/simpeg/zapatec/zpgrid/zpgrid/demo/ [ Home ]
File: asis.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=" Data displayed with the show_asis option presents data in its original format, yet all the grid features are in effect. For example, each column is sorted based on the internal field type yet presented in its original format. Data is converted with convert the option. This option defines the function to convert the grid cell from the original value to the grid type value. For example, the Hours column can have an original format of '# week # days # hours'. This convert function converts this string to a number (hours). Also notice how the Link column uses the anchor text to sort but you can still have the HTML anchor to click on. Apply a dynamic style for each cell with the funcStyle option. Here the Price column displays negative numbers in red and is right-aligned. The convert function provides easy unit-of-measurement word translation. Use the Show Both? and the Show Converted? buttons to change the grid data presentation. With the Zapatec Grid, you can automatically convert the grid into a flatfile format. For example, the user can convert the grid into CSV format to import the data easily into a spreadsheet application. ">
	<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 - Show Data AS IS</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-export.js"></script>
	<script type="text/javascript" src="../../utils/parse.js"></script>
	<script type="text/javascript" src="../../utils/word2num.js"></script>
	<style>
		.theGrid {
		background:#CCFFFF;
		border: 3px solid black;
		padding-left: 10px;
		margin-bottom: 5px;
		padding-bottom:10px;
		}

		.theGrid p {
		border: 1px solid black;
		margin:5px;
		padding:3px;
		}

		.theGrid p.title {
		text-decoration:underline;
		font-weight:bold;
		font-size:150%;
		text-align:center;
		border:none;
		}
		.rawTable {
		background:white;
		}
	</style>


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Show Data AS IS</div>

The as_is features let you preserve your original data format and still use the powerful Zapatec grid features.  This is useful for migrating legacy tables to the feature-rich Zapatec Grid.

		<div class='zpCalDemoText'>
		<ul>
		
		
	<li>Data displayed with the <b>show_asis</b> option presents data in its original format, yet all the grid features are in effect. For example, each column is sorted based on the internal field type yet presented in its original format.</li>
	<li>Data is converted with <b>convert</b> the option.  This option defines the function to convert the grid cell from the original value to the grid type value.  For example, the Hours column can have an original format of '# week # days # hours'.  This convert function converts this string to a number (hours).  Also notice how the Link column uses the anchor text to sort but you can still have the HTML anchor to click on.</li>
	<li>Apply a dynamic style for each cell with the <b>funcStyle</b> option.  Here the Price column displays negative numbers in red and is right-aligned.</li>
	<li>The convert function provides easy unit-of-measurement word translation. </li>
	<li>Use the Show Both? and the Show Converted? buttons to change the grid data presentation.</li>
	<li>With the Zapatec Grid, you can automatically convert the grid into a <b>flatfile</b> format.  For example, the user can convert the grid into CSV format to import the data easily into a spreadsheet application.</li>

		</ul>
		</div>



<!-- RAW Table, NO Grid -->
<div id="id-div-raw" class=theGrid align=center>
<p class=title>Table before Zapatec Grid.  See RAW data.</p>
</div>

<!-- Full Conversion -->
<div class=theGrid>
<p class=title>show_asis, convert, funcStyle ALL used</p>
<p>In this grid the <b>show_asis</b> option is set to true.  You will see the data based on the original table cell values.  However, the Zapatec Grid will use the option <b>convert</b> to convert each cell to a quantifiable format for internal grid processing (sorting).  The only conversion to the presentation is the GridFieldType. The <b>funcStyle</b> option is used to define the style of the cells dynamically, based on the cells' contents. See the Price column, where negative numbers display in <span style='color:red;'>red</span>.
</p>
<div id="id-grid1" align=center>
<table class=rawTable border=2 id=id-table-orig cellspacing="0" cellpadding="3">
<tr>

<td class=zpGridTypeFloat>Disk Size</td>
<td class=zpGridTypeInt>Hours</td>
<td class=zpGridTypeFloat>Price</td>
<td class=zpGridTypeDate>Date</td>
<td class=zpGridTypeInt>Weight (oz)</td>
<td class=zpGridTypeInt>Quantity</td>
<td class=zpGridTypeString>Link</td>
</tr>

<tr>
<td>20 MB</td>
<td>2 days 1 hour</td>
<td>-10 hundred</td>
<td>Mar 14, 2006</td>
<td>1 lb 2 oz</td>
<td>1,234</td>
<td><a href='http://www.zapatec.com/website/main/products/grid'>Grid</a></td>
</tr>
<tr>
<td>15 MB</td>
<td>1 week, 2 days, 1 hour</td>
<td>9 hundred</td>
<td>Mar 15, 2006</td>
<td>2 lb 1 oz</td>
<td>20.2</td>
<td><a href='http://www.zapatec.com/website/main/products/prod1'>Calendar</a></td>
</tr>
<tr>
<td>10 GB</td>
<td>1 week, 1 day, 1 hour</td>
<td>9 hundred 28 cents</td>
<td>Apr 1, 2006</td>
<td>15 oz</td>
<td>58</td>
<td><a href='http://www.zapatec.com/website/main/products/menu'>Menu</a></td>
</tr>
<tr>
<td>50 MB</td>
<td>1 week</td>
<td>-50 cents</td>
<td>Apr 1, 2006</td>
<td>3 lb</td>
<td>-8</td>
<td><a href='http://www.zapatec.com/website/main/products/forms'>Zapatec Forms</a></td>
</tr>
<tr>
<td>25 GB</td>
<td>1 hour</td>
<td>0 cent</td>
<td>Apr 1, 2006</td>
<td>5 oz</td>
<td>none</td>
<td><a href='#'>Empty</a></td>
</tr>

</table>
</div> <!-- id-grid1 -->
<span style='font-size:12px'>Show Both? </span>
<input type=checkbox name=cbBoth value="Show Both?" 
title='Click ON to show Both Original and Converted data, OFF to show based on Show Converted.' 
onclick="
	boolShowBoth = this.checked;
	if (boolShowBoth) {
		grid1.config.show_asis = {bBoth:true, funcShow:show_data};
	} else if (boolShowConverted) {
		grid1.config.show_asis = false;
	} else {
		grid1.config.show_asis = {bBoth:false, funcShow:show_data};
	}
	grid1.show();
">

<span style='font-size:12px'>Show Converted? </span>
<input type=checkbox 
title='Click ON to show Converted data, OFF to show AS IS (Original) data.'
onclick="
	boolShowConverted = this.checked;
	if (boolShowBoth) {
		grid1.config.show_asis = {bBoth:true, funcShow:show_data};
	} else if (boolShowConverted) {
		grid1.config.show_asis = false;
	} else {
		grid1.config.show_asis = {bBoth:false, funcShow:show_data};
	}
	grid1.show();
">
	<br>
	<br>
<p>
Flatfile - These flat file scenarios shows you how to create a flat file from  the grid.  The format of the data in the flat file can be forced.  You can force show_asis or force converted data.<br>
The grid.flatfile(FS, RS, intMode) method is called to create the fla tfile.  FS is the field separator, RS is the record separator, and intMode defines the format of the data, asis or converted.
</p>
Flat file results are shown in a new window:<br>
	1. <input type="button" value="Check As Is"
	title="If show_asis set then check show_asis settings else show converted data"
	onclick="flatfile(this, 1, 'Show based on show_asis settings')">

	2. <input type="button" value="Force Converted"
	title="Flatfile contains forced converted data."
	onclick="flatfile(this, 2, 'Force Converted')">

	3. <input type="button" value="As Is with funcShow"
	title="Flatfile contains AS IS data and funcShow conversions, see Price."
	onclick="flatfile(this, 3, 'As Is with funcShow, see Price')">

	4. <input type="button" value="As Is ONLY"
	title="Flatfile contains AS IS.  NO Conversions."
	onclick="flatfile(this, 4, 'As Is, NO CONVERSIONS')">

	<script type=text/javascript>
	function flatfile(cb, intMode, strDesc) {
		cb.checked=false
		var strFlatfile=grid1.flatfile(',', '\n', intMode)
		var win=window.open('','flatfile', 'height=250,width=650,screenX=600,screenY=550');
		win.focus();
		win.document.open('text/html', 'replace');
		win.document.write('<HTML><HEAD><TITLE>Flatfile of Grid in CSV format - '+strDesc+'</TITLE></HEAD><BODY>\n');
		win.document.write('Flatfile of Grid in CSV format - ' + strDesc + ':<br>')
		win.document.write('<textarea style=\'border:medium solid black;\' wrap=off rows=' + grid1.getRows().length + ' cols=40>')
		win.document.write(strFlatfile)
		win.document.write('</textarea>')
		win.document.write('</BODY></HTML>\n');
		win.document.close();
		}
	</script>
</div>

<div class=theGrid>
<p class=title>Show Converted data</p>
<p>Use the <b>convert</b> option to convert the raw data and display the converted data.  Notice how the presentation of the converted data is not as human-readable as the original format.
</p>
<div id="id-grid2" align=center>
Zapatec Grid 2<br>
</div>
</div>

<!-- NO CONVERSIONS, ONLY GridFieldType conversion -->
<div class=theGrid>
<p class=title>show_asis, convert, funcStyle NOT used</p>
<p>
This demo shows the display when the <b>convert</b> and  <b>show_asis</b> options are not used.
In this case, the displayed grid data is not meaningful, because the table data was not converted into a quantifiable value by the <b>convert</b> option.
See the Zapatec Grid where the only conversion is the GridFieldType. The number-based columns are stripped of non-numeric characters.  See how Disk Space is stripped of MB or GB and displays only numbers.  Likewise for Hours, Price, and Weight, which are are stripped of non-numeric characters.
</p>
<div id="id-grid3" align=center></div>
</div>

<div class=theGrid>
<p class=title>Show ASIS and Converted in same cell</p>
<p>
This grid shows the asis and converted values.  Each cell has the format ASIS=Converted.  The converted value is calculated based on the <b>convert</b> option, which calls a function that takes the asis value and converts it to a number.  For example, if ASIS=<b>20 MB</b>, this function converts <b>20 MB</b> to <b>20480000000</b>.  In the grid cell you see 
<br>
<b>
	<u>20 MB</u><br>
	20480000000
</b>
<br>In summary, the asis values are the presentable data and the converted values are those used for grid calculations such as sorting.
<ul>The Quantity field type is zpGridTypeInt (Integer).  Here are examples of the GridFieldType conversion for zpGridTypeInt:
<li><b>20.2</b> is the original value and is converted to <b>20</b>. The decimal point is dropped.</li>
<li><b>1,234</b> is the original value and is converted to <b>1234</b>. The comma is dropped.</li>
<li><b>none</b> is the original value and is converted to <b>NaN</b>. NaN (Not a Number) means this value is undefined.</li>
</ul>
</p>
<div id="id-grid4" align=center></div>
</div>


<script type=text/javascript>

// Column numbers
var FLD_SIZE=0
var FLD_HOURS=1
var FLD_PRICE=2
var FLD_DATE=3
var FLD_WEIGHT=4
var FLD_QTY=5
var FLD_LINK=6


function formatCurrency(num) {
num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num)) num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();
if(cents<10) cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
	num = num.substring(0,num.length-(4*i+3))+','+ num.substring(num.length-(4*i+3));

return (((sign)?'':'-') + '$' + num + '.' + cents);
}

/*-----------------------------------------------------------------------------------
	Dynamically change the style of a cell based on the contents.
	objCell - Zapatec.GridCell object
	return undefined if NO change to style
	return the inline style that should be applied to this cell

	This function will set any negative number to RED.
	Also, all number aligned right.
*/
	function myStyle(objGrid, objCell) {
		if (objGrid.getCellId(objCell) != FLD_PRICE) {
			return;
		}
		if (objGrid.getCellValue(objCell) < 0) {
			return 'color: red; text-align: right;'
		}
		return 'text-align: right;'
	}

/*-----------------------------------------------------------------------------------
	Conversion function for this cell.
	This gets called in Zapatec.GridField.prototype.newCell.
	iCol - current column number
	strNum - Original value 
	return undefined if no conversion, else return the value the cell should be
*/
var word2num=new Zapatec.word2num()

	function convert(objGrid, objCell) {
	var strVal=objGrid.getCellValueOriginal(objCell);
	var num, strOut
	var p=new Zapatec.Parse(strVal, /\s/)

		switch(objGrid.getCellId(objCell)) {
			case FLD_SIZE:  return word2num.val2num(strVal, /\s+/, word2num.arrWord2Num_computer)
			case FLD_HOURS: return word2num.val2num(strVal, /,?\s+,?/, word2num.arrWord2Num_hour)
			case FLD_PRICE: return word2num.val2num(strVal, /\s+/, word2num.arrWord2Num_money)
			case FLD_WEIGHT: 
				// Create a custom array for this unit of measurement
				var arrWeight=[]
				arrWeight['lb']=16
				arrWeight['oz']=1
				return word2num.val2num(strVal, /\s+/, arrWeight)

			case FLD_LINK: 
				return strVal.replace(/<[^>]*>/g, "")

			}
	}


	// Function to visually present the data
	// Does NOT effect sorting, just visual
	function show_data(objGrid, objCell) {
		if (arguments.length > 1) {
			objCell = arguments[1];
		}
		var value=objGrid.getCellValue(objCell);
		if (objGrid.getCellId(objCell) == FLD_PRICE) {
			return formatCurrency(value);
		}
		return objGrid.getCellValueOriginal(objCell);
	}

	// Original table
	 var objTable=document.getElementById('id-table-orig')

	function clone_table(divId, newId) {
	// Clone the Table and display RAW values
	var clone=objTable.cloneNode(true)
	clone.id=newId
	 var div=document.getElementById(divId)
	div.appendChild(clone)
	}

	clone_table('id-div-raw', 'id-table-raw')
	clone_table('id-grid1', 'id-table1')
	clone_table('id-grid2', 'id-table2')
	clone_table('id-grid3', 'id-table3')
	clone_table('id-grid4', 'id-table4')

	//------------------------------------------------------------------------
	// Converts the table to grid
	var grid1 = new Zapatec.Grid({
		convert: convert,
		// Define conversion function for cells */
		show_asis:{bBoth:false, funcShow:show_data},
		funcStyle:myStyle,
		// Where to put the table?
		// NOTE: table must be enclosed in this div or it will be displayed
		container: 'id-grid1',
		// Where is the data coming from?  Table ID
		source: 'id-table1',
		//source: 'id-table-orig',
		// Source of data is HTML (table)
		sourceType: 'html',
		sortColumn: FLD_SIZE,
		selectRows: false,
		selectCells: false
	});

	//------------------------------------------------------------------------
	var grid2 = new Zapatec.Grid({
		convert: convert,
		// Define conversion function for cells */
		//show_asis:true,
		//funcStyle:myStyle,
		// Where to put the table?
		// NOTE: table must be enclosed in this div or it will be displayed
		container: 'id-grid2',
		// Where is the data coming from?  Table ID
		source: 'id-table2',
		// Source of data is HTML (table)
		sourceType: 'html',
		sortColumn: FLD_SIZE,
		selectRows: false,
		selectCells: false
	});

	//------------------------------------------------------------------------
	var grid3 = new Zapatec.Grid({
		//convert: convert,
		// Define conversion function for cells */
		//show_asis:{bBoth:false, funcShow:show_data},
		//funcStyle:myStyle,
		// Where to put the table?
		// NOTE: table must be enclosed in this div or it will be displayed
		container: 'id-grid3',
		// Where is the data coming from?  Table ID
		source: 'id-table3',
		// Source of data is HTML (table)
		sourceType: 'html',
		sortColumn: FLD_SIZE,
		selectRows: false,
		selectCells: false
	});

	//------------------------------------------------------------------------
	var grid4 = new Zapatec.Grid({
		convert: convert,
		// Define conversion function for cells */
		show_asis:{bBoth:true, funcShow:show_data},
		funcStyle:myStyle,
		// Where to put the table?
		// NOTE: table must be enclosed in this div or it will be displayed
		container: 'id-grid4',
		// Where is the data coming from?  Table ID
		source: 'id-table4',
		// Source of data is HTML (table)
		sourceType: 'html',
		sortColumn: FLD_SIZE,
		selectRows: false,
		selectCells: false
	});

	//------------------------------------------------------------------------
	var boolShowBoth = false;
	var boolShowConverted = false;

</script>

</b>

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