DHTMLX Docs & Samples Explorer

Header Manipulations

Header is the top of a cell. It displays functional buttons that are used to manipulate items, and titles of items. Header manipulations include:

  • Hiding/showing a header
  • Getting header's current state
  • Setting header's text
  • Getting header's text
  • Setting header's text in a collapsed state

Hiding/showing a header

The header can be easily hidden with the help of the hideHeader() method:


To show the header - use the showHeader() method:


Getting header's current state

When you need to get the current state of the certain header, you should use the isHeaderVisible() method. If the method returns true, the header is visible:

var isVisible = dhxLayout.cells("a").isHeaderVisible(); // returns true|false;

Setting/Getting header's text

On default, the header contains text of the item's id.
To set/change text for the header - use the setText() method:

dhxLayout.cells("a").setText("New Text");

To get header's text - use the getText() method:

var text = dhxLayout.cells("a").getText();

In all the methods above , in the method cells() you set the name of the needed cell.

Setting header's text in a collapsed state

To specify header's text in a collapsed state - use the method setCollapsedText():

var collText = dhxLayout.setCollapsedText("a", "Main Page");
  • The first parameter - the name of a cell where you want to set header text
  • The second parameter - the header text

You can specify the second parameter as image. It can be used for correct representation when you deal with vertical cells.

var collText = dhxLayout.setCollapsedText("b", "<img src='../common/labels/1.gif' 
width='18px' height='81px' border='0'>");