!--www--CodeThatGrid - Multi-sort, columns visibility, auto-index, auto-filter!--www/--!--all--code that works!!--all/--

CodeThatGrid - Multi-sort, columns visibility, auto-index, auto-filter

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"],
	["6", "Greiner Andrew", "08.01.2003", "2"],
	["7", "Maillet Chad", "01.01.2002", "2"],
	["8", "Batson Alecia", "01.01.2002", "2"],
	["9", "Gato Timothy", "01.01.2002", "2"],
	["10", "Wheeler Skip", "01.01.2002", "2"],
	["11", "Davis Mackenzie", "01.01.2002", "2"],
	["12", "Hatch Jennie", "01.01.2002", "3"],
	["13", "picano anthony", "06.01.2003", "4"],
	["14", "Bernard Ashley", "11.10.2003", "7"],
	["15", "Masabny Rob", "01.01.2002", "2"],
	["16", "Philbrick John", "01.01.2002", "2"],
	["17", "Tella Bob", "01.01.2002", "2"],
	["18", "Keister Jennifer", "07.10.2002", "2"],
	["19", "Doherty Jr. Billy", "30.08.2003", "2"],
	["20", "Lozeau Danielle", "27.08.2003", "2"],
	["21", "Barnes Anastasia", "01.01.2002", "2"],
	["22", "Zanidakis Zoe", "12.08.2003", "2"],
	["23", "Price Dennis", "26.08.2003", "2"],
	["24", "Morrison Christine", "17.08.2003", "2"],
	["25", "Ann Rachael", "13.08.2003", "2"],
	["26", "Brodsky Jason", "21.08.2003", "2"],
	["27", "Dow Scott", "18.12.2002", "2"],
	["28", "Perillo Andy", "01.01.2002", "2"],
	["29", "Burgess Terry", "01.01.2002", "2"],
	["30", "Vallory Amanda", "23.08.2003", "2"],
	["31", "wentworth brendan", "02.01.2004", "4"],
	["32", "Ziobro Peter", "27.10.2003", "3"],
	["33", "Winters Scott", "01.01.2002", "2"],
	["34", "Shea Kevin", "03.11.2003", "2"],
	["35", "Bowring Tina", "07.08.2003", "2"],
	["36", "Roosevelt Maura", "06.08.2003", "1"],
	["37", "Payne Christopher", "07.01.2003", "2"],
	["38", "peterson william", "06.08.2003", "2"],
	["39", "Childers Eva", "03.01.2004", "2"],
	["40", "Meyer Richard", "16.09.2002", "2"],
	["41", "Berkrot Peter", "19.09.2002", "2"],
	["42", "Currier Justine/Janelle", "01.01.2002", "2"],
	["43", "Perry Kevin", "01.01.2002", "2"],
	["44", "LOMBARDI TOM", "04.08.2003", "2"],
	["45", "Steele William", "01.01.2002", "2"],
	["46", "Smith-Lycette Monique", "01.01.2002", "2"],
	["47", "Boiros Ashleigh", "06.06.2002", "2"],
	["48", "Peters Ellen", "28.04.2003", "2"],
	["49", "Gorgone Dan", "13.08.2002", "4"],
	["50", "Barclay Roberta", "27.07.2002", "4"]],
	colDef : [
	{
		title : "ID",
		titleClass : "",
		type : "Number",
		width : 0,
		alignment : "center",
		compareFunction : compare,
		isVisible : false,
		useAutoIndex : true,
		useAutoFilter : false
	},
	{
		title : "Name",
		titleClass : "",
		type : "String",
		width : 200,
		alignment : "",
		compareFunction : compare,
		isVisible : true,
		useAutoIndex : true,
		useAutoFilter : true
	},
	{
		title : "Reg. date",
		titleClass : "",
		type : "Date",
		width : 100,
		alignment : "center",
		compareFunction : compare,
		isVisible : true,
		useAutoIndex : true,
		useAutoFilter : true
	},
	{
		title : "Kind",
		titleClass : "",
		type : "Number",
		width : 50,
		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 : {
			padding : "1", borderwidth : "1", borderstyle : "solid", bordercolor : "#cfcfcf",
			fontfamily : "Arial", fontsize : "12px", backgroundcolor : "#ffffff", color : "#000000"
		},
		markClass : {
			padding : "1", borderwidth : "1", borderstyle : "outset", bordercolor : "#D4D0C8",
			fontfamily : "Arial", fontsize : "12px", backgroundcolor : "#cfcfcf", color : "#000000"
		},
		currClass : {
			padding : "1", 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
	}
};