Check documentation for the latest version of dhtmlxSuite Cell Header DHTMLX Docs

Cell Header

A header is the top of a cell. It displays functional buttons that are used to manipulate items, as well as the titles of items.

Header visibility

To show the header, use the showHeader method:

myLayout.cells("a").showHeader();

To hide the header, use the hideHeader method:

myLayout.cells("a").hideHeader();

To check whether the header of a layout's cell is currently visible or hidden, use the isHeaderVisible method. If the method returns "true" - the header is visible:

var isVisible = myLayout.cells("a").isHeaderVisible(); // returns true or false;

Header text

By default, the header's label is set to the id of the related cell. To specify some other label - use the setText method:

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

Also you can use any HTML while specifying the header's label:

myLayout.cells("a").setText('<input type="button" value="Click me!">');


To get the header's label, use the getText method:

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

In all the above methods, the cells method takes the id of a cell.

Collapsed header

To specify the header's label for the collapsed state, use the setCollapsedText method:

var collText = myLayout.cells("a").setCollapsedText("Main Page");
Back to top