DHTMLX Docs & Samples Explorer

Index
dhtmlxgrid

## Creating Read-Only Excells (formatters)

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