User Manual
Samples

Introduction    Configure grid look    Grid general features

User types    Data from the DB / CSV / XML    Data Saving

Using XML    Grid reference    What's new?    Standard vs PRO

123Guide   

Order PRO Now   

CODETHATGRID USER MANUAL

What's New at Codethatgrid V2?

Here you can find new features that were added at new CodeThatGrid version.

Unlimited Number of Grids on Sinlge Page

You can put several grids at the same page. You should specify gridDef object for each grid. Then you create grid objects:

..html code...
<script language="javascript1.2">
<!--
var g = new CCodeThatGrid("g", 10, 5);
g.init(gridDef);
g.doAction(); 
//-->
</script>
...html code...
<script language="javascript1.2">
<!--
var g1 = new CCodeThatGrid("g1", 11, 7);
g1.init(gridDef1);
g1.doAction(); 
//-->
</script>
...html code...
<script language="javascript1.2">
<!--
var gN = new CCodeThatGrid("gN", 100, 2);
gN.init(gridDefN);
gN.doAction(); 
//-->
</script>

Hide toolbar and statusbar

If you don't need toolbar or/and statusbar you can hide it. Just set its height in 0:

var gridDef = {
	...
	toolBar : {
		height : 0
	},
	statusBar : {
		height : 0
	}
	...
}; 

If you wish change visibility of some bar in run-time, you can use such function:

function setBarVisibility(g, bar) {
	var o = CT_fe(g.getID(bar));
	if (Def(o)) {
		if (o.style.visibility == "hidden") {
			o.style.visibility = "visible"
			o.style.display = "block";
		}
		else {
			o.style.visibility = "hidden";
			o.style.display = "none";
		};
	};
}; 

Possible values for variable bar are "tb" - toolbar, "sb" - statusbar, "pt" - pageturnbar

Non-excel style

If you don't need header for rows and columns you can hide them. Just set property useRCID in 0:

var gridDef = {
	...
	useRCID : 0
	...
}; 

User Functions

You can specify user function for grid and each row/column of it User function is a function that will be call automatically after data set for each cell, that is not service and belong to the object with user function defined:

if user function defined for grid, it will be call for each non-service cell in grid,

if user function defined for row, it will be call for each non-service cell in row,

if user function defined for column, it will be call for each non-service cell in column.

By default, cell is service if row and/or column of it are ReadOnly But you can set parameter isService manually and change readOnly cells too

Definition of user function must look like this

function userFunction(grid, cell) {
	...
}
//grid - CodeThatGrid Object, owner of cell
//cell - cell that call userFunction

Assume that we will need a grid for the order line items that will be able to:

1) calculate across columns within a row (e.g. amount = qty X unit price)

2) calculate across the rows for a column (e.g., sum up the amount column to give a subtotal with discount)

Item includes ID, Item No, Item, Quantity, Price, Discount, Subtotal

Add constraints in type Number, no empty values and all values >= 0 to use as type for Quantity

function parseNumber(numVal) {
	if (Undef(numVal)) return 0
	else numVal = new String(numVal);
	numVal = parseInt(numVal.replace(/[^0 - 9-\ + \.]/ig, ''));
	if (isNaN(numVal) || numVal < 0) return 0
	else return new Number(numVal);
}; 

For Discount column create user type Discount

var DISCOUNT_FORMAT = "%";
function parseDiscount(numVal) {
	var d = parseNumber(numVal);
	if (d > 100) d = 100;
	return d;
};
function formatDiscount(numObj, formatDiscount) {
	return (numObj > 0) ? formatDiscount + " " + numObj : DEFAULT_RESULT;
}; 

Now define the user functions that will be use in grid.

To get subtotal we will use function subTotal

