guide.html

dhtmlxGrid 是跨浏览器的 JavaScript 表格控制组件（Grid Control）

	<script language="JavaScript" src="menu/js/dhtmlXMenuBar_cp.js"></script>
	<script>
	//create function for processing menu commands
		function onButtonClick(menuitemId,gridItemId)
		{
		    //get array, first element of which is row ID, second - cell index
			var data=gridItemId.split("_"); //rowId_colInd
		    //use input data to perform any action you like 
			mygrid.setRowTextStyle(data[0],"background-color:"+menuitemId.split("_")[1]);
		}
	//Create menu
		aMenu=new dhtmlXContextMenuObject('120',0,"Demo menu");
		aMenu.menu.setGfxPath("../imgs/");
		aMenu.menu.loadXML("menu/_context.xml");
		aMenu.setContextMenuHandler(onButtonClick);
	//initialize grid and attach menu to it
		mygrid = new dhtmlXGridObject('gridbox');
		...
		mygrid.enableContextMenu(aMenu);
		mygrid.init();
		mygrid.loadXML("grid_links.xml");
	</script>
</XMP>	
Second parameter which gets function which processes menu commands 
is a complex string consists of row ID and column index delimited with "_".

<strong>HTTPS compatibility</strong>
<br><br>
For HTTPS compatibility we added two more parameters to context menu constructor:<br>
<li>Images URL</li>
<li>Dummy page URL (url of the page to use for iframes src /now they are empty as iframes are used to make menu be positioned under selectboxes in IE/ in menu to make it compatible with https)		
<XMP>
<script>
//init menu compatible with sHTML
	aMenu=new dhtmlXContextMenuObject('120',0,"Demo menu","imgs/","empty.html");
	...
</script>
</XMP>
</div>

<a name="xml_tree"><h4 >TreeGrid XML structure</h4></a><div class="block">
See <a href="#treegrid">"Tree-&amp;-Grid initialization and usage"</a> for details.
</div>


<a name="smartxml"><h4 >Smart XML Parsing</h4></a><div class="block">
The idea of Smart XML Parsing is simple - the entire tree structute loaded on client side, but only nodes which should be displayed are rendered. This helps to dramaticaly decrease loading time and general performance of large trees. Plus - in the contrary to Dynamical Loading - entrire tree structure is available for most of script methods (for example Search performed agains all nodes - not only rendered). To activate Smart XML Parsing use the following method:
<XMP>
<script>
	tree.enableSmartXMLParsing(true);//false to disable
</script>
</XMP>	
Smart XML Parsing do not work if tree loaded fully expanded.
</div>
	
<a name="checkbox"><h4 >Checkboxes &amp; Radiobuttons</h4></a><div class="block">
dhtmlxGrid supports both: checkboxes and radiobuttons. They are just types of columns you need to specify
before initializtion. For more details see <a href="#excell_use">Use Cell Editors (eXcell)</a> chapter	 	
<XMP>
<script>
	mygrid.setColTypes("ra,ch");
</script>
</XMP>	
You also can specify what value are considered as False for checkboxes and radiobuttons:
<XMP>
<script>
	mygrid.raNoState = "No";//"No" will be "unchecked", all other values will be "checked"
	mygrid.chNoState = "0";//"0" will be "unchecked", all other values will be "checked"
	mygrid.init()
</script>
</XMP>	

</div>		



<a name="guide_perf"><h4 >Increasing Performance</h4></a><div class="block">
Taking into account the general low performance of DHTML we introducrd two ways of increasing performance of large grids:<br>
1. <a href="#dynload">Dynamical Loading</a><br>
2. <a href="#dynload">Buffering</a><br>
3. <a href="#distparse">Distributed Parsing</a><br>
4. Split the content of your grid into pages
</div>	

<a name="distparse"><h4 >Distributed Parsing</h4></a><div class="block">
To decrease time before grid appears on page you can enable Distributed Parsing. 
In this case grid will be shown right after first portion of data parsed although it continue parsing other portions in async mode. 
Changing number of records per portion and delay (in milliseconds) you can change the speed of loading.
<XMP>
	mygrid.enableDistributedParsing(true/false,record-per-portion,delay-time);
</XMP>
</div>	

<a name="multiline"><h4 >Multiline grid rows</h4></a><div class="block">
...allows displaying grid rows in multiline mode (it is default state for Mozilla) or turn it of to have single-line rows (IE only). 
To enable multiline feature you need to do the following: 
<XMP>
	mygrid.enableMultiline(true/false);
</XMP>
</div>	

<a name="multisel"><h4 >Multiselection in Grid</h4></a><div class="block">
To enable multiselection mode you need to do the following: 
<XMP>
	mygrid.enableMultiselect(true/false);
</XMP>
Use [Shift/Ctrl] keys to select multiple rows at a time.
</div>	

<a name="dnd"><h4 >Drag-n-drop in Grid</h4></a><div class="block">
To enable/disable drag-and-drop within grid you need to do the following: 
<XMP>
	mygrid.enableDragAndDrop(true/false);
