Start Building Professional
Web Apps Today

dhtmlx grid alternating rows, advanced design

Hello, I know that dhtmlx grid supports row alternation, but unfortunately in very strict way.

I have an generated table that has no border around it, just row lines at the header and at the bottom of the table.
Rows are alternated, between columns in a row vertical 1px spacing with color alternated to this row color.
This spacing shouldn't break horisontal lines at the header and at the bottom.

I was able to come with solution that are close enough to one we need, but with few restrictions and artifacts.

Is there a better and clear solution to this problem?

I'll attach graphic samples in the next reply.

Thanks.

>>This spacing shouldn't break horisontal lines at the header and at the bottom.
Can be updated in grid css file

dhtmlxgrid.css

div.gridbox div.ftr td , div.gridbox table.hdr td div.hdrcell, div.gridbox table.obj td {
    white-space:nowrap;
}

File "table_sample" - is a dynamic table that I try to mimic with grid.
*1 - is a 1px spacing in header, that doesn't break horizontal lines
*2 - row with 1px spacing in alternated color (columns - white, spacing - colored)
*3 - row with 1px spacing in alternated color (columns - colored, spacing - white)


File table_sample_grid - is a grid sample that should look just the same, but there is few problems:
There is scary javascript solution, which I don't like to be. I will try your solution with header.
*1, *2  - I'v been able to put 1px spacing between columns, but I can't alternate its color, so it all white
*3 - Since I've been using borders to show horisontal lines, it a bit off a table, same thing happens with *4

Thanks.

Please check attached sample - it not exact the same design as necessary in you case, but by modification of
    div.gridbox table.obj td {
    div.gridbox table.hdr td {
It creates necessary borders without any side effects.

Thanks, I have checked your example.
But it still doesn't address main problem of looped cells.
Main problem is that I want spaces between cells not only white, but in alternated row color.
So if I trying to add, for example left, colored border, it will appear at the left end of  the white row.

So I can see only two ways of doing this spacing right:
1) I should run some script that will alternate css for the last cell. Problem there is that I should trigger it whenever something done, for example simple sorting.
2) I shall put an empty(may be with image) cell which will act like an spacing. Problem is that I will have to deal with this. New cell will be affected by all cell controls, including cell resize and column movement.
And its quite tricky to handle.

I don't really expect that u have solution to such complex matter for looped code, since to implement it in the right way there should be some tricks inside.
I'm just checking that I'm not missing some nice trick, that could be done with better knowledge of this control. If there isn't, just state so please.


Thanks.

If you need to have the line between column to have the same color as defined in alter row css - you can set default border to transparent

div.gridbox table.obj td {
    border: 1px solid;
    border-color : transparent transparent Gray transparent;

There is no way to define different css classes during grid configuration, but if necessary you can assign css class directly from XML
In xml
    <row id="someid">
       <cell>first</cell>
       <cell>second</cell>
       <cell class="some">last</cell>
       ...
In css
div.gridbox table.obj td.some {
    rules specific for last cell
}

Its not exactly quite like this, but "transparency" thingie definitely gives me another way to solve this puzzle.
Thanks a lot!