[]
        
(Showing Draft Content)

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.

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