Read-only excells are pretty simple. They are only used to describe the way how the incoming data needs to be rendered.

  function eXcell_ro(cell){                                    //excell name is defined here
      if (cell){                                                     //default pattern, just copy it
          this.cell = cell;
          this.grid = this.cell.parentNode.grid;
      }
      this.edit = function(){}                                //read-only cell doesn't have edit method
      this.isDisabled = function(){ return true; }      // the cell is read-only, that's why it is always in the disabled state
      this.setValue=function(val){
          this.setCValue(val);                                       //actual data processing may be placed here, for now we just set value as it is
      }
  }
  eXcell_ro.prototype = new eXcell;    // nest all other methods from base class

While this snippet contains about 10 lines of code, most of it may be copy-pasted. There are only two places that need to be adjusted according to your needs:

• Name of the column;
• Data processing formula.

For example, the following code will create an excell which will render the cell value as button with a label:

  function eXcell_button(cell){                                    //excell name is defined here
      if (cell){                                                     //default pattern, just copy it
          this.cell = cell;
          this.grid = this.cell.parentNode.grid;
      }
      this.edit = function(){}                                //read-only cell doesn't have edit method
      this.isDisabled = function(){ return true; }      // the cell is read-only, that's why it is always in the disabled state
      this.setValue=function(val){
          this.setCValue("<input type='button' value='"+val+"'>",val);                                      
      }
  }
  eXcell_button.prototype = new eXcell;    // nest all other methods from base class

As you can see, the above mentioned snippet differs from the previous one only in two places but now you can automatically convert the incoming data into a button just by defining the column type:

 
    grid.setColTypes("button,ro");

You can use any kind of HTML in the process of cell code generation, which allows you to place complex elements inside the grid and style them as necessary. The code mentioned below creates a complex excell type, which will open new window with details on pressing the button:

 
    function eXcell_details(cell){                             //excell name is defined here
        if (cell){                                                     //default pattern, just copy it
            this.cell = cell;
            this.grid = this.cell.parentNode.grid;
        }
        this.edit = function(){}                                //read-only cell doesn't have edit method
        this.isDisabled = function(){ return true; }      // the cell is read-only, that's why it is always in the disabled state
        this.setValue=function(val){
 
 
              var row_id=this.cell.parentNode.idd;     //get related row id
 
 
              this.setCValue(val+"<input type='button' onclick='window.open(\"details.php?for=\"+row_id)'>",val);                                      
        }
    }
    eXcell_button.prototype = new eXcell;    // nest all other methods from base class