DHTMLX Docs & Samples Explorer

Step 5 - Implementing Cell Editors for Formatting and Editing (cell types)

Cell Editiors (or eXcells - Extended Cells, Cell or Columns types) are used in grid to define the value formating and the way of editing. There are some predefined eXcells, delivered with the package (complete list is available here). Also there are some eXcells created by other developers. You also can create eXcells which will exactly suite your needs.

Setting cell types is easy - it can be done using one line of code. First of all, all eXcells have their own codes. These codes should be used while setting cell types. For example, a simple editor has the code “ed”, an editor with popup multiline editing area - “txt”, a readonly cell - “ro”, a checkbox - “ch”, a price formatted cell - “price”. In the Standard Edition of grid there is a possibility to set types on columns. In the Professional edition you can set type either on a column or on each cell.

Let's add types to our grid. By default all columns has “ro” type. Some types can be assigned to any values, but some, like “price”, for example, should be assigned to the cells with proper - numeric - values. Otherwise the value will be omitted or incorrectly parsed. Taking this into account, let's set the first column as editable with a simple editor (“ed”), assign a simple editor (“ed”) on the second one too and price formating with editing capabilities (“price”) on the last column. The line of code you need to add before mygrid.init() is the following:

    mygrid.setColTypes("ed,ed,price");

Now you can enter editors by a double click on an editable cell, or pressing F2. If you use tab key to navigate from one cell to another, then editor will be opened automatically for the cell which is in focus.

If you run the page now and double click on a cell in the third column it should look like this: