Login Register

Dojo Grid Header Column Grouping

Hi,

Is it possible to group a set of columns and give a common header for this group.
It is almost like summary row but i don't want to display the row in data part(display only in header).
Some thing like given below.

-COMMON HEADER-
- A B C -
---------------
a1 b1 c1
---------------

Thank You,
Anish Devasia

We want common header too.

We want common header too. Does dojox.grid support this kind of complex table view?

like:
----------------------------
| Common Header |
----------------------------
| H1 | H2 | H3 |
----------------------------
| a1 | b1 | c1 |
----------------------------
| a2 | b2 | c2 |
----------------------------

The default view of dojox.grid is like this:
----------------------------
| Common Header |
----------------------------
| H1 | H2 | H3 |
----------------------------
| a1 |
----------------------------
| b1 | c1 | d1 |
----------------------------

Yes, using rowspan and

Yes, using rowSpan and colSpan. Let me pick the following table structure:

-----------------------------------------
             Common Header
-----------------------------------------
Sub Header 1   |   Sub Header 2
-----------------------------------------
   A   |   B  |   C  |   D   |   E  |   F    
-----------------------------------------
   1   |  2   |    3  |   4   |    5  |   6                              
-----------------------------------------
   6   |  5   |    4  |   3   |    2  |   1

So the structure looks as follows :

var structure = [{
        cells: [[{                                                            //first row
            name: 'Common Header',
            width: 'auto',
            colSpan: 6
        }], [{                                                                 //second row
            name: 'Sub Header 1',
            width: 'auto',
            colSpan: 3
        }, {
            name: 'Sub Header 2',
            width: 'auto',
            colSpan: 3
        }], [{                                                                // third row
            name: 'A',
            width: 'auto',
            field: 'a'
        }, {
            name: 'B',
            width: 'auto',
            field: 'b'
        }, {
            name: 'C',
            width: 'auto',
            field: 'c'
        }, {
            name: 'D',
            width: 'auto',
            field: 'd'
        }, {
            name: 'E',
            width: 'auto',
            field: 'e'
        }, {
            name: 'F',
            width: 'auto',
            field: 'f'
        } ]]
    }];

and here is the sample data in json format

var data = [{  
   identifier: 'id',
   items: 
   [   
        { id:1, a:1,  b:2, c:3, d:4, e:5, f:6},
        { id:2, a:6,  b:5, c:4, d:3, e:2, f:1}
   ]
}]

Hi ravi, I have tried the

Hi ravi,

I have tried the way you have explained. But the result is as given below,

-----------------------------------------
Common Header
-----------------------------------------
Sub Header 1 | Sub Header 2
-----------------------------------------
A | B | C | D | E | F
-----------------------------------------
1
-----------------------------------------------
1 | 2
-----------------------------------------------
1 | 2 | 3 | 4 | 5 | 6
-----------------------------------------------
2
----------------------------------------------
6 | 5
------------------------------------------------
6 | 5 | 4 | 3 | 2 | 1

Common Header and Sub headers are repeating on all rows.
I wanted to hide those herders form the rows.
Can you please provide the complete code you have used.

Thank You,
Anish Devasia

Same for me

Hello,

I'm encountering the same problem.
What I've done for now is mapping the Common Header to a field with a value set to ''.
That makes the line very small, even if it's still there.

Also when I tried :

----------------------
Common Header
----------------------
A | B
----------------------

... I get all the lines empty... but when I try this :

----------------------
A | B
----------------------
Common Header
----------------------

... everything is working fine !

Any ideas anyone?

oops ......... I am on

oops ......... I am on nightly build (http://archive.dojotoolkit.org/nightly/) and I am using dojox.grid.DataGrid. It works as expected.

http://ravi.72photos.com/client_images/10563/table.JPG

Its working.

Yes Its working with nightly build.
Thank you very much.

That's good news !

Ok, I just need to either use the nightly build for the Grid, or to wait for the dojo 1.2 release.
Thank you for this wonderfull screenshot ;-)