Even with variable styles, there are still circumstances where build-in editor and
renderer could not cover end-users' special data presentation need. Sigma Grid allow
you to denfine editor for inputting and renderer for showing stuff to enhance your
customers' satisfication.
Code
Two steps to follow to define a renderer.
Step One
To denfine an object with a method named paint,which has three parameters. These
parameters are passed by Sigma Grid when paint method is invoked.
- grid - The Sigma Grid self.
- row - The row where the cell to paint is located.
-
col - The column where the cell to paint is located.
var moneyRenderer = new function(){
this.paint = function(grid,row,col){
var data = row.getCellValue(col);
if(data < 10){
return "< span style="color: red">" +
data + "</span>";
}else if(data > 20){
return "<span style="color: blue">"
+ data + "</span>";
}else{
return data;
}
}
}
Step Two
To specify the money renderer as price column's render.
var columns = [
...
{name:"price",
caption:"Price",
width:120,
mode:"number",
format:"#",
render:moneyRenderer}
];
User defined renderer - display
-
Pay attention to the icon & price column.
-
See what happen when editing the price.
|
