Using Spread.Sheets with Knockout

Spread.Sheets 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>

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

Using Code

This example creates a custom binding.

JavaScript	Copy Code
//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); }); //Bind Spread.Sheets to the html element to use Knockout. <div id="ss" data-bind="gc-spread-sheets: { sheetCount: 1, tabStripVisible: false, 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:100%; height:400px;border: 1px solid gray;"></div>

JavaScript

Copy Code

//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);
        });

    //Bind Spread.Sheets to the html element to use Knockout.
    <div id="ss" data-bind="gc-spread-sheets: {
                sheetCount: 1,
                tabStripVisible: false,
                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:100%; height:400px;border: 1px solid gray;"></div>