HTML code in Layout cell header

Suite and Optimus Suite 7
#1

Hello,

Is there an analogue to .setText method on Layout cells in 7.0? Looks like ability to set HTML code as cell header is missing from around v6, is there a reason for such omission?

We manages to find this workaround:
cell.getCellView().body[0].el.querySelector('.dhx_layout-cell-header__title').innerHTML = 'Header<button>Add</button>');

But it is ugly, and looks like potentially a good addition to the official library. Setting HTML headers via layout config (with something like “parseHTML” flag in the cols object) would be much better.

PS Tried to ask this question on the header doc page, but Disqus activation emails are not arriving for at least 3 hours…

#2

Hello @Anton42 ,

In the current layout version, you can set the HTML content with the html attribute in the object of a cell, as described by the following link:
https://docs.dhtmlx.com/suite/layout__cell_configuration.html#htmlcontent

#3

Thanks, but that’s just the cell body, not its header.

#4

Hello @Anton42,

Oh, understood what is the problem. Currently, there is no way to specify HTML as a header, but technically you can use the cell with “HTML” attribute instead of the header, as follows:

var layout = new dhx.Layout("layout_container", {
    cols: [
        {
            type: "line",
            rows: [
                { height: "content", html: "<div>Cell header</div>"},
                {  html: "<h2>Hello world</h2>"},
                
            ]
        }
    ]
});

Sample:
https://snippet.dhtmlx.com/mtegrr8w