CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-window
Xion
Xion

Reputation: 494

How to trigger the function inside kendo window?

I have a page(A.html) that will open a kendo window with iframe(B.html) inside. Here is my configuration to open the kendo window in A.html:

var contentUrl = 'B.html';
var window = $("<div id='dvB' />").kendoWindow({
    title: "B", content: contentUrl, animation: false,
    resizable: false, modal: false, draggable: true, iframe: true, height: 550, width: 430,
            close: function () {
                this.destroy();
            }
        }).data('kendoWindow');
        window.open();

So now I want to call the retrieveFunction() in B.html from A.html. I try to do it like below:

Window = $('#dvB').data('kendoWindow');
Window.retrieveFunction();//not work

var windowElement = $("#dvB");
var iframeDomElement = windowElement.children("iframe")[0];
var iframeDocumentObject = iframeDomElement.contentDocument;
iframeDocumentObject.retrieveFunction(); //not work

Anyone know how to achieve that?

Upvotes: 0

Views: 1106

Answers (1)

sandro
sandro

Reputation: 217

You can trigger custom event from B.html and pass function as parameter and listening it on A.cshtml, something like this:

B.html

<script>
    function retrieveFunction() {
        console.log('retrieveFunction');
    }

    $(function () {
        window.parent.$('body').trigger('customEvent', { func: retrieveFunction});
    });
</script>

A.html

<script>
    $(function () {
        $('body').on('customEvent',
            function(event, data) {
                console.log('triggered');
                data.func();
            });

        $("<div id='dvB' />").kendoWindow({
            title: 'B', content: contentUrl, animation: false,
            resizable: false, modal: false, draggable: true, iframe: true, height: 550, width: 430,
            close: function () {
                this.destroy();
            }
        }).data('kendoWindow').open();
    });
</script>

Upvotes: 1

Related Questions