|
 | ||||||||||
|
|
|
|
|
|||||||
JavaScript ProjectsSTUDIO GRID TABLE MENU TREE XPBAR HINT EDITOR TAB FORM CALENDAR SCROLLER SHOPPINGCART TREEPHP PACKER |
|
|
|
|
Themes |
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]
[ Home ] [ Contacts ] [ Site Map ] [ News ] [ Links ] [ Downloads ] |
[ Go Top ] |
© CodeThat.com, 2003-2009
Design by XTLabs, Inc
Sponsored by Rocket Division Software, LTD.