function subTotal(grid, cell) {
	if (Undef(cell)) return; //no cell for proceed
	var c0 = grid.getColByTitle('Price'),
	c1 = cell.col._id, r = cell.row._id, //current row and column indexes
	c2 = grid.getColByTitle('Subtotal'),
	c3 = grid.getColByTitle('Discount');
	if (c1 == c2) return; //cells from column subtotal not need to proceed
	g.cells[r][c2].setData(g.cells[r][c0].data*g.cells[r][c1].data*(100 -
	g.cells[r][c3].data)/100, 0);
	if (grid.isInit) grid.cells[r][c2].paint();
}; 

To get total we will use function total

function total(grid, cell) {
	if (Def(cell)) {
		if (grid.cells[grid.rowCount - 1].length < grid.cols.length) return;
		var c = cell.col, i, j, s = 0;
		if (c.type != 'Number' && c.type != 'Currency') return;
		for (i = 0; i < grid.rowCount - 1; i++) s += grid.cells[i][c._id].data*1;
		grid.cells[grid.rowCount - 1][c._id].data = s;
		if (grid.isInit) grid.cells[grid.rowCount - 1][c._id].paint();
	}
	else{
		//initiation
		var i, j, c = grid.getColByTitle('Quantity');
		grid.isInit = 0;
		grid.addRow(grid.rowCount, 0, 0); //add result row
		grid.rows[grid.rowCount - 1].isReadOnly = 1;
		for (i = 0; i < grid.colCount; i++) {
			grid.cells[grid.rowCount - 1][i].b = "bold";
			for (j = 0; j < grid.rowCount - 1; j++) {
				// count subtotal
				if (i == c) subTotal(grid, grid.cells[j][i]);
				total(grid, grid.cells[j][i]);
				// set userFunction for each row in
				// grid to count subTotal
				grid.rows[j].userFunction = subTotal
			};
		};
		grid.isInit = 1;
		grid.paint();
	};
}; 

Set property userFunction with total in grid definition gridDef:

var gridDef = {
	useRCID : 0, 				//non-excel style
	statusBar : {
		height : 0
	}, //no status bar
	toolBar : {
		height : 0
	}, //no toolbar
	userFunction : total, 	//user function
	...
}

Create and init grid:

<script language="javascript1.2">
<!--
var g = new CCodeThatGrid("g", 3, 7);
g.init(gridDef);
total(g); //no need doAction because total paints grid by itself
//-->
</script>

Important! Use fields of Object only for read, for write in it use special methods.

Example - User function, non-excel style, hide row and column headers, export data

You can see an example and complete code here - User function, non-excel style, hide row and column headers, export data [popup]

Run-time Properties

New version of CodeThatGrid allows you change style of separate row, column or cell and set event handlers for it

New properties for Object CGRow

Function handler
User defined function that call as handler event of this row, required parameter object CEvent e
this.handler = rowHandler;
//e._e - Object window.Event, e._e.type = ["click", "dblclick", "mouseup", "mousedown"]
//e._o - source Object that call handler (CGCol, CGRow or CGCell)
function rowHandler(e) {
	switch(e._e.type) {
		case "click" :
			e._o.isMark = true;
		};
	}; 
String defaultClass
CSS class that defined normal style of this row
String markClass
CSS class that defined selected style of this row

New properties for Object CGCol

Function handler
User defined function that call as handler event of this row, required parameter object CEvent e
this.handler = rowHandler;
//e._e - Object window.Event, e._e.type = ["click", "dblclick", "mouseup", "mousedown"]
//e._o - source Object that call handler (CGCol, CGRow or CGCell)
function rowHandler(e) {
	switch(e._e.type) {
		case "click" :
			e._o.isMark = true;
		};
	}; 
String defaultClass
CSS class that defined normal style of this row
String markClass
CSS class that defined selected style of this row

New properties for Object CGCell

Function handler
User defined function that call as handler event of this cell, required parameter object CEvent e
this.handler = rowHandler;
//e._e - Object window.Event, e._e.type = ["click", "dblclick", "mouseup", "mousedown"]
//e._o - source Object that call handler (CGCol, CGRow or CGCell)
function rowHandler(e) {
	switch(e._e.type) {
		case "click" :
			e._o.isMark = true;
		};
	}; 
