Using the Spreadsheet with Angular

4 posts, 1 answers
  1. Christy
    Christy avatar
    38 posts
    Member since:
    May 2016

    Posted 30 Jun Link to this post

    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!
  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    347 posts

    Posted 04 Jul Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Christy
    Christy avatar
    38 posts
    Member since:
    May 2016

    Posted 08 Jul in reply to Dimiter Topalov Link to this post

    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!

  5. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    347 posts

    Posted 11 Jul Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready