CODEWITHSUNDEEP
angularjskendo-uiangular-kendo
Aditi
Aditi

Reputation: 1188

What is the Angular Kendo UI directive for kendo-spreadsheet?

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?

Upvotes: 2

Views: 1650

Answers (1)

vish.Net
vish.Net

Reputation: 962

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>

Upvotes: 2

Related Questions