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

Codethatgrid Reference

Class CCodeThatGrid



Fields:

String name
Name of grid that equals name of variable that contains the CCodeThatGrid
CGRow [] rows
Array of CGRow Objects that represents rows in grid
int [] rIdx
Index array of rows; keep real order of them in grid
int rowCount
Count of rows in grid
CGCol [] cols
Array of CGCol Objects that represents columns in grid
int [] cIdx
Index array of columns; keep real order of them in grid
int colCount
Count of columns in grid
Boolean useColTitle
Flag is titles of columns show in grid
CGCell [][] cells
Array of CGCell Objects that represents cells in grid
CGCell curCell
Object represents current cell in grid
int sortCol
Index in cols array of column that sorted
int sortType
Direction of sort
Boolean useMultiSort
Flag is multiSort using in grid, by default - true
int [] multiSortCol
Array of indexes of columns in array cols that take part in multi sort
int [] multiSortType
Array of directions of sort for columns that take part in multi sort
String searchValue
Query that currently searched in grid
int markType
Type of current selection in grid
0 - no selection
1 - columns selection
2 - rows selection
3 - range selection
[] int markRange
Ranges of current selection
int amountPerPage
Count of rows per page, by default - 20
int pageCount
Count of pages in grid
int page
Current page in grid
Object clip
Grid clipboard
Boolean useProgress
Flag is write information about progress of current operation in status bar of window, by default - true
Boolean useRCID
Flag is use row and column headers (1, 2, … and A, B, …), by default - true
Boolean useExportBar
Flag is use standart export bar for grid
Boolean isInit
Flag is loading of data into grid complete
Function userFunction
Function that will be call after data setting for each non-service cell
Object def
User definition for grid, its structure is
{
int datatype
0 - array | 1 - csv string | 2 - xml file | 3 - csv file | 4 - xml string
[][] | String data : [][] | String | File name | File name | String
[] colDef
array of column definition Object
{
String title
String | Object titleClass
String type:
"'String" | "Number" | "Currency" | "Date" | "URL" | "Email" | "HTML" | UserType
int width
String alignment
"left", "center", "right"
Function compareFunction
function for compare 2 operands of column type
Boolean isVisible
is visible column in grid
Boolean useAutoIndex
will be index create automatically for this column
Boolean useAutoFilter
will be filter array create automatically for this column
Boolean isReadOnly
will be all cells in this column read only
Function userFunction
function that will be call after data setting for each non-service cell in this column
}
int amountPerPage
Boolean use* fields of grid
Object *Style fields of grid
Object *Bar fields of grid
}
Object tableStyle
Represents common style for grid, its structure is
{
int width
int height
String bgcolor
String overflow
"auto", "visible", "hidten" , by default : auto
Object | String tableClass
}
Object colStyle
Represents common style for column, its structure is
{
String | Object defaultClass
style of column
String | Object markClass
style for selected column or column with current/selected cell
String | Object dragClass
style for drag column
}
Object rowStyle
Represents common style for row, its structure is
{
String | Object defaultClass
style for row
String | Object markClass
style for selected row or row with current/selected cell
String | Object dragClass
style for drag row
}
Object cellStyle
Represents common style for column, its structure is
{
String | Object defaultClass
style for cell
String | Object markClass
style for selected cell
String | Object currClass
style for current cell
}
Object toolBar
Represents toolBar and has such structure
{
int height
String bgcolor
String | Object defaultClass
buttons:
[
{
String name
"adtrowto" | "adtrowafter" | "delrow" | "adtcolto" | "adtcolafter" | "delcol" | "sortasc" | "sortdesc" | "multisortasc" | "multisortdesc" | "resetsort" | "copy" | "paste" | "formatbold" | "formatitalic" | "formatunderline" | "alignleft" | "aligncenter" | "alignright" | "setsearch" | "resetsearch" | "setamount"
String text
label for button
Object img_on
{String src:, int width:, int height}
Object img_off
{String src:, int width:, int height}
},
]
}
Object statusBar
Represents statusBar, its structure is
{
int height
String bgcolor
String | Object defaultClass
common style
String | Object messageClass
style for special messages
String fieldText
text marked that here are will be field label
String valueText
text marked that here are will be value from field
}
Object pageTurnBar
Represents bar with pages, its structure is
{
String bgcolor
String | Object defaultClass
common style
String | Object activeClass
style for current page
Object img_on : {String src:, int width:, int height}
bgimage for current page
Object img_off : {String src:, int width:, int height}
bgimage for all other pages
int height
height of one page
int width
width of one page
String text
label template for page
}

