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 GUIDE

The following "9 steps" instruction will guide you step by step through the CodeThatGrid configuration process.

1

Download package with CodeThatGrid script and unarchive it.

For free version (STD) download use this link.

If you'd like to buy full version (PRO) use this link.

Please bear in mind that CodeThat scripts come in two editions STANDARD and PRO. Editions differ by the features set and license type.

Standard version is given for free and comes with the inscription representing our company's name. Upon registration you will get rid of that text.

 Read Standard vs PRO to know the differences between CodeThatGrid Standard and PRO.

2

Create the basic HTML file.

Your file may look as following:

<HTML>
<HEAD>
	<link href="common.css" rel="stylesheet" type="text/css">
	<script language="javascript1.2" src="../Scripts/codethatsdk.js"></script>
	<script language="javascript1.2" src="../Scripts/codethatgridstd.js"></script>
	<script language="javascript1.2" src="../Scripts/codethattype.js"></script>
</HEAD>
<BODY>
	<p>&nbsp;HELLO WORD!
</BODY>
</HTML>
3

First of all we should initialize CodeThatGrid:

<script language="javascript1.2">
<!--
var CodeThatGrid = new CCodeThatGrid("CodeThatGrid", NUM_ROWS, NUM_COLS);
CodeThatGrid.init(gridDef); 		// data initialization from gridDef structure
CodeThatGrid.doAction(); 	// work with table
//-->
</script>
4

Now lets create your first CodeThatGrid.

For this purpose you can both create separate config *.js file or write the config construction right to your *.html file. Here we will view second variant.

To describe new grid create an object with following structure:

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

Hint - if parameters description isn't clearly understanding please have a look to CodeThatGrid User Manual

5

Data for the Grid.

You can describe data for the grid by using one of the following ways:

String by string definition at the table definition

Definition from the database

Definition from the csv string or csv file

Definition from the XML string or XML file

Here we show the first way:

datatype : 0,
data : [["1", "Stiles James", "01.01.2002", "2"],
["2", "Alexander Jacklynn", "12.05.2003", "2"],
["3", "Martin Barney", "01.01.2002", "2"],
["4", "Gelinas Patricia", "18.07.2003", "2"],
["5", "Cooke Dee", "02.05.2002", "2"]
]
6

Columns description.

For every column at your grid you need to create description where column title, css class, column type, width, alignment and the other staff are specified.

Also you should describe default properties for column in DEFAULT_COLDEF Object.

To learn more about column description read Configure grid look page.

var DEFAULT_COLDEF = {
	title : "",
	titleClass : "",
	type : "String", //the default type
	width : 100,
	alignment : "",
	compareFunction : compare,
	userFunction : null,
	isVisible : true,
	isReadOnly : false,
	useAutoIndex : false,
	useAutoFilter : false
};
...
colDef :
[
{
	title : "ID",
	titleClass : "",
	type : "Number",
	width : 75,
	alignment : "center",
	compareFunction : compare,
	isVisible : true,
	useAutoIndex : false,
	useAutoFilter : false
},
{
	title : "Name",
	titleClass : "",
	type : "String",
	width : 150,
	alignment : "",
	compareFunction : compare,
	isVisible : true,
	useAutoIndex : false,
	useAutoFilter : false
},
...
]
7

Then you specify whole table style

Specify style for its colunm, rows and cells, toolbar, statusbar and pageturnbar style, and specify the buttons set:

