Using the Spreadsheet with Angular

[Christy]

I am using the Kendo UI components in AngularJS and am including a spreadsheet in one of my pages.  Unlike the other components, the spreadsheet doesn't include an angular example.  Is there a way to get the reference to the spreadsheet?  I was hoping for some equivalent to

var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

Thanks!

[Dimiter Topalov]

Hello Christy,

You can use the kendoWidgetCreated event to make sure the spreadsheet has been initialized, and in it access the widget via k-scope-field, or the kendo-widget-name attribute, as described in the following section of our documentation:

http://docs.telerik.com/kendo-ui/AngularJS/introduction#widget-references

I have prepared a simple dojo to illustrate the suggested approach:

http://dojo.telerik.com/IRuXu

Let us know if you have other questions about Kendo UI.

Regards,
Dimiter Topalov
Telerik

[Christy]

Thank you for your response.  However, I'm not sure it is returning the same object as the jQuery did.  I had the following working:

<kendo-spreadsheet class="row" id="kSpreadsheet"
                   k-options="vm.spreadsheetOptions"
                   k-rebind="vm.spreadsheetOptions">
</kendo-spreadsheet>

and

var spreadsheet = $("#kSpreadsheet").data("kendoSpreadsheet");
spreadsheet.fromFile(newDataFile);
// OR
//var spreadsheet = $("#kSpreadsheet").getKendoSpreadsheet();
//spreadsheet.fromFile(newDataFile);

Now, when I change my view as follows:

<kendo-spreadsheet class="row" id="kSpreadsheet"
                   k-scope-spreadsheet="spreadsheet"
                   k-options="vm.spreadsheetOptions"
                   k-rebind="vm.spreadsheetOptions">
</kendo-spreadsheet>

and run

var spreadsheet = $scope.spreadsheet;
spreadsheet.fromFile(newDataFile);

I get an "Uncaught TypeError: Cannot read property 'fromFile' of undefined" on the second line.  When I put in a breakpoint and look at the spreadsheet object, it is now undefined instead of an object as before.  

Is there something else I need to do?

Thanks!

[Dimiter Topalov]

Hello Christy,

Please note, that if you want to use the Tag Directive approach to get a widget reference, the correct syntax is:

k-scope-field="spreadsheet"

instead of "k-scope-spreadsheet".

The two ways of getting a reference to Kendo UI widgets in the controller in the context of AngularJS are described in the already mentioned section of our documentation:

http://docs.telerik.com/kendo-ui/AngularJS/introduction#widget-references

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress