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

Introduction

With CodeThatGrid you can

Configure every aspect of the grid look

Full customization support for rows, columns and cells through the CSS classes and by using grid properties

Alternate rows colors, mark on-mouse-over row and easy (un)marking rows with mouse click

 Grid toolbar customization

 Grid statusbar customization

 Multi- row and column selection, with mouse dragging support (PRO version only)

 Sort and multi-sort grid (ascending and descending sorting). (PRO version only)

Hide/show columns when creating (useful if a field is a key but should not be displayed)

Use selective auto-index for columns (index column when creating for faster performance)

Use selective auto-filter for columns

 Search at the grid by substring or regular expression (PRO version only)

 Custom data types can be plugged in with correct sorting algorithms (PRO version only)

 Data definition format is compact and easily generated with server side script (PRO version only)

 Data can be defined from the csv data strings at csv format (PRO version only)

 Support of the XML files and strings reading (PRO version only)

 Save grid data at the database (PRO version only)

 Save grid data at the csv file (PRO version only)

 Save grid data at the XML file (PRO version only)

For work with CodeThatGrid you need the following files:

<script language="javascript" src="../Scripts/codethatsdk.js"></script> 	// SDK	
    <script language="javascript" src="../Scripts/codethattype.js"></script> 	// Types and compare functions 
    <script language="javascript" src="../Scripts/codethatgridstd.js"></script>	// CodeThatGrid Class

CodeThatGrid Initialization:

<script language="javascript1.2">
<!--
var CodeThatGrid = new CCodeThatGrid("CodeThatGrid", NUM_ROWS, NUM_COLS);
CodeThatGrid.init(gridDef); 		// data initialization from gridDef object
CodeThatGrid.doAction(); 	// start action
//-->
</script>

CCodeThatGrid constructor parameters:

CodeThatGrid : Object - variable-link to the object from CCodeThatGrid class, its name must be equal with name passing to constructor

NUM_ROWS : int - rows number at the grid

NUM_COLS : int - columns number at the grid

Note: if actual data size bigger than NUM_ROWS x NUM_COLS, the size of grid will be increased automaticly

Below is a general object gridDef:

var gridDef = {
	useRCID : Boolean,		// whether we use row/column header, default:true
	useExportBar : Boolean, 	// whether show layer with export form or not,
				// default:false
	useMultiSort : Boolean, 	// whether we use multisort, default:true
	useColTitle : Boolean, 	// whether we show column titles, default:true,
	useProgress : Boolean, 	// whether we show information about grid actions,
				// default:true
	amountPerPage : int, 	// count records per 1 page, default:20
	datatype : 0|1|2|3|4, 	// 0 - array (default), 1 - csv String, 2 - xml file,
				// 3 - csv file, 4 - xml String
	data : Array | String, 	// data
	colDef : Array, 		//[{...}, ...] column definitions array,
				// if empty will use DEFAULT_COLDEF
	tableStyle : {
		...
	}, 	// style parameters for table in whole
	rowStyle : {
		...
	}, 		// row style parameters
	colStyle : {
		...
	}, 		// column stle parameters
	cellStyle : {
		...
	}, 	// cell style parameters
	toolBar : {
		...
	}, 		// toolbar parameters
	// if you'd like to hide some button just remove this button description
	// from the toolbar description
	statusBar : {
		...
	}, 		// statusbar parameters
	pageTurnBar : {
		...
	}
	// pageturnbar parameters
}; 

Note: Parameters data : [] and colDef:[] are optional. It means in case you leave its empty, you'll create an empty grid.

Global variables:

var DATE_FORMAT = "dd.mm.yyyy"; // data format
var CURRENCY_FORMAT = "$"; // currency format
var EMPTY_ROW = "no filter"; // first row fo filterr
// default column definition, it uses when column has not own definition or new column created
var DEFAULT_COLDEF = {
	title : "",
	titleClass : "",
	type : "String", //the default data type for grid
	width : 80,
	alignment : "left",
	compareFunction : compare,
	userFunction : null,
	isVisible : true,
	isReadOnly : false,
	useAutoIndex : false,
	useAutoFilter : false
}; 

Note: Each of this variable you can redefine.

Read more about CodeThatGrid >>

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