In most cases functions specified inside event handlers get some values with the arguments. For details about passed arguments please refer to API documentation.
Parameters which go to url specified in setXMLAutoLoading:
rowsLoaded - number of rows in grid before request
lastid - last row id.
XML Syntax:
cell contentcell content
In PHP script use the following code for page header:
\n");
?>
<rows> node is mandatory. It can contain grid related <userdata> blocks
<row> can contain row related <userdata> blocks.
To set userdata directly within XML use <userdata>
It has just one parameter:
If your grid should contain large amount of rows (or you simply do not want to waist time loading hidden rows at startup), it would be better to load them while scrolling.
For this purpose we made the grid to load rows dynamically using XML.
See chapter "Loading data with XML" for xml structure and syntax of methods
Buffering can be used to decrease the time for rendering the entire content of the grid at once (on startup).
Instead just a part of available rows will be added to the document just from the beginning - other rows will be added while user scrolls the grid.
To turn this feature off set the buffer size to 0.
If you use Dynamical Loading, then you can specify buffer size as secondparameter of setXMLAutoLoading method. By default it is set to 40 for Dynamical Loading.
The idea of Smart XML Parsing is simple - the entire tree structute loaded on client side, but only nodes which should be displayed are rendered. This helps to dramaticaly decrease loading time and general performance of large trees. Plus - in the contrary to Dynamical Loading - entrire tree structure is available for most of script methods (for example Search performed agains all nodes - not only rendered). To activate Smart XML Parsing use the following method:
Smart XML Parsing do not work if tree loaded fully expanded.
dhtmlxGrid supports both: checkboxes and radiobuttons. They are just types of columns you need to specify
before initializtion. For more details see Use Cell Editors (eXcell) chapter
You also can specify what value are considered as False for checkboxes and radiobuttons:
Taking into account the general low performance of DHTML we introducrd two ways of increasing performance of large grids:
1. Dynamical Loading
2. Buffering
3. Split the content of your grid into pages
...allows displaying grid rows in multiline mode (it is default state for Mozilla) or turn it of to have single-line rows (IE only).
To enable multiline feature you need to do the following:
mygrid.enableMultiline(true/false);
To enable multiselection mode you need to do the following:
mygrid.enableMultiselect(true/false);
Use [Shift/Ctrl] keys to select multiple rows at a time.
There are some predefined cell editors delivered with dhtmlxGrid. They are:
ReadOnly (ro) - cell can't be edited
Simple Editor (ed) - text is edited inside cell
Text Editor (txt) - text is edited in popup multiline textarea
Checkbox (ch) - standard checkbox
Radiobutton (ra) - column oriented radiobutton
Select box (coro) - simple selectbox
Combobox (co) - select box with ability to add some other value
Image (img) - not editable. Value considered as url of image
Special types:
Color picker (cp) - simple color picker (just for example). Value considered as color code or name
Price oriented (price) - shows $ before value, all values eql 0 shown as na in red color
Dynamic of Sales (dyn) - shows up/down icon depending on value. Also color coding available (green/red)
To assign necessary types to columns use the following script method with comma delimmited list of editor codes:
mygrid.setColTypes("ro,ed,txt,txt,ro,co");
Now we'll create new Cell Editor (eXcell) for dhtmlxGrid wich will edit values using simple text field and display strings aligned left, integers - aligned right: Complete way (not necessary to follow - just for understanding. Important if you want to incorporate some external editor f.e.)
1. Choose the code for the new eXcell. In our case it is "test".
2. Get eXcell template:
function eXcell_test(cell){
try{
this.cell = cell;
this.grid = this.cell.parentNode.grid;
}catch(er){}
/**
* @desc: method called by grid to start editing
*/
this.edit = function(){
}
/**
* @desc: get real value of the cell
*/
this.getValue = function(){
return "";
}
/**
* @desc: set formated value to the cell
*/
this.setValue = function(val){
if(val.toString().trim()=="")
val = " ";
this.cell.innerHTML = val;
}
/**
* @desc: this method called by grid to close editor
*/
this.detach = function(){
this.setValue(this.obj.value);
return this.val!=this.getValue();
}
}
eXcell_test.prototype = new eXcell;
3. Add necessary code to this.edit() method. In particular it is creation of textfield inside
grid cell and put there real (not formatted) value of the cell using this.getValue() method.
this.edit = function(){
this.val = this.getValue();
this.obj = document.createElement("TEXTAREA");
this.obj.style.width = "100%";
this.obj.style.height = (this.cell.offsetHeight-4)+"px";
this.obj.style.border = "0px";
this.obj.style.margin = "0px";
this.obj.style.padding = "0px";
this.obj.style.overflow = "hidden";
this.obj.style.fontSize = "12px";
this.obj.style.fontFamily = "Arial";
this.obj.wrap = "soft";
this.obj.style.textAlign = this.cell.align;
this.obj.onclick = function(e){(e||event).cancelBubble = true}
this.obj.value = this.val
this.cell.innerHTML = "";
this.cell.appendChild(this.obj);
this.obj.focus()
this.obj.focus()
}
4. Now edit this.setValue(val) to format incomming value:
this.setValue = function(val){
if(val.toString().trim()=="")
val = " ";
if(isNaN(Number(val))){
this.cell.align = "left";
}else{
this.cell.align = "right";
}
this.cell.innerHTML = val;
}
5. Now we are ready to edit this.getValue(). As we haven't added any additional elements to the cell content -
the will be just one line of code inside:
this.getValue = function(val){
return this.cell.innerHTML.toString();
}
6. Final step is to get rid of editor and fill cell with formated value in this.detach() method:
this.detach = function(){
this.setValue(this.obj.value);
return this.val!=this.getValue();
}
7. You can get the complete code here. Make sure your place your eXcell code after dhtmlxGridCell.js.
Express way (make eXcell based on existing eXcell of common type)
You can base your eXcell on one of existing eXcell - the choice depends on how the value should be edited.
For example simple text field is enough for your needs, but you need some special formating. The do the following:
1. C hoose the code for the new eXcell. In our case it is "test" again.
2. Template will be simplier and will be based on simple editor (code: ed).
Some new code from the beginning, but then we skip this.edit() and this.detach()
function eXcell_test(cell){
this.base = eXcell_ed;
this.base(cell)
this.getValue = function(){
return "";
}
this.setValue = function(val){
}
}
eXcell_test.prototype = new eXcell_ed;
3. getValue and setValue you can get from points 4 and 5 above.
Usage of eXcell
Now you can use your new eXcell among other editors:
mygrid.setColTypes("ed,ro,test");