![]() ![]() |
|||||||
|
|||||||
![]() |
|||||||
|
|||||||
What's New at Codethatgrid V2?Here you can find new features that were added at new CodeThatGrid version. Unlimited Number of Grids on Sinlge PageYou can put several grids at the same page. You should specify gridDef object for each grid. Then you create grid objects: ..html code... <script language="javascript1.2"> <!-- var g = new CCodeThatGrid("g", 10, 5); g.init(gridDef); g.doAction(); //--> </script> ...html code... <script language="javascript1.2"> <!-- var g1 = new CCodeThatGrid("g1", 11, 7); g1.init(gridDef1); g1.doAction(); //--> </script> ...html code... <script language="javascript1.2"> <!-- var gN = new CCodeThatGrid("gN", 100, 2); gN.init(gridDefN); gN.doAction(); //--> </script> Hide toolbar and statusbarIf you don't need toolbar or/and statusbar you can hide it. Just set its height in 0: var gridDef = { ... toolBar : { height : 0 }, statusBar : { height : 0 } ... }; If you wish change visibility of some bar in run-time, you can use such function: function setBarVisibility(g, bar) { var o = CT_fe(g.getID(bar)); if (Def(o)) { if (o.style.visibility == "hidden") { o.style.visibility = "visible" o.style.display = "block"; } else { o.style.visibility = "hidden"; o.style.display = "none"; }; }; }; Possible values for variable bar are "tb" - toolbar, "sb" - statusbar, "pt" - pageturnbar Non-excel styleIf you don't need header for rows and columns you can hide them. Just set property useRCID in 0: var gridDef = { ... useRCID : 0 ... }; User FunctionsYou can specify user function for grid and each row/column of it User function is a function that will be call automatically after data set for each cell, that is not service and belong to the object with user function defined:
By default, cell is service if row and/or column of it are ReadOnly But you can set parameter isService manually and change readOnly cells too Definition of user function must look like this function userFunction(grid, cell) { ... } //grid - CodeThatGrid Object, owner of cell //cell - cell that call userFunction Assume that we will need a grid for the order line items that will be able to: 1) calculate across columns within a row (e.g. amount = qty X unit price) 2) calculate across the rows for a column (e.g., sum up the amount column to give a subtotal with discount) Item includes ID, Item No, Item, Quantity, Price, Discount, Subtotal Add constraints in type Number, no empty values and all values >= 0 to use as type for Quantity function parseNumber(numVal) { if (Undef(numVal)) return 0 else numVal = new String(numVal); numVal = parseInt(numVal.replace(/[^0 - 9-\ + \.]/ig, '')); if (isNaN(numVal) || numVal < 0) return 0 else return new Number(numVal); }; For Discount column create user type Discount var DISCOUNT_FORMAT = "%"; function parseDiscount(numVal) { var d = parseNumber(numVal); if (d > 100) d = 100; return d; }; function formatDiscount(numObj, formatDiscount) { return (numObj > 0) ? formatDiscount + " " + numObj : DEFAULT_RESULT; }; Now define the user functions that will be use in grid. To get subtotal we will use function subTotal function subTotal(grid, cell) { if (Undef(cell)) return; //no cell for proceed var c0 = grid.getColByTitle('Price'), c1 = cell.col._id, r = cell.row._id, //current row and column indexes c2 = grid.getColByTitle('Subtotal'), c3 = grid.getColByTitle('Discount'); if (c1 == c2) return; //cells from column subtotal not need to proceed g.cells[r][c2].setData(g.cells[r][c0].data*g.cells[r][c1].data*(100 - g.cells[r][c3].data)/100, 0); if (grid.isInit) grid.cells[r][c2].paint(); }; To get total we will use function total function total(grid, cell) { if (Def(cell)) { if (grid.cells[grid.rowCount - 1].length < grid.cols.length) return; var c = cell.col, i, j, s = 0; if (c.type != 'Number' && c.type != 'Currency') return; for (i = 0; i < grid.rowCount - 1; i++) s += grid.cells[i][c._id].data*1; grid.cells[grid.rowCount - 1][c._id].data = s; if (grid.isInit) grid.cells[grid.rowCount - 1][c._id].paint(); } else{ //initiation var i, j, c = grid.getColByTitle('Quantity'); grid.isInit = 0; grid.addRow(grid.rowCount, 0, 0); //add result row grid.rows[grid.rowCount - 1].isReadOnly = 1; for (i = 0; i < grid.colCount; i++) { grid.cells[grid.rowCount - 1][i].b = "bold"; for (j = 0; j < grid.rowCount - 1; j++) { // count subtotal if (i == c) subTotal(grid, grid.cells[j][i]); total(grid, grid.cells[j][i]); // set userFunction for each row in // grid to count subTotal grid.rows[j].userFunction = subTotal }; }; grid.isInit = 1; grid.paint(); }; }; Set property userFunction with total in grid definition gridDef: var gridDef = { useRCID : 0, //non-excel style statusBar : { height : 0 }, //no status bar toolBar : { height : 0 }, //no toolbar userFunction : total, //user function ... } Create and init grid: <script language="javascript1.2"> <!-- var g = new CCodeThatGrid("g", 3, 7); g.init(gridDef); total(g); //no need doAction because total paints grid by itself //--> </script> Important! Use fields of Object only for read, for write in it use special methods.Example - User function, non-excel style, hide row and column headers, export dataYou can see an example and complete code here - User function, non-excel style, hide row and column headers, export data [popup] Run-time PropertiesNew version of CodeThatGrid allows you change style of separate row, column or cell and set event handlers for it New properties for Object CGRow
New properties for Object CGCol
New properties for Object CGCell
Example - run-time properties and handlersYou can see an example and complete code here - Run-time properties, handlers and external functions [popup] A few words about grid object model, this information become necessary you when we create user function, full CodeThatGrid Reference you can find as separate document. Class CCodeThatGridFields:
Methods:
Class CGRowFields:
Class CGColFields:
Class CGCellFields:
Methods:
|
|||||||
© CodeThat.com, 2003-2005 |