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

Using the Spreadsheet with Angular

3 Answers 1979 Views
Spreadsheet
This is a migrated thread and some comments may be shown as answers.
Christy
Top achievements
Rank 1
Christy asked on 30 Jun 2016, 02:48 PM
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!

3 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 04 Jul 2016, 07:32 AM
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
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
0
Christy
Top achievements
Rank 1
answered on 08 Jul 2016, 05:37 PM

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!

0
Accepted
Dimiter Topalov
Telerik team
answered on 11 Jul 2016, 12:38 PM
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
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Tags
Spreadsheet
Asked by
Christy
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Christy
Top achievements
Rank 1
Share this question
or