|
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.
Go to Sigma Grid 2.0 with more powerful functionalities >>
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.
|
