![]() ![]() |
|||||||
|
|||||||
![]() |
|||||||
|
|||||||
The following "9 steps" instruction will guide you step by step through the CodeThatGrid configuration process. ![]() Download package with CodeThatGrid script and unarchive it.For free version (STD) download use this link. If you'd like to buy full version (PRO) use this link. Please bear in mind that CodeThat scripts come in two editions STANDARD and PRO. Editions differ by the features set and license type. Standard version is given for free and comes with the inscription representing our company's name. Upon registration you will get rid of that text.
![]() Create the basic HTML file.Your file may look as following: <HTML> <HEAD> <link href="common.css" rel="stylesheet" type="text/css"> <script language="javascript1.2" src="../Scripts/codethatsdk.js"></script> <script language="javascript1.2" src="../Scripts/codethatgridstd.js"></script> <script language="javascript1.2" src="../Scripts/codethattype.js"></script> </HEAD> <BODY> <p> HELLO WORD! </BODY> </HTML> ![]() First of all we should initialize CodeThatGrid:<script language="javascript1.2"> <!-- var CodeThatGrid = new CCodeThatGrid("CodeThatGrid", NUM_ROWS, NUM_COLS); CodeThatGrid.init(gridDef); // data initialization from gridDef structure CodeThatGrid.doAction(); // work with table //--> </script> ![]() Now lets create your first CodeThatGrid.For this purpose you can both create separate config *.js file or write the config construction right to your *.html file. Here we will view second variant. To describe new grid create an object with following structure: var gridDef = { useRCID : Boolean, // whether we use row/column header, default:true useExportBar : Boolean, // whether show layer with export form or not, default:false useMultiSort : Boolean, // whether we use multisort, default:true useColTitle : Boolean, // whether we show column titles, default:true, useProgress : Boolean, // whether we show information about grid actions, default:true amountPerPage : int, // count records per 1 page, default:20 datatype : 0|1|2|3|4, // 0 - array (default), 1 - csv String, 2 - xml file, // 3 - csv file, 4 - xml String data : Array | String, // data colDef : Array, //[{...}, ...] column definitions array, // if empty will use DEFAULT_COLDEF tableStyle : { ... }, // style parameters for table in whole rowStyle : { ... }, // row style parameters colStyle : { ... }, // column stle parameters cellStyle : { ... }, // cell style parameters toolBar : { ... }, // toolbar parameters // if you'd like to hide some button just remove this button description // from the toolbar description statusBar : { ... }, // statusbar parameters pageTurnBar : { ... } // pageturnbar parameters }; Hint - if parameters description isn't clearly understanding please have a look to CodeThatGrid User Manual ![]() Data for the Grid.You can describe data for the grid by using one of the following ways:
Here we show the first way: datatype : 0, data : [["1", "Stiles James", "01.01.2002", "2"], ["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"] ] ![]() Columns description.For every column at your grid you need to create description where column title, css class, column type, width, alignment and the other staff are specified. Also you should describe default properties for column in DEFAULT_COLDEF Object. To learn more about column description read Configure grid look page. var DEFAULT_COLDEF = { title : "", titleClass : "", type : "String", //the default type width : 100, alignment : "", compareFunction : compare, userFunction : null, isVisible : true, isReadOnly : false, useAutoIndex : false, useAutoFilter : false }; ... colDef : [ { title : "ID", titleClass : "", type : "Number", width : 75, alignment : "center", compareFunction : compare, isVisible : true, useAutoIndex : false, useAutoFilter : false }, { title : "Name", titleClass : "", type : "String", width : 150, alignment : "", compareFunction : compare, isVisible : true, useAutoIndex : false, useAutoFilter : false }, ... ] ![]() Then you specify whole table styleSpecify style for its colunm, rows and cells, toolbar, statusbar and pageturnbar style, and specify the buttons set: tableStyle : { tableClass : { borderwidth : 1, bordercolor : "#bbbbbb", borderstyle : "solid" }, bgcolor : "#ffffff", x : 10, y : 10, width : 660, height : 480 }, rowStyle : { defaultClass : { fontfamily : "Verdana", fontsize : "12px", backgroundcolor : "#cccccc", borderwidth : "1", borderstyle : "outset", bordercolor : "#cccccc" }, markClass : { backgroundcolor : "#ccccff", borderwidth : "1", borderstyle : "outset", bordercolor : "#cccccc" }, dragClass : { cursor : "move", borderwidth : "0" }, width : 20, height : 20 }, colStyle : { defaultClass : { fontfamily : "Verdana", fontsize : "12px", backgroundcolor : "#cccccc", borderwidth : "1", borderstyle : "outset", bordercolor : "#cccccc" }, markClass : { backgroundcolor : "#ccccff", borderwidth : "1", borderstyle : "outset", bordercolor : "#cccccc" }, dragClass : { cursor : "move", borderwidth : "0" }, width : 100, height : 20 }, cellStyle : { defaultClass : { borderwidth : "1", borderstyle : "solid", bordercolor : "#cfcfcf", fontfamily : "Arial", fontsize : "12px", backgroundcolor : "#ffffff", color : "#000000" }, markClass : { borderwidth : "1", borderstyle : "outset", bordercolor : "#cccccc", fontfamily : "Arial", fontsize : "12px", backgroundcolor : "#cfcfcf", color : "#000000" }, currClass : { 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" }, { }, //insert 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" }, { }, { 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 } ![]() So... A complete code for this example you can see here://GLOBAL VARS 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"]], colDef : [ { title : "ID", titleClass : "", //default for th type : "Number", width : 0, //auto alignment : "center", compareFunction : compare, isVisible : false, useAutoIndex : true, useAutoFilter : false }, { title : "Name", titleClass : "", type : "String", width : 200, //auto alignment : "", compareFunction : compare, isVisible : true, useAutoIndex : true, useAutoFilter : true }, { title : "Reg. date", titleClass : "", //default for th type : "Date", width : 100, //auto alignment : "center", compareFunction : compare, isVisible : true, useAutoIndex : true, useAutoFilter : true }, { title : "Kind", titleClass : "", //default for th type : "Number", width : 50, //auto 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 : { borderwidth : "1", borderstyle : "solid", bordercolor : "#cfcfcf", fontfamily : "Arial", fontsize : "12px", backgroundcolor : "#ffffff", color : "#000000" }, markClass : { borderwidth : "1", borderstyle : "outset", bordercolor : "#D4D0C8", fontfamily : "Arial", fontsize : "12px", backgroundcolor : "#cfcfcf", color : "#000000" }, currClass : { 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 } }; Hint - for using CodeThat Scripts you aren't limited only by html files. For example, you can build it in the *.php files. We've made it at this site :)![]() Congratulations! You have just created your first CodeThatGrid enhanced web page.To make your life easier we do plan to supply you with on and off line grid builders in the nearest time. |
|||||||
|
|||||||
© CodeThat.com, 2003-2005 |