User Defined Renderer


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.

 

 

 


All contents are (c) Copyright 2005 - 2008, Sigma Software Inc. All rights Reserved