Note! Each property *Class in any Object can be String or Object

If it is String - it is css class name that defines by user in file *.css or <style> section of page

If it is Object - it is Object with fields from this list "borderwidth", "bordercolor", "borderstyle","backgroundcolor", "backgroundimage", "backgroundrepeat", "color", "fontfamily", "fontstyle", "fontweight", "fontsize","textalign", "textdecoration", "verticalalign", "padding", "cursor"

At least one field must be set in this Object

To disable toolBar or statusBar set the height property with 0

To disable pageTurnBar set amountPerPage with value that equal or greater then rowCount

 

Constructor:

CCodeThatGrid(String name, int r, int c)
Defines CCodeThatGrid object with the specified name and dimension: r rows x c columns
Example
var grid = new CCodeThatGrid("grid", 10, 10)

Methods:

addCol (idx, offset, [p,[d]])
Adds column at idx in array cols, if idx undefined adds column in offset columns from current
Parameters p indicates if will be grid painting after row add, by default it is true
Parameter d set the colDef for new columns, if it undefined DEFAULT_COLDEF will be using
addRow (idx, offset[, p])
Adds row at idx in array rows, if idx undefined adds row in offset rows from current
Parameters p indicates if will be grid painting after row add
By default it is true
clearMarkRange(markType)
Clears current mark range
In case when user holds Shift or Ctrl and current markType equals markType do nothing
copy ()
Keep data from current selection into grid clipboard
delCol (idx[, p])
Delete column at idx from array cols
Parameters p indicates if will be grid painting after row deletind
By default it is true
delCols()
If current markType is 1 (columns selection) all columns from this selection will be deleted in another case current columns will be delete
delRow (idx[, p])
Delete row at idx from array rows
Parameters p indicates if will be grid painting after row deletind
By default it is true
delRows()
If current markType is 2 (rows selection) all rows from this selection will be delete in another case current row will be delete
doAction([datatype, [data]])
Starts action of grid after initiation and loads data with datatype if parameters are defined
ebToHTML()
Returns HTML content of export bar of grid with div container
init (gridDef)
Initiates grid with data and appearance parameters from user gridDef definition
fromCSV(s[, spt])
Returns array [][] from String s
String at fisrt divide by \n and then divide by separator spt
fromCSVFile(s[, spt])
Returns array [][] from special format csv file named s
Content at fisrt divide by \n and then divide by separator spt
fromXML(x)
Returns array [][] from XML String x
fromXMLFile (x)
Returns array [][] from special xml file named x
getColByTitle (title)
Returns index in cols array by title or name (A, B, C, …) of column or -1 if column is not found in grid getClipData()
Gets data from system clipbords
Supports NN6 and IE5+ only
getID (prefix)
Returns string id with prefix for current grid, uses to name toolbars and etc.
hideProgress ()
Clear status bar of window
loadData(datatype, data[, cell])
Loads data with datatype into grid where cell is start cell for insert data
If cell is undefined data will be loading with start in first cell of grid
If size of data greater then size of grid, grid size will be increased
paint()
Paints grid into browser window
paintBar (bar)
Paints bar of grid with bar prefix
paste ()
Paste data from grid clipboards starts from current cell
ptToHTML ([inDIV])
Returns HTML content of page turn bar of grid with div container in case inDIV is true
resetSearch ()
Resets search results in grid
resetSort ([sortCol])
Resets sort in grid by sortCol, if sortCol is undefined resets all sorts
sbToHTML ([inDIV])
Returns HTML content of status bar of grid with div container in case inDIV is true
search()
Searches in grid for searchValue or filterValue
setAmountPerPage()
Sets amount records per page with value prompted from user
setCellStyle (param, value, cell)
Sets style parameter param with value to the current cell or current selection (markType=1,2 only)
setClipData(d)
Sets data into system clipbords
Supports only IE5+
setCurCell(cell)
Sets current cell
setIndex (sortCol)
Sets index for column sortCol
setIndex2(sortCol, start, end)
Sets secondary index for column sortCol that starts and start point and ens in end
setFilter (filterCol, filterValue)
Sets filter in filterValue for filterCol and searches in grid
setFocus(rOffset, cOffset)
Sets focus to the cell that offset from current one on rOffset rows and cOffset cols
setMarkRange(markRange, markType)
Sets selected range as markRange with type markType
setMultiSort (sortCol, sortType)
Additionally sorts data by column sortCol in direction sortType
setPage(page)
Sets current page of grid
setSearch ()
Sets search with value prompted from user and searches in grid
setSort (sortCol, sortType)
Sorts data by column sortCol in direction sortType
tbToHTML()
Returns HTML content of tool bar of grid with div container
toCSV([spt, [isRng, [onlychanged, [lessreadolnly]]]])
Returns csv-string with separator spt
If isRng is true csv-string get from current selection in another case from whole grid
If onlychanged is true will be return only changed rows
If lessreadonly is true will be return only non-readonly rows
By default:
spt = ';'
isRng = false
onlychanged = false
lessreadonly = false
toCSVFile ([onlychanged])
Returns string with header '<?xml version="1.0"?><data table="grid.name">'…'</data>' for keeping in special format csv-file
If onlychange is true will be return only changed rows, by default false
toHTML ([inDIV])
Returns HTML content of grid with div container in case inDIV is true
toXML ([onlychange, [lessreadonly]])
Returns xml-string in format
<?xml version="1.0"?>
<data table="grid.name">
 <row id="…">
  <field fieldname="col.title" bold="true|false" underline="true|false" italic="true|false" align="left|center|right">
   cell.value
  </field>
  …
 </row>
 …
 </data>