</XMP>
<br>
There are two modes of drag-n-drop in TreeGrid. You can manage it with <em>setDragBehavior</em>
method passing following values as method parameter:
<br>
<li>"child" - deafult mode - drop-as-child</li>
<li>"sibling" - drop as sibling</li>
<br>
Modes can be switched any time.


</div>	

<a name="math"><h4 >Math Formulas in Grid</h4></a><div class="block">
You can define Math formulas for column (with script) or single cell (with xml).<br>
<strong>Math formulas with Script:</strong>
You can attach necessary math formula to column while defining its type with <em>setColTypes</em>. 
Use [=...] to set formula to the nesessary column. 
At the same time you still use any of available <a href="#excell_use">eXcells</a> to format the result:
<XMP>
	mygrid.setColTypes("ed,ed,ed,ed,ed[=c2*c3]");
</XMP>
In the example above <em>c2*c3</em> means that the value of last column should be equel to the product of column 2 value and column 3 value.
Column indexes are zero-based. 
You may use any javascript math operators as long as you refer to correct columns (existing columns with numeric values).  
<br><br>
<strong>Rounding resulting values.</strong>
Togather with Math formulas you may need to use the following grid method to round resulting values:
<XMP>
	mygrid.setMathRound(decimal_places);
</XMP> 
<em>decimal_places</em> - number of digits after point.<br><br>
<strong>Editing formulas in grid.</strong><br>
By default all cells with formulas are read-only, thus user can't change the formula on the fly. 
But you still can enable formula editing using the following method:
<XMP>
	mygrid.enableMathEditing(state);
</XMP>
<em>state</em> - false(by default) means that all formula cells are read-only, true - editable.<br><br>
<br><br>
<strong>Math formulas with XML:</strong>
<XMP>
	<row>
		...
		<cell>=c2*c3</cell>
	</row>
</XMP> 
To set formula for single cell you can define it directly in xml as cell value, starting expression with "=". 
Column type should still be defined with Math formula (see above) or as type "math". 
</div>	

<a name="math_tree"><h4 >Math Formulas in TreeGrid</h4></a><div class="block">
In addition to standard <a href="#math">dhtmlxGrid Math formulas</a> 
TreeGrid has the ability to calculate totals for children values. 
<XMP>
	mygrid.setColTypes("ed,ed,ed,ed,ed[=sum]");
</XMP>
which means that the each parent element in last column will contain the sum of values of its children last column cells. 
</div>	

<a name="lightmousenav"><h4 >Light Mouse Navigation</h4></a><div class="block">
Light Mouse Navigation mode allows moving row selection with mouseover and enables cell editor with single click.
<XMP>
	mygrid.enableLightMouseNavigation(true/false);
</XMP>
</div>	

<a name="confxml"><h4 >Configuration via XML</h4></a><div class="block">
Grid can be configured directly in xml, where you load data from. 
In this case you need only 2-3 script commands to get grid up and running. 
<br>
<span class="important">Important:</span> do not call grid.init() when you configure grid from xml.
<xmp>
	mygrid = new dhtmlXGridObject('gridbox');
   	mygrid.setImagePath("../imgs/");
   	mygrid.loadXML("gridH.xml");//xml which contains configuration block togather with data
</xmp>
<br>
All necessary settings, like columns types and dimentions can be set within xml inside <strong>&lt;head&gt;</strong> tag:<br>
<br>
Since v.1.2 you also can specify grid methods to run before or after grid initialization.
<br>

<XMP>
<rows>
	<head>
		<beforeInit>
			<call command="methodName"><param>string value</param></call>
		</beforeInit>
		<afterInit>
			<call command="methodName"><param>string value</param></call>
		</afterInit>
		<column width="50" type="ed" align="right" color="white" sort="str">Sales</column>
		<column width="80" type="co" align="left" sort="str">Shipping
			<option value="1">1 Day</option>
			<option value="7">1 Week</option>
			...
		</column>
		...
		<settings>
			<colwidth>%</colwidth>
		</settings>
	</head>
	<row>
	...
	</row>
	...
</rows>
</XMP>
<em>Text value</em> of &lt;column&gt; tag will be used as a label for column
<br><br>
Possible attributes for <strong>column</strong> tag are:
<li><em>width</em> - width in px</li>
<li><em>type</em> - type of column (eXcell)</li>
<li><em>align</em> - aligh of text inside</li>
<li><em>color</em> - background color for the column</li>
<li><em>sort</em> - sorting type</li>
<br><br>
Settings inside <strong>settings</strong> tag:<br>
<li>&lt;colwidth&gt; tag value defines uom for width specified in &lt;column width=".." ("%" - for percents, other value for pixels)</li>
<br><br>
<strong>Specifying combobox and selectbox values:</strong><br>
To specify values for <em>co</em> and <em>coro</em> columns add <strong>&lt;option&gt;</strong>
tag(s) inside relative <strong>&lt;column&gt;</strong> tag.<br>
<br>
<strong>Running grid methods from XML</strong>
<br>
<XMP>
<rows>
	<head>
		<beforeInit>
			<call command="setSkin"><param>xp</param></call>
		</beforeInit>
		<afterInit>
			<call command="setColumnHidden"><param>1</param><param>true</param></call>
		</afterInit>
		...
	</head>
