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
  • Alternate rows colors, mark on-mouse-over row and easy (un)marking rows with mouse click
  • Grid toolbar customization
  • Grid statusbar customization

There is a column structure:

colDef : ARRAY == [	
{
	title: STRING,		// (*) column title
 	titleClass: "", 	// (*) 
 	type: UserType, 	// (*) String || Number || Currency 
 	                    // || Date || Image || HTML || Email || URL
	width: INT, 		// (*) column width
	alignment: STRING,	// (*) column alignment
  	compareFunction: FUNCTION, // (*) compare function
    isVisible: BOOLEAN, 	  // (*) whether column is visible
    useAutoIndex: BOOLEAN, // (*) auto sort
    useAutoFilter: BOOLEAN  // (*) auto filter
},
    	...

]
 

titleClass - CSS class for column header. Default value = "" (default <TH> tag).

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

Default value for width = 0 (auto width for columns)

Possible values for alignment - left || center || right

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

For example:

  colDef : 
[
 {
  title: "ID",
  titleClass: "", //default for th
  type: "Number", 
  width: 75, //auto
  alignment: "center",
  compareFunction: compare,
  isVisible: true, 
  useAutoIndex: false, 
  useAutoFilter: false
 },
 {
  title: "Name",
  titleClass: "",
  type: "String", 
  width: 150, //auto
  alignment: "",
  compareFunction: compare,
  isVisible: true,  
  useAutoIndex: false, 
  useAutoFilter: false  
 },
 {
  title: "Reg. date",
  titleClass: "", //default for th
  type: "Date", 
  width: 120, //auto
  alignment: "center",
  compareFunction: compare,
  isVisible: true, 
  useAutoIndex: true, 
  useAutoFilter: true
 }
]
 

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 style or style parameters for <TABLE> tag
 	thClass : STRING | {styleparams},	 	// name of css style or style parameters <TH> tag
 	tdClass : STRING | {styleparams},		// name of css style or style parameters <TD> tag
 	bgcolor : "RGB | COLORNAME",		// (*) background color	
 	x : INT,					// (*) left X coordinate
	y : INT,					// (*) top Y coordinate			
	width: INT,				// (*) table width
	height: INT,				// (*) table height
	position: 0|1 				//0 - relative, 1 - absolute
 }

To specify rows look use the following structure:

 rowStyle : 
 { 
 	defaultClass: STRING | {styleparams}, 	// normal row style
    markClass:  STRING | {styleparams},	    // selected row style
 	resizeClass: STRING | {styleparams},	// resize element 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 state style
    markClass:  STRING | {styleparams},	    // selected state style
	resizeClass: STRING | {styleparams},	// resize element 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 state style
	markClass:  STRING | {styleparams},	    // selected state style
	currClass:  STRING | {styleparams},	    // current state 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",

// NOT FOR cellClass

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 params

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 don't specify this parameter you'll be able to use search feature only
// 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}, 	// default common style
	
// (*) toolbar buttons

 	buttons:[
	{
	 name : "addrowto" |  "addrowafter" | "delrow" | 
	        "addcolto" |  "addcolafter" | "delcol" | 
	        "copy" | "paste" | "sortasc" | "sortdesc" | 
	        "multisortasc" | "multisortdesc" | "formatbold" | 
	        "formatitalic" | "formatunderline" | "alignleft" | 
	        "aligncenter" | "alignright"                       // (*) button names
	 img_on : {src: "img/addrowto.gif", width: "16", height:"16"}, // (*) active button image
	 img_off : {src: "img/addrowto_off.gif", width: "16", height:"16"}, // inactive button image
	 text : "Add row before current one", 			// (*) hint
	 showMessage : true	// (*) show or not information at the status bar when the action in progress
	}, 
	{},  // empty structure
 	],

// search control

  	searchControl:{
	 	img_on:{src:"img/search.gif", width:16, height:16},	// search image
	 	text_on:"Search",	// (*) hint
	 	img_off:{src:"img/resetsearch.gif", width:16, height:16}, // reset search image
	 	text_off:"Show all"// (*) hint
 	}
}

To specify toolbar 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",			// (*) cell title
 	valueText : "Value"			// (*) value title
}

  EXAMPLE - Grid Look

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

Read more about CodeThatGrid >>