Handler to spreadsheet in iFrame window

[Mark]

My Home view contains a grid. When a row in the grid is clicked, a window is displayed in an iframe with a spreadsheet on it.

<div>
    @(Html.Kendo().Window()
            .Name("timecard")
            .Modal(true)
            .Actions(actions => actions.Close())
            .Draggable(false)
            .LoadContentFrom("Timecard")
            .Events(events => events
                .Open("timecard_OnOpen")
                .Close("timecard_OnClose")
            )
            .Iframe(true)
            .Width(1650)
            .Height(800)
            .Visible(false)
            .Deferred(true)
    )
</div>

 

In the Open event I am using an ajax call to the controller to get data to fill the spreadsheet. Once I have the data I want to populate the spreadsheet. The spreadsheet is somewhat complex with frozen rows, merged cells, etc. so I can't use a datasource. My issue is that I cannot get access to the spreadsheet on the iFrame window to populate it with the data.

function timecard_OnOpen(e)
{
    $.ajax({
        url: '@Url.Action("Load", "Timecard")',
        type: 'POST',
        data: { id: employee_key },
        success: timecard_LoadTimecardSuccess
    });
}

function timecard_LoadTimecardSuccess(data)
{
    var window = $("#timecard").getKendoWindow();
    var spreadsheet = $("#timecardSpreadsheet").data("kendoSpreadsheet");
}

 

The var spreadsheet is undefined. I want to be able to do something like this:

        var spreadsheet = $("#timecardSpreadsheet").data("kendoSpreadsheet");
        var sheet = spreadsheet.activeSheet();
        var range = sheet.range('B12'); // Spreadsheet cell name
        range.value("TEST");

 

 

 

[Marin Bratanov]

Hello Mark,

I would first suggest you use the refresh event to know when the iframe has loaded so you can work with the content: https://docs.telerik.com/kendo-ui/api/javascript/ui/window/events/refresh. If you try to access content before that, it may not be there yet. Of course, you can to polling through a setInterval to look for the content in the success callback, this is up to your preferences.

Then, to access content in the iframe, you must go through its contentWindow property which is a reference to its global scope (its own window object) as shown here: https://docs.telerik.com/kendo-ui/controls/layout/window/overview#use-with-iframe.

Regards,
Marin Bratanov
Progress Telerik

[Mark]

Thanks. I can get the spreadsheet but I had to use the contentDocument instead of the contentWindow. Not sure about that. Once I have the spreadsheet using the contentDocument and getElementById, I don't have access to the sheets through the var spreadSheetElement where I want to set the values through a range.

This is the code I am using:

// Get window and iframe in window
var windowElement = $("#timecard");
var iframeElement = windowElement.children("iframe")[0];

// Content Window
var iframeContentWindow = iframeElement.contentWindow;
var iframejQuery = iframeContentWindow.$; // return the jQuery object

// Content Document
var iframeContentDocument = iframeElement.contentDocument || iframeElement.contentWindow.document;
var spreadSheetElement = iframeContentDocument.getElementById('timecardSpreadsheet');

 

Still learning so I appreciate the help.

[Mark]

Just 5 minutes after my previous post I figured out the way to do it. If anything could be better done, please let me know.

// Content Window
var iframeContentWindow = iframeElement.contentWindow;
var spreadsheet = iframeContentWindow.$("#timecardSpreadsheet").data("kendoSpreadsheet");
var activeSheet = spreadsheet.activeSheet();
var range = activeSheet.range('B12'); // Spreadsheet cell name
range.value("JOB");

 

[Marin Bratanov]

Hello Mark,

The second approach you found is correct - it is the way to get a reference to a Kendo widget.

What I would personally do is to define a function in the view with the spreadsheet that expects the data and any other necessary arguments and call that. With this, the separation between the views will be better because the parent page will not have to know what the name of the spreadsheet is, how to get it in the DOM and so on. That's a matter of personal preference, though.

Regards,
Marin Bratanov
Progress Telerik