Attaching HTML

There is a possibility to attach HTML objects and HTML strings to a cell. Several HTML objects can be attached at a time.

Attaching HTML object

<div id="objId">Some text</div>

// attach by id
dhxComponent.cells(id).attachObject("objId");

// or attach by link
var obj = document.getElementById("objId");
dhxComponent.cells(id).attachObject(obj);

in this mode a cell doesn't render scrolls by default, so you need to add CSS to your object manually:

div#objId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

This way is the same as attaching an object, but the current cell's content isn't removed:

dhxComponent.cells(id).appendObject("otherObjId");

in this mode a cell will add scrolls automatically, so there's no need to specify width/height to the attached object.

dhxComponent.cells(id).attachHTMLString('<div id="objId">Some text</div>');

in this mode scrolls aren't rendered by default as well, so you need to add CSS to your object manually:

div#objId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

Any attached object or HTML string can be detached from a cell with the help of the detachObject() method:

// attach
dhxComponent.cells(id).attachObject("objId");
 
// detach later
dhxComponent.cells(id).detachObject(true);

If the 1st param is set to "true", the object will be removed from DOM, otherwise it will be moved to document.body.