</XMP>
Same as with script:
<XMP>
	mygrid = new dhtmlXGridObject('gridbox2');
	...
	mygrid.setSkin("xp");
	mygrid.init();
	mygrid.setColumnHidden(1,true);
</XMP>
</div>	


<a name="dndtree"><h4 >Interaction with dhtmlxTree (drag-and-drop between components)</h4></a><div class="block">
This functionlity available in Professiona Edition only. Both componnets need to have drag-n-drop enabled.<br>
The complexity of drag-n-drop between tree and grid conditioned by different structure of data in them. 
So you need to define what values in grid should go to tree node and how to store them there and vice versa.<br>
There are two methods in grid for this:<br>
<li>treeToGridElement(treeObj,treeNodeId,gridRowId)</li>
<li>gridToTreeElement(treeObj,treeNodeId,gridRowId)</li>
<br>
All you need is to redefine them the way you need. Example:
<XMP>
	//redefine tree-to-grid drop element
	mygrid.treeToGridElement = function(treeObj,treeNodeId,gridRowId){
		this.cells(gridRowId,1).setValue(treeObj.getItemText(treeNodeId));
		if(treeObj.getUserData(treeNodeId,"c0")){
			this.cells(gridRowId,0).setValue(treeObj.getUserData(treeNodeId,"c0"));
			this.cells(gridRowId,1).setValue(treeObj.getUserData(treeNodeId,"c1"));
			this.cells(gridRowId,2).setValue(treeObj.getUserData(treeNodeId,"c2"));
			this.cells(gridRowId,3).setValue(treeObj.getUserData(treeNodeId,"c3"));
			
		}
		return !document.getElementById("dnd_copy").checked;
	}
	//redefine grid-to-tree drop element
	mygrid.gridToTreeElement = function(treeObj,treeNodeId,gridRowId){
		treeObj.setItemText(treeNodeId,this.cells(gridRowId,1).getValue()+"/"+this.cells(gridRowId,2).getValue())
		treeObj.setUserData(treeNodeId,"c0",this.cells(gridRowId,0).getValue())
		treeObj.setUserData(treeNodeId,"c1",this.cells(gridRowId,1).getValue())
		treeObj.setUserData(treeNodeId,"c2",this.cells(gridRowId,2).getValue())
		treeObj.setUserData(treeNodeId,"c3",this.cells(gridRowId,3).getValue())
		return !document.getElementById("dnd_copy").checked;
	}
</XMP>
</div>	

<a name="excell_use"><h4 >Usage of Cell Editors (eXcell)</h4></a><div class="block">
There are some predefined cell editors delivered with dhtmlxGrid. They are:<br>
<li>ReadOnly (<strong>ro</strong>) - cell can't be edited</li>
<li>Simple Editor (<strong>ed</strong>) - text is edited inside cell</li>
<li>Text Editor (<strong>txt</strong>) - text is edited in popup multiline textarea</li>
<li>Checkbox (<strong>ch</strong>) - standard checkbox</li>
<li>Radiobutton (<strong>ra</strong>) - column oriented radiobutton</li>
<li>Select box (<strong>coro</strong>) - simple selectbox</li>
<li>Combobox (<strong>co</strong>) - select box with ability to add some other value</li>
<li>Image (<strong>img</strong>) - not editable. Value considered as url of image</li>
<br><strong>Special types:</strong><br>
<li>Color picker (<strong>cp</strong>) - simple color picker (just for example). Value considered as color code or name</li>
<li>Price oriented (<strong>price</strong>) - shows $ before value, all values eql 0 shown as na in red color</li>
<li>Dynamic of Sales (<strong>dyn</strong>) - shows up/down icon depending on value. Also color coding available (green/red)</li>
<br>
To assign necessary types to columns use the following script method with comma delimmited list of editor codes:
<XMP>
	mygrid.setColTypes("ro,ed,txt,txt,ro,co");
</XMP>
<br>
Since v.1.2 you also can set type of each cell, row or change default column type:
<h5>Script syntax:</h5>
<XMP>
	mygrid.setRowExcellType(rowId,type);//sets all cells in row to specified type
	mygrid.setCellExcellType(rowId,cellIndex,type);//sets particular cell type
	mygrid.setColumnExcellType(colIndex,type);//changes column type
</XMP>
<h5>XML syntax:</h5>
<XMP>
	<cell type="[eXcell code]">...</cell>
</XMP>
</div>	

<a name="dblink"><h4 >Data Processing and link with Server Datasource</h4></a><div class="block">
There is add-in for dhtmlxGrid which manages the process of updating data on server side. <br>
<img src="imgs/dataprocessor_sc.gif" width="608" height="352" alt="" border="0"><br>
<br>
<h5>Main Features:</h5>
<li>Updated/Inserted row marked with bold text, deleted with line-through </li>
<li>You can set validation functions on any column. By default it validates if specified cell has value. 
If validation failed, casual cell marked with red border </li>
<li>You can define the mode for data processing: <br>
- cell