tableStyle : {
	tableClass : {
		borderwidth : 1, bordercolor : "#bbbbbb", borderstyle : "solid"
	},
	bgcolor : "#ffffff",
	x : 10,
	y : 10,
	width : 660,
	height : 480
},
rowStyle : {
	defaultClass : {
		fontfamily : "Verdana", fontsize : "12px",
		backgroundcolor : "#cccccc",
		borderwidth : "1",
		borderstyle : "outset",
		bordercolor : "#cccccc"
	},
	markClass : {
		backgroundcolor : "#ccccff",
		borderwidth : "1",
		borderstyle : "outset",
		bordercolor : "#cccccc"
	},
	dragClass : {
		cursor : "move", borderwidth : "0"
	},
	width : 20,
	height : 20
},
colStyle : {
	defaultClass : {
		fontfamily : "Verdana", fontsize : "12px",
		backgroundcolor : "#cccccc",
		borderwidth : "1",
		borderstyle : "outset",
		bordercolor : "#cccccc"
	},
	markClass : {
		backgroundcolor : "#ccccff",
		borderwidth : "1",
		borderstyle : "outset",
		bordercolor : "#cccccc"
	},
	dragClass : {
		cursor : "move",
		borderwidth : "0"
	},
	width : 100,
	height : 20
},
cellStyle : {
	defaultClass : {
		borderwidth : "1",
		borderstyle : "solid",
		bordercolor : "#cfcfcf",
		fontfamily : "Arial",
		fontsize : "12px",
		backgroundcolor : "#ffffff",
		color : "#000000"
	},
	markClass : {
		borderwidth : "1",
		borderstyle : "outset",
		bordercolor : "#cccccc",
		fontfamily : "Arial",
		fontsize : "12px",
		backgroundcolor : "#cfcfcf",
		color : "#000000"
	},
	currClass : {
		borderwidth : "2",
		borderstyle : "solid",
		bordercolor : "#000000",
		fontfamily : "Arial",
		fontsize : "12px",
		backgroundcolor : "#ffffff",
		color : "#000000"
	}
},
toolBar : {
	height : 29,
	bgcolor : "#D4D0C8",
	defaultClass : {
		borderwidth : 0
	},
	buttons : [
	{
		name : "addrowto",
		img_on : {
			src : "img/addrowto.gif", width : "16", height : "16"
		},
		img_off : {
			src : "img/addrowto_off.gif", width : "16", height : "16"
		},
		text : "Add row before current one"
	},
	{
		name : "addrowafter",
		img_on : {
			src : "img/addrowafter.gif", width : "16", height : "16"
		},
		img_off : {
			src : "img/addrowafter_off.gif",
			width : "16", height : "16"
		},
		text : "Add row after current one"
	},
	{
		name : "delrow",
		img_on : {
			src : "img/delrow.gif", width : "16", height : "16"
		},
		img_off : {
			src : "img/delrow_off.gif", width : "16", height : "16"
		},
		text : "Delete row"
	},
	{ }, //insert separator
	{
		name : "addcolto",
		img_on : {
			src : "img/addcolto.gif", width : "16", height : "16"
		},
		img_off : {
			src : "img/addcolto_off.gif", width : "16", height : "16"
		},
		text : "Add column before current one"
	},
	{
		name : "addcolafter",
		img_on : {
			src : "img/addcolafter.gif", width : "16", height : "16"
		},
		img_off : {
			src : "img/addcolafter_off.gif", width : "16", height : "16"
		},
		text : "Add column after current one"
	},
	{
		name : "delcol",
		img_on : {
			src : "img/delcol.gif", width : "16", height : "16"
		},
		img_off : {
			src : "img/delcol_off.gif", width : "16", height : "16"
		},
		text : "Delete column"
	},
	{ },
	{
		name : "copy",
		img_on : {
			src : "img/copy.gif", width : "16", height : "16"
		},
		img_off : {
			src : "img/copy_off.gif", width : "16", height : "16"
		},
		text : "Copy"
	},
	{
		name : "paste",
		img_on : {
			src : "img/paste.gif", width : "16", height : "16"
		},
		img_off : {
			src : "img/paste_off.gif", width : "16", height : "16"
		},
		text : "Pasting data from current cell"
	},
	{ },
	{
		name : "sortasc",
		img_on : {
			src : "img/sortasc.gif", width : "16", height : "16"
		},
		img_off : {
			src : "img/sortasc_off.gif", width : "16", height : "16"
		},
		text : "Sort data in current column in ascending order"
	},
	{
		name : "sortdesc",
		img_on : {
			src : "img/sortdesc.gif", width : "16", height : "16"
		},
		img_off : {
			src : "img/sortdesc_off.gif", width : "16", height : "16"
		},
		text : "Sort data in current column in descending order"
	},
	{
		name : "multisortasc",
		img_on : {
			src : "img/multisortasc.gif", width : "16", height : "16"
		},
		img_off : {
			src : "img/multisortasc_off.gif", width : "16", height : "16"
		},
		text : "Keep current order and sort data in current column in ascending order"
	},
	{
		name : "multisortdesc",
		img_on : {
			src : "img/multisortdesc.gif", width : "16", height : "16"
		},
		img_off : {
			src : "img/multisortdesc_off.gif", width : "16", height : "16"
		},
		text : "Keep current order and sort data in current column in descending order"
	},
	{
		name : "resetsort",
		img_on : {
			src : "img/resetsort.gif", width : "16", height : "16"
		},
		img_off : {
			src : "img/resetsort_off.gif", width : "16", height : "16"
		},
		text : "Reset sort"
	},
	{ },
	{
		name : "formatbold",
		img_on : {
			src : "img/formatbold.gif", width : "16", height : "16"
		},
		img_off : {
			src : "img/formatbold_off.gif", width : "16", height : "16"
		},
		text : "Format bold"
	},
	{
		name : "formatitalic",
		img_on : {
			src : "img/formatitalic.gif",
			width : "16", height : "16"
		},
		img_off : {
			src : "img/formatitalic_off.gif", width : "16", height : "16"
		},
		text : "Format italic"
	},
	{
		name : "formatunderline",
		img_on : {
			src : "img/formatunderline.gif", width : "16", height : "16"
		},
		img_off : {
			src : "img/formatunderline_off.gif", width : "16", height : "16"
		},
		text : "Format underline"
	},
	{ },
	{
		name : "alignleft",
		img_on : {
			src : "img/alignleft.gif", width : "16", height : "16"
		},
		img_off : {
			src : "img/alignleft_off.gif", width : "16", height : "16"
		},
		text : "Align left"
	},
	{
		name : "aligncenter",
		img_on : {
			src : "img/aligncenter.gif", width : "16", height : "16"
		},
		img_off : {
			src : "img/aligncenter_off.gif", width : "16", height : "16"
		},
		text : "Align center"
	},
	{
		name : "alignright",
		img_on : {
			src : "img/alignright.gif", width : "16", height : "16"
		},
		img_off : {
			src : "img/alignright_off.gif", width : "16", height : "16"
		},
		text : "Align right"
	},
	{ },
	{
		name : "setsearch",
		img_on : {
			src : "img/setsearch.gif", width : "16", height : "16"
		},
		text : "Search in grid"
	},
	{
		name : "resetsearch",
		img_on : {
			src : "img/resetsearch.gif", width : "16", height : "16"
		},
		text : "Reset search. Show all records."
	},
	{
		name : "setamount",
		img_on : {
			src : "img/setamount.gif", width : "16", height : "16"
		},
		text : "Set count of records per page"
	} ]
},
statusBar : {
	height : 15,
	bgcolor : "#D4D0C8",
	defaultClass : {
		color : "#000000", fontfamily : "Verdana", fontsize : "11px"
	},
	messageClass : {
		color : "#0000ff", fontfamily : "Verdana", fontsize : "11px"
	},
	fieldText : "Field",
	valueText : "Value"
},
pageTurnBar : {
	defaultClass : {
		backgroundcolor : "#ffffff", fontsize : "11px", fontfamily : "Verdana,Arial"
	},
	activeClass : {
		backgroundcolor : "#D4D0C8", fontsize : "11px", fontfamily : "Verdana,Arial"
	},
	img_on : {
		src : "img/t_on.gif"
	},
	img_off : {
		src : "img/t_off.gif"
	},
	text : "Page", width : 65, height : 14
}
8

