{"id":3133,"date":"2015-12-15T10:00:03","date_gmt":"2015-12-15T06:00:03","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=3133"},"modified":"2023-05-05T13:28:17","modified_gmt":"2023-05-05T10:28:17","slug":"dhtmlx-little-known-features-custom-column-type-in-grid","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-little-known-features-custom-column-type-in-grid\/","title":{"rendered":"DHTMLX Little-Known Features: Custom Column Type in Grid"},"content":{"rendered":"

In this article, we would like to continue to share with you small tips and tricks that allow you use DHTMLX components more efficiently and enjoy every single minute you spend with our library.<\/p>\n

This time, we’ll talk about dhtmlxGrid. It’s a full-featured javascript data grid<\/a> control that provides advanced functionality, powerful data binding, and fast performance with large data sets. This grid component gives you a possibility to specify the content type for a column. There is a plenty of available column types from a simple editable text field to date picker. But what if provided functionality is not enough for you? Well, it’s always possible to use custom column type. Let’s look at some examples.<\/p>\n

\"Grid<\/p>\n

<\/p>\n

First of all, let’s talk about the basic initialization. You can check this documentation page<\/a> for the details, but for now, this initialization sequence is what we need:<\/p>\n

myGrid =<\/span> new<\/span> dhtmlXGridObject(<\/span>'gridbox'<\/span>)<\/span>;<\/span>
\nmyGrid.setImagePath<\/span>(<\/span>".\/codebase\/imgs\/"<\/span>)<\/span>;<\/span>
\nmyGrid.setHeader<\/span>(<\/span>"Sales, Book Title, Author, Price"<\/span>)<\/span>;<\/span>
\nmyGrid.setInitWidths<\/span>(<\/span>"70,230,230, *"<\/span>)<\/span>;<\/span>
\nmyGrid.setColAlign<\/span>(<\/span>"right,left,left,right"<\/span>)<\/span>;<\/span>
\nmyGrid.setColTypes<\/span>(<\/span>"dyn,ed,ed,price"<\/span>)<\/span>;<\/span>
\nmyGrid.setColSorting<\/span>(<\/span>"int,str,str,int"<\/span>)<\/span>;<\/span>
\nmyGrid.init<\/span>(<\/span>)<\/span>;<\/span>
\nmyGrid.load<\/span>(<\/span>".\/data.json"<\/span>,<\/span>"json"<\/span>)<\/span>;<\/span><\/div><\/div>\n

What we’re particularly interested in is this line of code:<\/p>\n

myGrid.setColTypes<\/span>(<\/span>"dyn,ed,ed,price"<\/span>)<\/span>;<\/span><\/div><\/div>\n

This is where you define what column types you want to use. In this case we’ve created one dyn column that applies different coloring and marking based on the value, two simple column with editable cells that can be created using the ed parameter, and a price column that treats data as price.<\/p>\n

The result is shown below:<\/p>\n

\"Grid<\/p>\n

As you can see, the dollar sign is used by default in the Price column. In case, you already have an array of data you want to use and such behavior is not what you expected, you can create your own column type.<\/p>\n

Let’s start from read-only cells. For example, we want use euros as a currency. Here\u2019s the code:<\/p>\n

function<\/span> eXcell_myPrice(<\/span>cell)<\/span>{<\/span> \/\/the eXcell name is defined here<\/span>
\n    if<\/span> (<\/span>cell)<\/span>{<\/span>                \/\/ the default pattern, just copy it<\/span>
\n        this<\/span>.cell<\/span> =<\/span> cell;<\/span>
\n        this<\/span>.grid<\/span> =<\/span> this<\/span>.cell<\/span>.parentNode<\/span>.grid<\/span>;<\/span>
\n    }<\/span>
\n    \/* read-only cell doesn't have edit method *\/<\/span>
\n    this<\/span>.edit<\/span> =<\/span> function<\/span>(<\/span>)<\/span>{<\/span>}<\/span>  
\n    \/* the cell is read-only, so it's always disabled *\/<\/span>
\n    this<\/span>.isDisabled<\/span> =<\/span> function<\/span>(<\/span>)<\/span>{<\/span> return<\/span> true<\/span>;<\/span> }<\/span>
\n    this<\/span>.setValue<\/span>=<\/span>function<\/span>(<\/span>val)<\/span>{<\/span>
\n        \/* actual data processing *\/<\/span>
\n        this<\/span>.setCValue<\/span>(<\/span>"<span>&#8364; <\/span><span>"<\/span>+<\/span>val+<\/span>"<\/span>"<\/span>,<\/span>val)<\/span>;<\/span>                                      
\n    }<\/span>
\n}<\/span>
\n\/* nests all other methods from the base class *\/<\/span>
\neXcell_myPrice.prototype<\/span> =<\/span> new<\/span> eXcell;<\/span><\/div><\/div>\n

The most important parts in this code are the name of the new type and data processing formula. To use this newly created cell type you can change this line:<\/p>\n

myGrid.setColTypes<\/span>(<\/span>"dyn,ed,ed,myPrice"<\/span>)<\/span>;<\/span><\/div><\/div>\n

Here’s the result:<\/p>\n

\"Grid<\/p>\n

If you want to add a possibility to edit the cells, you should do the following:<\/p>\n