Attaching Content to Popup

dhtmlxPopup can have various content, such as:

• DHTMLX components
• an HTML object
• an HTML string
• a list

The table below presents DHTMLX components you can attach to a dhtmlxPopup object and code samples of such attaching.

var myPop = new dhtmlXPopup(...);
var myAcc = myPop.attachAccordion(350, 300);

var myPop = new dhtmlXPopup(...);
var myCalendar = myPop.attachCalendar();

var myPop = new dhtmlXPopup(...);
var myCarousel = myPop.attachCarousel(400, 300, conf){
    ...
});

var myPop = new dhtmlXPopup(...);
var myCP = myPop.attachColorPicker({ color: "#a4bed4"});

var myPop = new dhtmlXPopup(...);
var myEditor = myPop.attachEditor(400, 200);

var myPop = new dhtmlXPopup(...);
var myForm = myPop.attachForm([
    {type: "input",    label: "Email Address", name: "email"},
    {type: "password", label: "Password",      name: "pwd"}
]);

var myPop = new dhtmlXPopup(...);
var myGrid = myPop.attachGrid(350,300);

var myPop = new dhtmlXPopup(...);
var myLayout = myPop.attachLayout(350, 300, "3L");

var myPop = new dhtmlXPopup(...);
var myList = myPop.attachList(
   "name,price",   // template
   [               
     {id: 1, name: "Audi A5 Coupe", price: "€ 31,550"},
     {id: 2, name: "Audi A5 Sportback", price: "€ 30,990"},
     // more data
   ]
);

var myPop = new dhtmlXPopup(...);
var mySidebar = myPop.attachSidebar({
    items: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"}
    ]
});

var myPop = new dhtmlXPopup(...);
var myTabbar = myPop.attachTabbar(350, 300);

var myPop = new dhtmlXPopup(...);
var myTree = myPop.attachTree(350,300);

var myPop = new dhtmlXPopup(...);
myTreeView = myPop.attachTreeView(210, 95, {
    items: [
        {id: 1, text: "Documents", open: 1, items: [
            {id: 2, text: "Privacy and Terms.pdf"},
            {id: 3, text: "Licence Agreement.pdf"}
        ]}
    ]
});

To attach a DOM element to a dhtmlxPopup instance, use the attachObject method:

<div id="myObj">any custom text here</div>
 
<script>
     var myPop = new dhtmlXPopup(...);
     myPop.attachObject("myObj");
</script>

Related sample:  Attach object

To add the HTML markup to a dhtmlxPopup instance you should use the attachHTML method:

var myPop = new dhtmlXPopup(...);
myPop.attachHTML("any custom text here");

Related sample:  Attach html

dhtmlxPopup provides a handy way to present list-like structures inside it.

To present data in the tabular view you should use the attachList method as in:

var  myPop = new dhtmlXPopup(...);
myPop.attachList("name,price", [
        {id: 1, name: "Audi A5 Coupe", price: "€ 31,550"},
        {id: 2, name: "Audi A5 Sportback", price: "€ 30,990"},
        myPop.separator, // use this struct for separator
        {id: 3, name: "Audi A6", price: "€ 30,990"},
        {id: 4, name: "Audi A6 Avant", price: "€ 37,450"},
        {id: 5, name: "Audi A6 Quattro", price: "€ 55,360"}
]);

where

• "name, price" - a comma-separated list of data properties that will be rendered in the list;
• [{id:.., name:..., price:...}] - the data available for rendering in the list;
• separator - a special property of dhtmlxPopup that draws a single line.

Getting list's items

To get the list's items, use the getItemData method:

myPop.attachList("name,price", [
    {id: 1, name: "Audi A5 Coupe", price: "31550"},
    {id: 2, name: "Audi A5 Sportback", price: "30990"}
]);
 
var data = myPop.getItemData(1);
// data = {id: 1, name: "Audi A5 Coupe", price: "31550"}

To get all the items of the list you should call the method with no parameters:

myPop.attachList("name,price", [
    {id: 1, name: "Audi A5 Coupe", price: "31550"},
    {id: 2, name: "Audi A5 Sportback", price: "30990"}
]);
 
var data = myPop.getItemData();
// data = [
//     {id: 1, name: "Audi A5 Coupe", price: "31550"},
//     {id: 2, name: "Audi A5 Sportback", price: "30990"}
// ]

Related sample:  Attach list

To clear the current content of a pop-up window, use the clear method as in:

var myPop = new dhtmlXPopup( ... );
myPop.clear();

If you decide to attach some content over the existing one, note that before attaching the new content dhtmlxPopup will call the clear() method automatically.