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.

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.

 

 

 


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