Check documentation for the latest version 6.0 of dhtmlxSuite Attaching Content to Popup DHTMLX Docs

Attaching Content to Popup

dhtmlxPopup can have various content, such as:

Attaching DHTMLX components

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

Each attach[NameofComponent] method returns the instance of the related component

Component Code Sample
Accordion
var myPop = new dhtmlXPopup(...);
var myAcc = myPop.attachAccordion(350, 300);

Related sample:  Attach accordion, Related API: attachAccordion

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

Related sample:  Attach calendar , Related API: attachCalendar

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

Related API: attachCarousel

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

Related sample:  Attach color picker , Related API: attachColorPicker

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

Related sample:  Attach editor , Related API: attachEditor

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

Related sample:  Attach form , Related API: attachForm

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

Related sample:  Attach grid , Related API: attachGrid

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

Related sample:  Attach layout , Related API: attachLayout

List
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
   ]
);

Related API: attachList

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

Related API: attachSidebar

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

Related API: attachTabbar

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

Related sample:  Attach tree , Related API: attachTree

TreeView
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"}
        ]}
    ]
});

Related API: attachTreeView

Attaching HTML Objects

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

Attaching an HTML string

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

Attaching a list

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: "&euro; 31,550"},
        {id: 2, name: "Audi A5 Sportback", price: "&euro; 30,990"},
        myPop.separator, // use this struct for separator
        {id: 3, name: "Audi A6", price: "&euro; 30,990"},
        {id: 4, name: "Audi A6 Avant", price: "&euro; 37,450"},
        {id: 5, name: "Audi A6 Quattro", price: "&euro; 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

Clearing the content

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.

Back to top