
grid
| Name space | rialto.widget |
| FILE | rialtoEngine\javascript\components\controls\grid.js |
| NAME | grid |
| INHERITS | AbstractComponent |
| VERSION | 0.86 |
| update | |
| DESCRIPTION | This object create a grid |
The grid object has a property called "tabData" which contains all the data and there properties.
this array will be helpfull to manipulate the grid. For example the onclick method pass the line and cell index. The value can be
retrieve using this array (tabData[indLine][indCell])
Its an array where each line is an array that contains:
the values of the differents cells
a sel attribute (true if the line is selected)
a cellProp object that represents for each cells
a sel attribute (true if the cell is selected).
a object which properties represents style properties to set.
For a grid of n row, the n first element of the array contain the value of the cell.
You can use additional row to store some data associated to a cell (id, database link...).
The writable attribute allow (when it is set to true) to put the cell in a writable state (with input field) after a double click.
The type of the input depend of the type of the cell define in the tabTypeCol of the constructor. You can also use a combo by
adding in the third column a collection of value/text like:
["string",60,[[140,"Cte 140"],[160,"Cte 160"],[180,"Cte 180"]]]
You can validate the new value by using the enter key or click on another cell or line
You can reset your typing by pressing the ESC key.
You can use the tabulation key to switch on next cell (or SHIFT+TAB for the previous cell)
You can use up and down arrow to switch to the same cell of the previous or next line
CONSTRUCTOR
| Name | Type | Description | Default |
| name | String | Name of the HTML element | |
| left | int | Left position (in pixel) | 0 |
| top | int | Top position (in pixel) | 0 |
| height | String | Height (in pixel or %) | 100% |
| parent | String | Reference of an HTML or a javascript element parent of the grid html element | |
| TabEntete | String Array | Array that contains the Header title of the grid | |
| tabTypeCol | Array | Array of array containing for each header the data type (string,date,number) and the header width | |
| bNavig | boolean | Display in navigation mode (true) or in block mode (false) | false |
| rang | int | Number of displayed lines in navigation mode(other than the header) | 15 |
| cellActive | boolean | Indicate if reactivity is on the cell(true) or on the line (false) | false |
| sortable | boolean | True if columns are sortable | true |
| multiSelect | boolean | True if you can select as many lines as you want | false |
| lineHeight | int | height of a line | 16 |
| boolPrint | boolean | Content can be printed(true/false) | true |
| switchable | boolean | can switch from block mode to navigation mode and vice versa(true/false) | true |
| actifClic | boolean | Enable click (true/false) | true |
| autoResizableW | boolean | Width is the same as parent width(true/false) | false |
| writable | boolean | true if the cells are writable | false |
Example:
oTableau = new rialto.widget.Grid({top:0,
left:5,
height:130,
parent:CADRER,
TabEntete:["lab_ExempleForm30","lab_ExempleForm31","lab_ExempleForm32","lab_ExempleForm13"],
tabTypeCol:[["string",80],["string",200],["date",100],["string",60]],
name:'oTableau',
bNavig:false,
rang:12,
cellActive:false,
sortable:true,
multiSelect:false,
lineHeight:16,
boolPrint:true,
switchable:true,
actifClic:true,
autoResizableW:true,
writable:true});
PUBLIC METHODS
| Method | Arguments list | Return value | Inherits | To redefine |
| isLine | object node | boolean | no | no |
| isCell | object node | boolean | no | no |
| getCellIndex | object node | int | no | no |
| getLineIndex | object node | int | no | no |
| getHtmlCellFromIndex | int indL,int indC | object | no | no |
| getHtmlLineFromIndex | int indL | object | no | no |
| getIndCellClic | | int | no | no |
| getIndLineClic | | int | no | no |
| setColumnVisible | boolean visible,int indexColumn | void | no | no |
| deleteLines | String title | void | no | no |
| deleteOneLine | int indL | void | no | no |
| initTab | | void | no | no |
| findLine | int col,String value | int | no | no |
| fillGrid | Array of array TabData,int index,boolean bOrder | void | no | no |
| addOneLine | Array tabLine | void | no | no |
| insertOneLine | Array tabLine,ind ind | void | no | no |
| setCellText | int indL,int indC,String text | void | no | no |
| getCellText | int indL,int indC | String | no | no |
| setStyle | int indL,int indC,object objeStyle | void | no | no |
| clickLine | int indL,int indC | void | no | no |
| clickNext | | void | no | no |
| clickPrevious | | void | no | no |
| clickFirst | | void | no | no |
| clickLast | | void | no | no |
| disableLine | int indL,int indC | void | no | no |
| addObjectInCell | int indL,int indC,object objePar | void | no | no |
| removeObjectFromCell | int indL,int indC,object objePar | void | no | no |
| onclick | int indL,int indC | | no | yes |
| ondbleclick | int indL,int indC | | no | yes |
| onCellEdit | int indL,int indC,string oldVal,string newVal | boolean | no | yes |
| onCellWrite | int indL,int indC,string newVal | | no | yes |
isLine
true if the given node is a line of the grid
Parameters:
object node:node to check
isCell
true if the given node is a cell of the grid
Parameters:
object node:node to check
getCellIndex
return javascrip cell index corresponding to the html cell node
Parameters:
object node:DOM node of the cell
getLineIndex
return javascrip line index corresponding to the html node
Parameters:
object node:DOM node of a line or a cell
getHtmlCellFromIndex
return the html cell according to the javascript index
Parameters:
int indL:javascript index of the line
int indC:javascript index of th cell
getHtmlLineFromIndex
return the html line according to the javascript index of the line
Parameters:
int indL:javascript index of the line
getIndCellClic
return index of the cell clicked
Parameters:
getIndLineClic
return index of the line clicked
Parameters:
setColumnVisible
this method will allow to hide/show a column
Parameters:
boolean visible:true to show or false to hide the column
int indexColumn:index of the column
deleteLines
this method will allow to delete the HTML lines of the grid
Parameters:
String title:new title to display in navigation mode
deleteOneLine
this method will allow to delete the HTML line according to the given index
Parameters:
int indL:index of the line to delete
initTab
this method will initialize the grid (delete lines and data)
Parameters:
findLine
Function who crosses the grid and sends back the index of the first found line of which column contains the value (-1 if fruitless research)
Parameters:
int col:index of the column where the function search
String value:value search
fillGrid
this method will fill the grid whith the data
Parameters:
Array of array TabData:contains for each lines the cell value
int index:index of the column to sort
boolean bOrder:Ascending sorting (false ) or downward (true )
Example:
oTableau.fillGrid([
["1933-00001","DUPONT Pierre","05/11/1974"],
["1933-00002","DURAND Jule","27/08/1942"],
["1933-00003","RENAUT Eric","01/11/1954"],
["1933-00004","SMITH John","28/12/1989"]]);
addOneLine
this method will allow to add one line to the grid data
Parameters:
Array tabLine:contains the cell value
Example:
oTableau.addOneLine(["1933-00001","DUPONT Pierre","05/11/1974"]);
insertOneLine
this method will allow to insert one line at the given position
Parameters:
Array tabLine:contains the cell value
ind ind:index where we insert the new line
Example:
oTableau.addOneLine(["1933-00001","DUPONT Pierre","05/11/1974"]);
setCellText
this method will allow to change text of a cell
Parameters:
int indL:index of the line
int indC:index of the cell
String text:new text
getCellText
return text of a cell
Parameters:
int indL:index of the line
int indC:index of the cell
setStyle
this method will allow to change any style attribute of the cell
Parameters:
int indL:index of the line
int indC:index of the cell (if -1 the style would be apply to all the cell of the line)
object objeStyle:object which properties reperesents style properties to set
Example:
oTableau.setStyle({color:red,border:1px solid black});
clickLine
this method will allow to select a line or a cell
Parameters:
int indL:index of the line
int indC:index of the cell
clickNext
this method will allow to select the next line of the current selected line
Parameters:
clickPrevious
this method will allow to select the previous line of the current selected line
Parameters:
clickFirst
this method will allow to select the first line
Parameters:
clickLast
this method will allow to select the last line
Parameters:
disableLine
this method will allow to disable a line or a cell
Parameters:
int indL:index of the line
int indC:index of the cell (if -1 all the cell of the line would be desable)
addObjectInCell
this method will allow to add a object in a cell
Parameters:
int indL:index of the line
int indC:index of the cell
object objePar:object to add (HTML or other rialto object)
removeObjectFromCell
this method will allow to remove an object from a cell
Parameters:
int indL:index of the line
int indC:index of the cell (if -1 all the cell of the line would be desable)
object objePar:object to remove (HTML or other rialto object)
onclick
this method will be raise after clicking on a cell
Parameters:
int indL:index of the line clicked
int indC:index of the cell clicked
The code must be redefine after the instanciation of the component. By default this method does nothing.
ondbleclick
this method will be raise after double clicking on a cell
Parameters:
int indL:index of the line clicked
int indC:index of the cell clicked
The code must be redefine after the instanciation of the component. By default this method does nothing.
onCellEdit
this method will be raise after typing a new text in a cell. The return value indicate if the new val is ok (true) or cancel (false)
Parameters:
int indL:index of the line
int indC:index of the cell
string oldVal:old text of the cell
string newVal:new text of the cell
The code must be redefine after the instanciation of the component. By default this method does nothing.
Example:
myGrid.onCellEdit=function(indLigne,indCell,oldVal,newVal){
//Check if the new val is not 0
if(newVal==0) {return false}
else{return true;}
}
onCellWrite
this method will be raise after the new val is validate
Parameters:
int indL:index of the line clicked
int indC:index of the cell clicked
string newVal:new text of the cell
The code must be redefine after the instanciation of the component. By default this method does nothing.