If onlychange is true will be return only changed rows
If lessreadonly is true will be return only non-readonly rows
By default:
onlychanged = false
lessreadonly = false
useFilter ([set])
Returns true if at least one column has autoFilter = true and filterValue != "" in case set parameter is defined
writeProgress (m)
Wtites message m in status bar of window

Class CGRow

Fields:

int _id
Row id, that equals its index in owner grid rows array
CCodeThatGRid grid
Grid - owner of this row
Boolean isVisible
Flag is row shows in grid
String height
HTML parameter height='heightvalue', by default height value is grid.rowStyle.height
Boolean change
Flag is data in row was changed, by default false
Boolean isMark
Flag is row selected
Boolean isReadOnly
Flag is data in row is read only
Function userFunction
User defined function that call after data setting for each non-service cells in this row
Function handler
User defined function that call as handler event of this row, required parameter object CEvent e
this.handler = rowHandler;
//e._e - Object window.Event, e._e.type = ["click", "dblclick", "mouseup", "mousedown"]
//e._o - source Object that call handler (CGCol, CGRow or CGCell)
function rowHandler(e) {
	switch(e._e.type) {
		case "click" :
			e._o.isMark = true;
		};
	}; 
String defaultClass
CSS class that defined normal style of this row
String markClass
CSS class that defined selected style of this row

Constructor:

CGRow(id, grid)
Creates new CGRow with _id id and owner grid

Methods:

getName([num])
Returns title for row header from num, if num undefined as num uses _id
GetID(prefix)
Returns string id with prefix for this, uses to name drag elements and etc.
valueOf ()
Returns _id value
toString ()
Returns _id value
search (s, f)
Searches in row for String s and check is match filters in columns with indexes [] f its filterValue
Returns true if success and false in another case
setMark (isMark[, s[, f[, p]]])
Selects row or part of row from s to f cells and paint it if p is undefined or true
If s undefined s is 0
If f undefined f is grid.colCount
paint ([s[, f]])
Paints row from s to f cells
If s undefined s is 0
If f undefined f is grid.colCount
setHeight (h)
Sets new value h as height for row
Height = 'height=' + h will be result in field height for this row

Class Cgcol

Fields:

int _id
Column id, that equals its index in owner grid cols array
CCodeThatGRid grid
Grid - owner of this row
Boolean isVisible
Flag is column shows in grid, gets from colDef
String width
HTML parameter width='width value', by default width value is colDef.width
String alignment
HTML parameter align='align value', by default align value is colDef.alignment
Boolean isMark
Flag is column selected
Boolean isReadOnly
Flag is data in column is read only, gets from colDef
String type
Type of column, gets from colDef
String title
Title of column, gets from colDef
String titleClass
HTML parameter class='colDef.titleClass | grid.colStyle.defaultClass'
Function compareFunction
Function that uses for compare 2 elements of column to set index, gets from colDef
Function userFunction
User defined function that call after data setting for each non-service cells in this column, gets from colDef
Boolean useAutoIndex
Flag is index for this column will be automatically created after grid initiation, gets from colDef
Boolean useAutoFilter
Flag is filter for this column will be automatically created after grid initiation, gets from colDef
[] int index
Index for this column
[] String filter
Filter array for this column
String filterValue
Current filter value for this column that was set by user
Function handler
User defined function that call as handler event of this column, required parameter object CEvent e
this.handler = rowHandler;
//e._e - Object window.Event, e._e.type = ["click", "dblclick", "mouseup", "mousedown"]
//e._o - source Object that call handler (CGCol, CGRow or CGCell)
function rowHandler(e) {
	switch(e._e.type) {
		case "click" :
			e._o.isMark = true;
		};
	}; 
