SpreadJS 13
SpreadJS Documentation / Developer's Guide / JavaScript Frameworks / SpreadJS with Knockout
In This Topic
    SpreadJS with Knockout
    In This Topic

    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.

    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 SpreadJS 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>