String defaultClass
CSS class that defined normal style of this cell
String markClass
CSS class that defined selected style of this cell
String currClass
CSS class that defined current style of this cell

Example - run-time properties and handlers

You can see an example and complete code here - Run-time properties, handlers and external functions [popup]

A few words about grid object model, this information become necessary you when we create user function, full CodeThatGrid Reference you can find as separate document.

Class CCodeThatGrid

Fields:

CGRow [] rows
Array of CGRow Objects that represents rows in grid
int [] rIdx
Index array of rows; keep real order of them in grid
int rowCount
Count of rows in grid
CGCol [] cols
Array of CGCol Objects that represents columns in grid
int [] cIdx
Index array of columns; keep real order of them in grid
int colCount
Count of columns in grid
CGCell [][] cells
Array of CGCell Objects that represents cells in grid
CGCell curCell
Object represents current cell in grid
Boolean isInit
Flag is loading of data into grid complete
Function userFunction
Function that will be call after data setting for each non-service cell

Methods:

addRow (idx, offset[, p])
Adds row at idx in array rows, if idx undefined adds row in offset rows from current
Parameters p indicates if will be grid painting after row add
By default it is true
init (gridDef)
Initiates grid with data and appearance parameters from user gridDef definition
getColByTitle (title)
Returns index in cols array by title or name (A, B, C, …) of column or –1 if column is not found
paint()
Paints grid into browser window
toCSV([spt, [isRng, [onlychanged, [lessreadolnly]]]])
Returns csv-string with separator spt
If isRng is true csv-string get from current selection in another case from whole grid
If onlychanged is true will be return only changed rows
If lessreadonly is true will be return only non-readonly rows
By default: spt = ';', isRng = false, onlychanged = FALSE, lessreadonly = false
toCSVFile ([onlychanged])
Returns string with header '<?xml version="1.0" encoding="UTF-8"?>'…'' for keeping in special format csv-file
If onlychange is true will be return only changed rows, by default false
toXML ([onlychange, [lessreadonly]])
Returns xml-string in format
<?xml version="1.0" encoding="UTF-8"?><
<data table= "grid.name">
<row id="…">
<field fieldname="col.title" bold="true|false" underline="true|false"
	italic="true|false" align="left|center|right">
cell.value
</field>
...
</row>
...
</data>
If onlychange is true will be return only changed rows
If lessreadonly is true will be return only non-readonly rows
By default: onlychanged = false, lessreadonly = false

Class CGRow

Fields:

int _id
Row id, that equals its index in owner grid rows array
Boolean isReadOnly
Flag is data in row is read only
Function userFunction
User defined function that call after data setting for each non-service cells in this row

Class CGCol

Fields:

int _id
Column id, that equals its index in owner grid cols array
Boolean isReadOnly
Flag is data in column is read only, gets from colDef
String type
Type of column, gets from colDef
String title
Title of column, gets from colDef
Function compareFunction
Function that uses for compare 2 elements of column to set index, gets from colDef
Function userFunction
User defined function that call after data setting for each non-service cells in this column, gets from colDef

Class CGCell

Fields:

CGRow row
Row owner of cell
CGCol col
Column owner of cell
int state
0 – default, 1 – current, 2 – editing
Object data
Value in this cell

Methods:

setData (data[, isService])
Sets data into cells, check the type and call userFunction(s) if at least one of them defined and
isService=false
If isService undefined it calculate as
col.isReadOnly || row.isReadOnly
getData ()
Returns string with data of cell formatted by function defined for type of current cell
getDataForEdit ()
If type is Date return format data in all other cases return string representation of data in cell

Read more about CodeThatGrid >>

© CodeThat.com, 2003-2005
Design by XTLabs, Inc.