So... A complete code for this example you can see here:

//GLOBAL VARS
var DATE_FORMAT = "dd.mm.yyyy", CURRENCY_FORMAT = "$", EMPTY_ROW = "",
DEFAULT_COLDEF = {
	title : "",
	titleClass : "",
	type : "String", //the default type
	width : 80,
	alignment : "",
	compareFunction : compare,
	isVisible : 1,
	isReadOnly : 0,
	useAutoIndex : 0,
	useAutoFilter : 0
};
//-----------------------------------------------------------------------------------
//GRID DEFINITION
//-----------------------------------------------------------------------------------
var gridDef = {
	useExportBar 	 : true,
	useMultiSort	 : true,
	useColTitle 	 : true,
	datatype 		 : 0,
	data : [ ["1", "Stiles James", "01.01.2002", "7"],
	["2", "Alexander Jacklynn", "12.05.2003", "2"],
	["3", "Martin Barney", "01.01.2002", "2"],
	["4", "Gelinas Patricia", "18.07.2003", "2"],
	["5", "Cooke Dee", "02.05.2002", "2"]],
	colDef : [
	{
		title : "ID",
		titleClass : "", //default for th
		type : "Number",
		width : 0, //auto
		alignment : "center",
		compareFunction : compare,
		isVisible : false,
		useAutoIndex : true,
		useAutoFilter : false
	},
	{
		title : "Name",
		titleClass : "",
		type : "String",
		width : 200, //auto
		alignment : "",
		compareFunction : compare,
		isVisible : true,
		useAutoIndex : true,
		useAutoFilter : true
	},
	{
		title : "Reg. date",
		titleClass : "", //default for th
		type : "Date",
		width : 100, //auto
		alignment : "center",
		compareFunction : compare,
		isVisible : true,
		useAutoIndex : true,
		useAutoFilter : true
	},
	{
		title : "Kind",
		titleClass : "", //default for th
		type : "Number",
		width : 50, //auto
		alignment : "center",
		compareFunction : compare,
		isVisible : true,
		useAutoIndex : true,
		useAutoFilter : true
	} ],
	tableStyle : {
		tableClass : {
			borderwidth : 1, bordercolor : "#bbbbbb", borderstyle : "solid"
		},
		bgcolor : "#ffffff",
		x : 10,
		y : 10,
		width : 520,
		height : 450
	},
	rowStyle : {
		defaultClass : {
			fontfamily : "Verdana", fontsize : "11px",
			backgroundcolor : "#D4D0C8", borderwidth : "1",
			borderstyle : "outset", bordercolor : "#cccccc"
		},
		markClass : {
			fontfamily : "Verdana", fontsize : "11px",
			backgroundcolor : "#ccccff", borderwidth : "1",
			borderstyle : "outset", bordercolor : "#cccccc"
		},
		dragClass : {
			cursor : "move", borderwidth : "0"
		},
		width : 20,
		height : 21
	},
	colStyle : {
		defaultClass : {
			fontfamily : "Verdana", fontsize : "12px",
			backgroundcolor : "#D4D0C8", borderwidth : "1",
			borderstyle : "outset", bordercolor : "#cccccc"
		},
		markClass : {
			fontfamily : "Verdana", fontsize : "12px",
			backgroundcolor : "#ccccff", borderwidth : "1",
			borderstyle : "outset", bordercolor : "#cccccc"
		},
		dragClass : {
			cursor : "move", borderwidth : "0"
		},
		width : 100,
		height : 21
	},
	cellStyle : {
		defaultClass : {
			borderwidth : "1", borderstyle : "solid",
			bordercolor : "#cfcfcf", fontfamily : "Arial",
			fontsize : "12px", backgroundcolor : "#ffffff",
			color : "#000000"
		},
		markClass : {
			borderwidth : "1", borderstyle : "outset",
			bordercolor : "#D4D0C8", fontfamily : "Arial", fontsize : "12px",
			backgroundcolor : "#cfcfcf", color : "#000000"
		},
		currClass : {
			borderwidth : "2", borderstyle : "solid",
			bordercolor : "#000000", fontfamily : "Arial", fontsize : "12px",
			backgroundcolor : "#ffffff", color : "#000000"
		}
	},
	toolBar : {
		height : 29,
		bgcolor : "#D4D0C8",
		defaultClass : {
			borderwidth : 0
		},
		buttons : [
		{
			name : "addrowto",
			img_on : {
				src : "img/addrowto.gif", width : "16", height : "16"
			},
			img_off : {
				src : "img/addrowto_off.gif", width : "16", height : "16"
			},
			text : "Add row before current one"
		},
		{
			name : "addrowafter",
			img_on : {
				src : "img/addrowafter.gif", width : "16", height : "16"
			},
			img_off : {
				src : "img/addrowafter_off.gif",
				width : "16", height : "16"
			},
			text : "Add row after current one"
		},
		{
			name : "delrow",
			img_on : {
				src : "img/delrow.gif", width : "16", height : "16"
			},
			img_off : {
				src : "img/delrow_off.gif", width : "16", height : "16"
			},
			text : "Delete row"
		},
		{ }, //separator
		{
			name : "addcolto",
			img_on : {
				src : "img/addcolto.gif", width : "16", height : "16"
			},
			img_off : {
				src : "img/addcolto_off.gif", width : "16", height : "16"
			},
			text : "Add column before current one"
		},
		{
			name : "addcolafter",
			img_on : {
				src : "img/addcolafter.gif", width : "16", height : "16"
			},
			img_off : {
				src : "img/addcolafter_off.gif",
				width : "16", height : "16"
			},
			text : "Add column after current one"
		},
		{
			name : "delcol",
			img_on : {
				src : "img/delcol.gif", width : "16", height : "16"
			},
			img_off : {
				src : "img/delcol_off.gif", width : "16", height : "16"
			},
			text : "Delete column"
		},
		{ }, //separator
		{
			name : "copy",
			img_on : {
				src : "img/copy.gif", width : "16", height : "16"
			},
			img_off : {
				src : "img/copy_off.gif", width : "16", height : "16"
			},
			text : "Copy"
		},
		{
			name : "paste",
			img_on : {
				src : "img/paste.gif", width : "16", height : "16"
			},
			img_off : {
				src : "img/paste_off.gif", width : "16", height : "16"
			},
			text : "Pasting data from current cell"
		},
		{ },
		{
			name : "sortasc",
			img_on : {
				src : "img/sortasc.gif", width : "16", height : "16"
			},
			img_off : {
				src : "img/sortasc_off.gif", width : "16", height : "16"
			},
			text : "Sort data in current column in ascending order"
		},
		{
			name : "sortdesc",
			img_on : {
				src : "img/sortdesc.gif", width : "16", height : "16"
			},
			img_off : {
				src : "img/sortdesc_off.gif",
				width : "16", height : "16"
			},
			text : "Sort data in current column in descending order"
		},
		{
			name : "multisortasc",
			img_on : {
				src : "img/multisortasc.gif",
				width : "16", height : "16"
			},
			img_off : {
				src : "img/multisortasc_off.gif",
				width : "16", height : "16"
			},
			text : "Keep current order and sort data in current " .
				"column in ascending order"
		},
		{
			name : "multisortdesc",
			img_on : {
				src : "img/multisortdesc.gif",
				width : "16", height : "16"
			},
			img_off : {
				src : "img/multisortdesc_off.gif",
				width : "16", height : "16"
			},
			text : "Keep current order and sort data in " .
				"current column in descending order"
		},
		{
			name : "resetsort",
			img_on : {
				src : "img/resetsort.gif", width : "16", height : "16"
			},
			img_off : {
				src : "img/resetsort_off.gif",
				width : "16", height : "16"
			},
			text : "Reset sort"
		},
		{ },
		{
			name : "formatbold",
			img_on : {
				src : "img/formatbold.gif", width : "16", height : "16"
			},
			img_off : {
				src : "img/formatbold_off.gif",
				width : "16", height : "16"
			},
			text : "Format bold"
		},
		{
			name : "formatitalic",
			img_on : {
				src : "img/formatitalic.gif",
				width : "16", height : "16"
			},
			img_off : {
				src : "img/formatitalic_off.gif",
				width : "16", height : "16"
			},
			text : "Format italic"
		},
		{
			name : "formatunderline",
			img_on : {
				src : "img/formatunderline.gif",
				width : "16", height : "16"
			},
			img_off : {
				src : "img/formatunderline_off.gif",
				width : "16", height : "16"
			},
			text : "Format underline"
		},
		{ },
		{
			name : "alignleft",
			img_on : {
				src : "img/alignleft.gif", width : "16", height : "16"
			},
			img_off : {
				src : "img/alignleft_off.gif",
				width : "16", height : "16"
			},
			text : "Align left"
		},
		{
			name : "aligncenter",
			img_on : {
				src : "img/aligncenter.gif", width : "16", height : "16"
			},
			img_off : {
				src : "img/aligncenter_off.gif",
				width : "16", height : "16"
			},
			text : "Align center"
		},
		{
			name : "alignright",
			img_on : {
				src : "img/alignright.gif", width : "16", height : "16"
			},
			img_off : {
				src : "img/alignright_off.gif",
				width : "16", height : "16"
			},
			text : "Align right"
		},
		{ },
		{
			name : "setsearch",
			img_on : {
				src : "img/setsearch.gif", width : "16", height : "16"
			},
			text : "Search in grid"
		},
		{
			name : "resetsearch",
			img_on : {
				src : "img/resetsearch.gif", width : "16", height : "16"
			},
			text : "Reset search. Show all records."
		},
		{
			name : "setamount",
			img_on : {
				src : "img/setamount.gif", width : "16", height : "16"
			},
			text : "Set count of records per page"
		} ]
	},
	statusBar : {
		height : 15,
		bgcolor : "#D4D0C8",
		defaultClass : {
			color : "#000000", fontfamily : "Verdana", fontsize : "11px"
		},
		messageClass : {
			color : "#0000ff", fontfamily : "Verdana", fontsize : "11px"
		},
		fieldText : "Field",
		valueText : "Value"
	},
	pageTurnBar : {
		defaultClass : {
			backgroundcolor : "#ffffff", fontsize : "11px",
			fontfamily : "Verdana,Arial"
		},
		activeClass : {
			backgroundcolor : "#D4D0C8", fontsize : "11px",
			fontfamily : "Verdana,Arial"
		},
		img_on : {
			src : "img/t_on.gif"
		},
		img_off : {
			src : "img/t_off.gif"
		},
		text : "Page", width : 65, height : 14
	}
}; 

Hint - for using CodeThat Scripts you aren't limited only by html files. For example, you can build it in the *.php files. We've made it at this site :)

9

Congratulations! You have just created your first CodeThatGrid enhanced web page.

To make your life easier we do plan to supply you with on and off line grid builders in the nearest time.

Try an Example >> [popup]

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