SpreadJS with Knockout

SpreadJS supports Knockout.

Knockout is a JavaScript MVVM library that makes it easier to create a rich, desktop-like user interface with JavaScript and HTML. Knockout uses observers to make the UI automatically stay in sync with the underlying data model, along with a powerful and extensible set of declarative bindings.

A Knockout binding consists of two items, the binding name, and value, separated by a colon. For example:

<span data-bind="text: myMessage"></span>

SpreadJS requires custom bindings when using Knockout. Refer to https://knockoutjs.com/documentation for more information on custom bindings. The SpreadJS binding name is gc-spread-sheets.

The following code sample creates a custom binding. You can also add a valid SpreadJS license key before initializing the component, if available.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello SPJS Knockout</title>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script type='text/javascript' src='scripts/knockout-3.4.0.js'></script>
    <link href="css/gc.spread.sheets.x.x.x.css" rel="stylesheet" />
    <script src="scripts/gc.spread.sheets.all.x.x.x.min.js"></script>

    <script type="text/javascript">

        // Licensing SpreadJS.
        GC.Spread.Sheets.LicenseKey = "xxx";        // Enter a valid license.

        // First define the binding value.
        // Defines ViewModel
        function Product(id, name, price, discontinued) {
            this.id = ko.observable(id);
            this.name = ko.observable(name);
            this.price = ko.observable(price);
            this.discontinued = ko.observable(discontinued);
        }
        var ViewModel = function (items) {
            this.items = ko.observableArray(items);
        };

        // Creates ViewModel
        var initialData = [
            new Product(104, "Computers", 262, false),
            new Product(95, "Washers", 709, true)
        ];
        var viewModel = new ViewModel(initialData);

        // Apply binding
        $(function () {
            ko.applyBindings(viewModel);
        });

    </script>

</head>
<body>
    // Bind SpreadJS to the html element to use Knockout.
    <div id="ss" data-bind="gc-spread-sheets: {
                            sheetCount: 1,
                            tabStripVisible: true,
                            sheets: [
                                {
                                    data: items,
                                    columns: [
                                        { displayName: 'ID', name: 'id', size: 80},
                                        { displayName: 'Name', name: 'name', size: 120},
                                        { displayName: 'Price', name: 'price', size: 80},
                                        { displayName: 'Discontinued', name: 'discontinued', size: 120}
                                    ]
                                }
                            ]

                        }" style="width:50%; height:200px;border: 1px solid gray;">
    </div>
</body>
</html>