This is a migrated thread and some comments may be shown as answers.

Handler to spreadsheet in iFrame window

4 Answers 108 Views
Window
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 18 Feb 2019, 10:58 PM

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");

 

 

 

4 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 21 Feb 2019, 07:30 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Mark
Top achievements
Rank 1
answered on 21 Feb 2019, 09:45 PM

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.

0
Mark
Top achievements
Rank 1
answered on 21 Feb 2019, 09:56 PM

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");

 

0
Accepted
Marin Bratanov
Telerik team
answered on 22 Feb 2019, 02:33 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Window
Asked by
Mark
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Mark
Top achievements
Rank 1
Share this question
or