String defaultClass
CSS class that defined normal style of this column
String markClass
CSS class that defined selected style of this column

Constructor:

CGCol(id, g[, colDef])
Creates new CGCol with id id and owner grid, and defined from colDef, if colDef is undefined DEFAULT_COLDEF is used.

Methods:

getName([num])
Returns title for column header from num, if num undefined as num uses _id
GetID(prefix)
Returns string id with prefix for this, uses to name drag elements, filters and etc.
valueOf ()
Returns _id value
toString ()
Returns _id value
setTitle()
Sets prompted from user title as new title of column
setFilter()
Set filter array from column's cells data
filterToHTML()
Returns HTML content for filter as select with name getID('filter')
setMark (isMark[, s[, f[, p]]])
Selects column or part of column from s to f cells and paint it if p is undefined or true
If s undefined s is 0
If f undefined f is grid.rowCount
paint ([s[, f]])
Paints column from s to f cells
If s undefined s is 0
If f undefined f is grid.rowCount
setWidth (h)
Sets new value w as width for column
width = 'width=' + w will be result in field width for this column

Class Cgcell

Fields:

CGRow row
Row owner of cell
CGCol col
Column owner of cell
int state
0 - default, 1 - current, 2 - editing
Boolean isMark
Flag is cell selected
Boolean isReadOnly
Flas is cell is read only
String b
Value of parameter style.fontWeight for this cell, by default ""
String i
Value of parameter style.fontStyle for this cell, by default ""
String u
Value of parameter style.textDecoration for this cell, by default ""
String alignment
Value of parameter style.textAlign for this cell, by default ""
Object data
Value in this cell
Function handler
User defined function that call as handler event of this cell, required parameter object CEvent e
this.handler = rowHandler;
//e._e - Object window.Event, e._e.type = ["click", "dblclick", "mouseup", "mousedown"]
//e._o - source Object that call handler (CGCol, CGRow or CGCell)
function rowHandler(e) {
	switch(e._e.type) {
		case "click" :
			e._o.isMark = true;
		};
	}; 
String defaultClass
CSS class that defined normal style of this cell
String markClass
CSS class that defined selected style of this cell
String currClass
CSS class that defined current style of this cell

Constructor:

CGCell(row, col[, data])
Creates new cell with row and col owner and set it with data

Methods:

setData (data[, isService])
Sets data into cells, check the type and call userFunction(s) if at least one of them defined and isService=false
If isService undefined it calculate as col.isReadOnly || row.isReadOnly
getData ()
Returns string with data of cell formatted by function defined for type of current cell
getDataForEdit ()
If type is Date return format data in all other cases return string representation of data in cell
getDataForFilter ()
If type is Date, Currency, Image return format data in all other cases return string representation of data in cell
compareTo (cell)
Compares current cell with cell with help of compareFunction of col of this cell
toString()
Returns "{" + row._id + "; " + col._id + "}"
getID()
Returns row.grid.getID("cell") + t.row._id + "_" + t.col._id, uses for name cells element
getEditControl()
Returns HTML control for edit of current cell, in case if it is not readonly and its col and row are not read only too.
If type is Date, Currency or Number returns 'input' control, in other cases 'textarea'
In another case return ""
setState(state)
Sets current state of cell as state and paints it
setMark()
Selects cell and paints it
setStyle (param, value)
Sets current style of cell and paint it
Param can be : b, i, u, alignment
getStyle()
return HTML style attribute for this cell
paint ([p])
Paints cell and its row/col if p is true
By default p is true

Additional functionality of array

insert(element, index)
Inserts element into array at index
remove(index)
Remove element from array at index and shift array

Service functions

makeRE(text)
Returns new RegExp() with switches ig from the text

Global variables

isShift
is shift holded
isCtrl
is control holded
CCG
current CodeThatGrid Object
CodeThatGrids
array of CodeThatGrid Object at page
re
/class=/
rng
array of current select range
w
window variable, uses when data loads from file in case if browser is not ie
curId
current element id, uses for drag event

Read more about CodeThatGrid >>

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