Headers and Footers

Header

To set the header for the grid, use the setHeader method:

mygrid = new dhtmlXGridObject('gridbox');
 
mygrid.setImagePath("./codebase/imgs/");         
mygrid.setHeader("Sales,Book title,Author,Price"); mygrid.init();

Note, the header's values are treated as HTML, so you can use any HTML tags in the setHeader method:

mygrid.setHeader("<img src='book_icon.png'>,<b>Sales</b>,Book title,Author,Price");
//the image "book_icon.png" will be used as the header of the 1st column

Header alignment

To align the header's labels, use related CSS rules in the setHeader method:

mygrid.setHeader(
    "A,B,C",
    null,
    ["text-align:right;","text-align:left;","text-align:center"]
);
//or
mygrid.setHeader("<div style='width:100%; text-align:left;'>A</div>,B,C");

Header menu

Starting from v4.1, users can enable dhtmlxMenu for setting visibility of different columns (hide/show them) right on the fly. To do this, the user just needs to call the following command:

grid.enableHeaderMenu();

Grid without a header

The setHeader method must be called anytime you initialize the grid, dhtmlxGrid detects the number of columns depending on the values specified in this method. The only way to display the grid without the header is to hide it.

To hide the grid's header, use the setNoHeader method:

mygrid.setHeader("A,B,C"); //must be called anyway as it sets the number of cols
mygrid.setNoHeader(true);  //hides the header

Multi-line headers/footers

To add one more header line, use the attachHeader method:

mygrid = new dhtmlXGridObject('gridbox');
 
mygrid.setImagePath("./codebase/imgs/");         
mygrid.setHeader("Sales,Book title,Author,Price"); mygrid.attachHeader("Second header,,"); mygrid.init();

Assigning a custom style to the additional headers is quite similar:

mygrid.setHeader("Sales,Book title,Author,Price");
mygrid.attachHeader(
    "Second header,,",
    ["text-align:right;","text-align:left;","text-align:center"]
);

Related sample:  Multirow header

Footer

To set the footer(or several footers) for the grid, use the attachFooter method:

There is a sibling command to attach footers (the first line and more):

mygrid = new dhtmlXGridObject('gridbox');
 
mygrid.setImagePath("./codebase/imgs/");         
mygrid.setHeader("Sales,Book title,Author,Price"); mygrid.attachFooter("Sales,Book title,Author,Price");  mygrid.init();

The CSS style for the footer is assigned through the 2nd parameter of the attachFooter method:

mygrid.attachFooter(
    "Sales,Book title,Author,Price",
    ["text-align:right;","text-align:left;","text-align:center"]
);

Detaching header(footer)

To detach some header(footer) from the grid, use the detachHeader (detachFooter) method:

mygrid = new dhtmlXGridObject('gridbox');
 
mygrid.setImagePath("./codebase/imgs/");         
mygrid.setHeader("Sales,Book title,Author,Price"); mygrid.attachFooter("Sales,Book title,Author,Price");  mygrid.init(); 
 
mygrid.detachFooter(0);//detaches the 1st footer(zero-based numbering)

Changing header's labels

To change the header's label of some column, use the setColumnLabel method:

//sets new label for the 1st column
mygrid.setColLabel(0,"New Column Label");
//sets new label for the 2nd header the 1st column
mygrid.setColLabel(0,"New Column Label",1);

Getting header's labels

To get the header's labels, use the getColumnLabel method:

//gets the  label of the 1st column
var colLabel=mygrid.getColLabel(0);
//gets the label of the 2nd header of the 1st column
var colLabel=mygrid.getColLabel(0,1);

Colspans (rowspans)

Multi-line headers (footers) can have colspans and rowspans. There is no special API for such a task, the functionality is based on special cell values.

To set a colspan(rowspan) you need to use special keywords in the setHeader (setFooterLabel) methods instead of the text labels:

• #cspan - the cell will be joined with the left cell
• #rspan - the cell will be joined with the above cell

mygrid.setHeader("A,#cspan,#cspan");
mygrid.attachHeader("A1,B1,#cspan");
mygrid.attachHeader("#rspan,B2,C2");

Related sample:  Footer

Initialization from XML

If you're initializing dhtmlxGrid from XML, the labels of the 1st header are set with the column tags.

Additional headers(footers) are specified with the afterInit/call tags:

<rows>
    <head>
        <column ... >A</column>
        <column ... >B</column>
        <column ... >C</column>
        <afterInit>
            <call command="attachHeader"><param>A1,B1,C1</param></call>
            <call command="attachHeader"><param>A2,B2,C2</param></call>
            <call command="attachFooter"><param>AF,BF,CF</param></call>
        </afterInit>
    </head>
    ...
</rows>

The same syntax is used to define colspans and rowspans (whitespaces around #rspan and #cspan values must be omitted).

Icons in the header

dhtmlxGrid has a special support for icons in the header. Note, the expected size of icons is 18x18 pixels.

To present an icon in the header, use the following technique:

mygrid = new dhtmlXGridObject('gridbox');
 
mygrid.setImagePath("./codebase/imgs/");         
mygrid.setHeader("Without Icon,img:[path/to/icon.gif]With Icon"); mygrid.init();

If you're using XML configuration, set an icon in the header as in:

<head> 
    <column width="50" type="dyn">Without Icon</column> 
    <column width="150" type="ed">img:[path/to/icon.gif]With Icon</column>
   ...
</head>

Treating header's labels as images

By default, dhtmlxGrid treats the header's labels as text values. To make the grid treat labels as images files' names, use the enableHeaderImages method:

mygrid = new dhtmlXGridObject('gridbox');
 
mygrid.setImagePath("./codebase/imgs/");         
mygrid.setHeader("img_01,img_02,img_03"); mygrid.enableHeaderImages(true);
mygrid.init();

Back to top