Start Building Professional
Web Apps Today

dhtmlxgrid rows transposed to columns

Hello

I would like to use this grid to display and edit data from a table with a single row. But, because the row has many columns with lots of text, I am looking to use the first column as the header and the second column showing the data. After this I want to be able to edit any field.

How can I do this?

You can set no heade in grid with method :
 mygrid.setNoHeader(true);
Than you can set first 2 columns as not editable ("ro" type) and style them as header. Please find more information about apppearance in grid here http://dhtmlx.com/docs/products/dhtmlxGrid/doc/articles/Creating_custom_skin.html#grid_cust_skin

If it was only for showing data then your answer is ok. Thanks for that. But the idea would be to edit some of the rows of the second column that correspond to my actual data. This is the problem because I can only set the type for an entire column and not for individual, or groups of, rows.

>>This is the problem because I can only set the type for an entire column and not for individual, or groups of, rows.
Actually you can set type for individual cell. You can do that via XML or via API (available in PRO version only):
via XML:

<cell type="necessary_cell_type">cell value</cell>

vai API:
setCellExcellType(rowId, cellIndex, type) -  set excell type for cell in question
setRowExcellType(rowId, type) - set excell type for all cells in specified row
setColumnExcellType(colIndex, type) - set excell type for all cells in specified column
You can find example here http://dhtmlx.com/docs/products/dhtmlxGrid/samples/cell_types/pro_col_excell.html

I managed to display the table with the header as the first column and data as the second column as you proposed. It worked flawlessly! Thanks.
Now, I am looking for a simple way to apply the same header style to this first column.
You gave me a hint but it was not clear to me how to create a new skin just to the first column (even though I managed to easily find the style for the usual header).
I have inspected the html code that is produced for a grid and I've spotted a class="hdrcell". But how to apply this to the first TD of every TR?

To apply style for the necessary header's cell you can use 3rd parameter of setHeader() method:
 mygrid.setHeader("A,B,C",null,["text-align:right;","text-align:left;","text-align:center"]);