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

Configure Grid Look

Here we describe GridDef properties that specify table look:

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

Grid toolbar customization

Grid statusbar customization

Grid pageturnbar customization

There is a column definition object:

colDef : [
{
	title : String, 	// column title
	titleClass : String, 	// column title class css
	type : String, 	// (*) column datatype: String | Number | Currency | Date |
			// Image | HTML | Email | URL | User Defined Type
	width : int | String, 	// column width
	alignment : String, 		// column alignment
	compareFunction : Function, 	// (*) compare function
	userFunction : Function, 	// user function
	isVisible : Boolean, 	// whether column is visible
	isReadOnly : Boolean, 	// whether column is read only
	useAutoIndex : Boolean, 	// auto index
	useAutoFilter : Boolean	// auto filter
},
...
]

titleClass - CSS class for column header. Default value = "".

Possible values for type - String | Number | Currency | Date | Image | HTML | Email | URL | User defined type

Possible values for alignment - left | center | right

Possible values for compareFunction - compare | compareImage | userCompareFunction () => {1 || 0 || -1}

For example:

colDef :
[
{
	title : "ID",
	titleClass : "",
	type : "Number",
	width : '10%',
	alignment : "center",
	compareFunction : compare,
	isVisible : true,
	isReadOnly : false,
	useAutoIndex : false,
	useAutoFilter : false
},
{
	title : "Name",
	titleClass : "dtitle",
	type : "String",
	width : 150,
	alignment : "",
	compareFunction : compare,
	isVisible : true,
	isReadOnly : false,
	useAutoIndex : false,
	useAutoFilter : false
},
{
	title : "Reg. date",
	titleClass : "ctitle",
	type : "Date",
	width : 120,
	alignment : "center",
	compareFunction : compare,
	isVisible : true,
	isReadOnly : true,
	useAutoIndex : true,
	useAutoFilter : true
},
{
	title : "Icon",
	titleClass : "ctitle",
	type : "Image",
	width : '5%',
	alignment : "center",
	compareFunction : compareImage,
	isVisible : true,
	isReadOnly : true,
	useAutoIndex : false,
	useAutoFilter : false
} ]

At the data array you put all the data you'd like to show at the table. For example:

data : [
["1", "Stiles James", "01.01.2002", "jstiles@necasting.com", "270 $"],
["2", "Alexander Jacklynn", "12.05.2003", "speedracer1979@iwon.com", " $"],
["3", "Martin Barney", "01.01.2002", "bmartin1@maine.rr.com", "92 $"]
]

Full GridDef structure description you can find here.

To specify grid look in whole use the following structure:

tableStyle : {
	tableClass : String | {
		styleparams
	}, 	// name of css class or style parameters
	bgcolor : "#RGB | COLORNAME", 	// (*) background color
	x : int, 				// (*) left X coordinate
	y : int, 				// (*) top Y coordinate
	width : int, 			// (*) table width
	height : int, 			// (*) table height
	overflow : auto | visible | hidden 	// (*) overflow style parameter,
				// default : auto
}

To specify rows look use the following structure:

rowStyle :
{
	defaultClass : String | {
		styleparams
	}, // normal row style
	markClass : String | {
		styleparams
	}, 	// selected row style
	dragClass : String | {
		styleparams
	}, 	// drag element style
	width : int, 	// (*) default width
	height : int	// (*) default height
}

To specify columns look use the following structure:

colStyle :
{
	defaultClass : String | {
		styleparams
	}, // normal column style
	markClass : String | {
		styleparams
	}, 	// selected column style
	dragClass : String | {
		styleparams
	}, 	// drag element style
	width : int, 	// (*) default width
	height : int	// (*) default height
}

To specify cells look use the following structure:

cellStyle :
{
	defaultClass : String | {
		styleparams
	}, // normal cell style
	markClass : String | {
		styleparams
	}, 	// selected cell style
	currClass : String | {
		styleparams
	}, 	// current cell style
}

To describe {styleparams} use the following:

{
	// border params
	borderwidth : int, // make sense only if tableStyle.border > 0
	bordercolor : "#RGB|COLORNAME",
	borderstyle : "none" | "dotted" | "dashed" | "solid"
	| "double" | "groove" | "ridge" | "inset" | "outset",
	//background parameters
	backgroundcolor : "#RGB | COLORNAME",
	backgroundimage : "URL(SRC) ",
	backgroundrepeat : "repeat" | "repeat-x" | "repeat-y" | "no-repeat",
	//color of text (this setting is not useful for set color of a parameters)
	color : "#RGB | COLORNAME",
	// font parameters
	fontfamily : "FONTNAME",
	fontstyle : "normal" | "italic" | "oblique",
	fontweight : "normal" | "bold" | "bolder" | "lighter"
	| "100" | "200" | "300" | "400" | "500"
	| "600" | "700" | "800" | "900",
	fontsize : "NUMBER px | pt",
	// text params
	textalign : "left" | "right" | "center" | "justify",
	textdecoration : "none" | "underline" | "overline" | "line-through",
	verticalalign : "bottom" | "top" | "middle"
}

To specify toolbar look use the following structure:

// if you'd like to hide some button just remove this button description
// from the toolbar description
toolBar :
{
	height : int, 	// (*) toolbar height
	bgcolor : "#RGB | COLORNAME", 	// (*) toolbar background color
	defaultClass : : String | {
		styleparams
	}, // style
	buttons : [	// toolbar buttons
	{
		name : String, 	// (*) Name
		img_on : {
			src : String, width : int, height : int
		}, // (*) active button image
		img_on : {
			src : String, width : int, height : int
		}, // inactive button image
		text : String	// (*) Hint
	},
	{ }, // insert separator
	...
	]
}

Possible values for buttons name: "addrowto", "addrowafter", "delrow", "addcolto", "addcolafter", "delcol", "sortasc", "sortdesc", "multisortasc", "multisortdesc", "resetsort", "copy", "paste", "formatbold", "formatitalic", "formatunderline", "alignleft", "aligncenter", "alignright", "setsearch", "resetsearch", "setamount".

To specify statusbar look use the following structure:

statusBar :
{
	height : int, 			// (*) statusbar height
	bgcolor : "#RGB | COLORNAME", 	// (*) statusbar background color
	defaultClass : String | {
		styleparams
	}, 	// common style
	messageClass : String | {
		styleparams
	}, 	// service message style
	fieldText : "Field", 			// (*) field label
	valueText : "Value"			// (*) value label
}

To specify pageturnbar look use the following structure:

pageTurnBar : {
	defaultClass : String : {
		styleparams
	}, // (*) normal page style
	activeClass : String : {
		styleparams
	}, // (*) current page style
	img_on : {
		src : "img/t_on.gif"
	}, //current page bgimage
	img_off : {
		src : "img/t_off.gif"
	}, //normal page bgimage
	text : "Page", // (*) hint template
	width : int, // (*) width of one tab
	height : int //(*) height of one tab
}

Example - Grid Look

You can see an example and complete code here - Grid Look [popup]

Read more about CodeThatGrid >>

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