2

I tried implementing the Kendo spreadsheet widget using angular directive but it does not show up.

Here is my code:

HTML:

<div kendo-spreadsheet style="height:580px;" k-options="spreadsheetOptions"></div>

Controller:

$scope.spreadsheetOptions = {
            sheets: [{
                name: "Food Order",
                mergedCells: [
                    "A1:G1"
                ],
                rows: [{
                    height: 70,
                    cells: [{
                        value: "My Company", fontSize: 32, textAlign: "center"
                    }]
                }],
            }],
            excel: {
                fileName: "Order.xlsx"
            }
        };

No errors shown in the console either. Any ideas?

Alessio
  • 3,404
  • 19
  • 35
  • 48
Aditi
  • 1,188
  • 2
  • 16
  • 44

1 Answers1

2

Kendo Angular Spreadsheet directive works. Please see below example. You can also paste below example in html file.

    <!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/grid/angular">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.bootstrap.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
    <div ng-controller="MyCtrl">
        <div  kendo-spreadsheet style="width:100%" k-options="spreadsheetOptions"></div>
    </div>
</div>

<script>
    angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope){
           $scope.spreadsheetOptions = {
            sheets: [{
                name: "Food Order",
                mergedCells: [
                    "A1:G1"
                ],
                rows: [{
                    height: 70,
                    cells: [{
                        value: "My Company", fontSize: 32, textAlign: "center"
                    }]
                }],
            }],
            excel: {
                fileName: "Order.xlsx"
            }
        };
        })
</script>


</body>
</html>
vish.Net
  • 962
  • 2
  • 10
  • 21
  • Mine was setup on a hidden window and second tab of a tab control. Then opened later by the user. Basically initialized off display. It wouldn't show for me either until I put some simple text in front of it, it shows up now when the tab is activated: example: My sheet:
     – Tim Cederquist May 06 '16 at 14:43