Documentation

Working with KnockoutJS

Knockout is a JavaScript library that helps you to create rich, responsive display with a clean underlying data model. To create a view model with Knockout, we declare the following JavaScript object: 
            var initialData = [
    { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
    { name: "Speedy Coyote", sales: 89, price: 190.00 },
    { name: "Furious Lizard", sales: 152, price: 25.00 },
    { name: "Indifferent Monkey", sales: 1, price: 99.95 },
    { name: "Brooding Dragon", sales: 0, price: 6350 },
    { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
    { name: "Optimistic Snail", sales: 420, price: 1.50 }
];
Then, we create the following Model: 
            var GridModel = function (items) {
    this.items = ko.observableArray(items);
    this.disabled = ko.observable(false);
    this.addItem = function () {
        // add a new item.
        if (this.items().length < 20) {
            this.items.push({ name: "New item", sales: Math.round(Math.random() * 100), price: Math.round(Math.random() * 100) });
        }
    };
    this.removeItem = function () {
        // remove the last item.
        this.items.pop();
    };
    this.updateItem = function () {
        // update the first item.
        var item = {};
        item.name = initialData[Math.floor(Math.random() * initialData.length)].name;
        item.sales = Math.floor(Math.random() * 500);
        item.price = Math.floor(Math.random() * 200);
        this.items.replace(this.items()[0], item);
    };
};
The model adds, removes and updates items. To activate Knockout, we need to call the applyBindings method and pass the view model object that we want to use.

var model = new GridModel(initialData);
ko.applyBindings(model);

The next step is to create the Grid and the add, update and remove buttons which will be bound to the addItem, removeItem and updateItem functions. Clicking a button will call a specific function.

The HTML markup is shown below: 
            <div id="jqxWidget">
                <div style="margin-bottom: 10px;">
                    <input id="addButton" type="button" data-bind="click: addItem, jqxButton: { theme: 'classic' }" value="Add Item">
                    <input id="removeButton" type="button" data-bind="click: removeItem, jqxButton: { theme: 'classic' }" value="Remove Item">
                    <input id="updateButton" type="button" data-bind="click: updateItem, jqxButton: { theme: 'classic' }" value="Update Item">
                    <div data-bind="jqxCheckBox: { checked: disabled, theme: 'classic' }" style="margin-top: 5px;" id="checkBox">Disabled</div>
                </div>
                <div data-bind="jqxGrid: {
source: items, disabled: disabled, autoheight: true,
    editable: true,
    selectionmode: 'singlecell',
    theme: 'classic',
    columns: [
        { text: 'Name', dataField: 'name', width: 200 },
        { text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' },
        { text: 'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right' }
    ]
}" id="jqxgrid">
                </div>
                <table style="margin-top: 20px;">
                    <tbody data-bind="foreach: items">
                        <tr>
                            <td data-bind="text: name"></td>
                            <td data-bind="text: sales"></td>
                            <td data-bind="text: price"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
Below is the example's full source code: 
<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to integrate jqxGrid with Knockout.js.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/json2.js"></script> 
    <script type="text/javascript" src="../../scripts/knockout-2.1.0.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var initialData = [
                { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
                { name: "Speedy Coyote", sales: 89, price: 190.00 },
                { name: "Furious Lizard", sales: 152, price: 25.00 },
                { name: "Indifferent Monkey", sales: 1, price: 99.95 },
                { name: "Brooding Dragon", sales: 0, price: 6350 },
                { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
                { name: "Optimistic Snail", sales: 420, price: 1.50 }
            ];
            var GridModel = function (items) {
                this.items = ko.observableArray(items);
                this.disabled = ko.observable(false);
                this.addItem = function () {
                    // add a new item.
                    if (this.items().length < 20) {
                        this.items.push({ name: "New item", sales: Math.round(Math.random() * 100), price: Math.round(Math.random() * 100) });
                    }
                };
                this.removeItem = function () {
                    // remove the last item.
                    this.items.pop();
                };
                this.updateItem = function () {
                    // update the first item.
                    var item = {};
                    item.name = initialData[Math.floor(Math.random() * initialData.length)].name;
                    item.sales = Math.floor(Math.random() * 500);
                    item.price = Math.floor(Math.random() * 200);
                    this.items.replace(this.items()[0], item);
                };
            };
            ko.applyBindings(new GridModel(initialData));
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id='jqxWidget'>
        <div style="margin-bottom: 10px;">
            <input id="addButton" type="button" data-bind="click: addItem, jqxButton: {theme: 'classic'}" value="Add Item" />
            <input id="removeButton" type="button" data-bind="click: removeItem, jqxButton: {theme: 'classic'}" value="Remove Item" />
            <input id="updateButton" type="button" data-bind="click: updateItem, jqxButton: {theme: 'classic'}" value="Update Item" />
            <div data-bind="jqxCheckBox: {checked: disabled, theme: 'classic'}" style='margin-top: 5px;' id="checkBox">Disabled</div>
        </div>
        <div data-bind="jqxGrid: {source: items, disabled: disabled, autoheight: true,
                theme: 'classic',
                editable: true,
                selectionmode: 'singlecell',
                columns: [
                    { text: 'Name', dataField: 'name', width: 200 },
                    { text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' },
                    { text: 'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right' }
                ]}" id="jqxgrid">
        </div>
        <table style="margin-top: 20px;">
            <tbody data-bind="foreach: items">
                <tr>
                    <td data-bind="text: name"></td>
                    <td data-bind="text: sales"></td>
                    <td data-bind="text: price"></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>