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

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

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

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

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