Attaching URL

A cell has a possibility to attach URLs. It can be done by using iFrames and AJAX calls.

In the case of iFrames call, an iFrame will be created inside of a cell, and your URL will be attached as a separate page (it will have access to your code as you will have control over the content inside of the iFrame).

In the case of AJAX call, the content returned by the server will be placed inside of a div.

a common function used for both methods is attachURL(), the only difference is that the 2nd argument is set to true for AJAX call
to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
loading is async, so to proceed with content, you need to use the "onContentLoaded" event

Attaching via iFrame

GET request

dhxComponent.cells(id).attachURL("page.html");

POST request without params

dhxComponent.cells(id).attachURL("page.html", null, true);

POST with params

dhxComponent.cells(id).attachURL("page.html", null, {fname: "Mike", hobby: "fishing"});

Attaching via AJAX

GET request

dhxComponent.cells(id).attachURL("page.html", true);

POST request without params

dhxComponent.cells(id).attachURL("page.html", true, true);

POST with params

dhxComponent.cells(id).attachURL("page.html", true, {fname: "Mike", hobby: "fishing"});

Using onContentLoaded event

As it was said above, loading is async, so to proceed with content, you need to use the "onContentLoaded" event:

// firstly add the event
dhxComponent.attachEvent("onContentLoaded", function(id){
    // page.html id loaded, your code here
});
 
// now attach a URL
dhxComponent.cells(id).attachURL("page.html");

Accessing the attached content

This part is related to the iFrame-mode only.

Assuming the code below has been attached:

<html>
<head>
    <script>        function myFunc() {
            console.log("I'm attached function");
        }
    </script>
</head>
<body>
    <div id="attachedObject">
        Some text here
    </div>
</body>
</html>

Firstly, you need to get an iFrame object from the cell where the attached content is located:

var ifr = dhxComponent.cells(id).getFrame();

Now you can access the elements:

// make sure an element exists
var elem = ifr.contentWindow.document.getElementById("attachedObject");
elem.innerHTML = "Some new text here";

and call some JS code:

// make sure function exists and located in the iFrame's window scope
ifr.contentWindow.someFunc();

Accessing parent from attached page

This part is related to the iFrame-mode only.

If you need to make some actions with a cell from the attached page (for example, hide the window by clicking some button on the page or collapse a layout's cell) this can be done in the following way:

<!-- this attached page.html -->
<script>    function controlParent() {
        parent.myLayout.cells(id).collapse();   // collapse layout's cell
        parent.myWins.window(id).hide();        // hiding a window
    }
</script>

Any variable or function can be acccessed but make sure it is declared in a global window scope.

Detaching URLs

Any attached URL can be detached from a cell by using the detachObject() method:

// attach
dhxComponent.cells(id).attachURL("page.html");
 
// detach later
dhxComponent.cells(id).detachObject(true);

If the 1st param is set to true, the object (iFrame or a div with AJAX content) will be removed from DOM, otherwise it will be moved to document.body.