grid


Name spacerialto.widget
FILErialtoEngine\javascript\components\controls\grid.js
NAMEgrid
INHERITSAbstractComponent
VERSION0.86
update
DESCRIPTIONThis 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


NameTypeDescriptionDefault
nameStringName of the HTML element
leftintLeft position (in pixel)0
topintTop position (in pixel)0
heightStringHeight (in pixel or %)100%
parentStringReference of an HTML or a javascript element parent of the grid html element
TabEnteteString ArrayArray that contains the Header title of the grid
tabTypeColArrayArray of array containing for each header the data type (string,date,number) and the header width
bNavigbooleanDisplay in navigation mode (true) or in block mode (false)false
rangintNumber of displayed lines in navigation mode(other than the header)15
cellActivebooleanIndicate if reactivity is on the cell(true) or on the line (false)false
sortablebooleanTrue if columns are sortabletrue
multiSelectbooleanTrue if you can select as many lines as you wantfalse
lineHeightintheight of a line16
boolPrintbooleanContent can be printed(true/false)true
switchablebooleancan switch from block mode to navigation mode and vice versa(true/false)true
actifClicbooleanEnable click (true/false)true
autoResizableWbooleanWidth is the same as parent width(true/false)false
writablebooleantrue if the cells are writablefalse

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


MethodArguments listReturn valueInheritsTo redefine
isLineobject nodebooleannono
isCellobject nodebooleannono
getCellIndexobject nodeintnono
getLineIndexobject nodeintnono
getHtmlCellFromIndexint indL,int indCobjectnono
getHtmlLineFromIndexint indLobjectnono
getIndCellClicintnono
getIndLineClicintnono
setColumnVisibleboolean visible,int indexColumnvoidnono
deleteLinesString titlevoidnono
deleteOneLineint indLvoidnono
initTabvoidnono
findLineint col,String valueintnono
fillGridArray of array TabData,int index,boolean bOrdervoidnono
addOneLineArray tabLinevoidnono
insertOneLineArray tabLine,ind indvoidnono
setCellTextint indL,int indC,String textvoidnono
getCellTextint indL,int indCStringnono
setStyleint indL,int indC,object objeStylevoidnono
clickLineint indL,int indCvoidnono
clickNextvoidnono
clickPreviousvoidnono
clickFirstvoidnono
clickLastvoidnono
disableLineint indL,int indCvoidnono
addObjectInCellint indL,int indC,object objeParvoidnono
removeObjectFromCellint indL,int indC,object objeParvoidnono
onclickint indL,int indCnoyes
ondbleclickint indL,int indCnoyes
onCellEditint indL,int indC,string oldVal,string newValbooleannoyes
onCellWriteint indL,int indC,string newValnoyes

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.