jQuery Grid: Binding to Observable Array

Create a Grid from Observable Array data.

A live JavaScript/jQuery example of jqxGrid, the jQWidgets Grid component, with its complete source code below. It is one of 139 jqxGrid demos for jQuery.

jqxGrid API used in this demo

selectionmode property – Sets or gets the selection mode.
height property – Sets or gets the Grid's height.
width property – Sets or gets the Grid's width.
columns property – Sets the Grid columns.
columnsresize property – Enables or disables the columns resizing.
editable property – The editable property enables or disables the Grid editing feature.
sortable property – The sortable property enables or disables the sorting feature.
source property – Sets and gets the source.

Source code

To run it in your own page, load jqx.base.css, a theme and the library files below from npm (npm install jqwidgets-scripts) or the jsDelivr CDN, then add the markup and the script. jQuery is not required: jqxcore.js provides $. Getting started with jqxGrid shows the setup step by step.

The page loads jqx.base.css, a theme and these library files: jqxcore.js, jqxdata.js, jqxbuttons.js, jqxscrollbar.js, jqxmenu.js, jqxgrid.js, jqxgrid.selection.js, jqxgrid.edit.js, jqxgrid.sort.js, jqxgrid.columnsresize.js.

It also loads helper scripts of this demo site, which are not part of the library: generatedata.js (generatedata(), random sample rows), demos.js (getWidth() and other layout helpers).

script.js

$(document).ready(function () {

    var array = generatedata(2);

    var updateLog = function (observableArray) {
        var rows = "";
        for (var i = 0; i < observableArray.length; i++) {
            rows += observableArray.toJSON(["firstname", "lastname", "productname", "quantity", "price", "total"], observableArray[i]);
            rows += "<br/>";
        }
        $("#log").html(rows);
    }

    var observableArray = new $.jqx.observableArray(array, function (changed) {
        updateLog(this);
    });
    updateLog(observableArray);
    var source =
    {
        localdata: observableArray,
        datatype: "obserableArray",
        datafields:
        [
            { name: 'firstname', type: 'string' },
            { name: 'lastname', type: 'string' },
            { name: 'productname', type: 'string' },
            { name: 'quantity', type: 'number' },
            { name: 'price', type: 'number' },
            { name: 'total', type: 'number' }
        ]
    };

    var dataAdapter = new $.jqx.dataAdapter(source);

    $("#grid").jqxGrid(
    {
        width: getWidth('Grid'),
        height: 150,
        source: dataAdapter,
        sortable: true,
        columnsresize: true,
        editable: true,
        selectionmode: "multiplecellsadvanced",
        columns: [
          { text: 'Name', datafield: 'firstname', width: 120 },
          { text: 'Last Name', datafield: 'lastname', width: 120 },
          { text: 'Product', datafield: 'productname', width: 180 },
          { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
          { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
          { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
        ]
    });

    $("#addItem").jqxButton();
    $("#deleteItem").jqxButton();
    $("#updateItem").jqxButton();
    $("#updatePath").jqxButton();
    $("#addItem").click(function () {
        var row = generatedata(1)[0];
        observableArray.push(row);
    });
    $("#deleteItem").click(function () {
        if (observableArray.length > 0) {
            observableArray.splice(0, 1);
        }
    });
    $("#updatePath").click(function () {
        if (observableArray.length > 0) {
            var row = generatedata(1)[0];
            observableArray.set("0.firstname", row.firstname);
            observableArray.set("0.lastname", row.lastname);
        }
    });
    $("#updateItem").click(function () {
        if (observableArray.length > 0) {
            var row = generatedata(1)[0];
            observableArray.set(0, row);
        }
    });
});

body.html

<div id="grid"></div>
<br><br>
<button id="addItem">Add Item</button>
<button id="deleteItem">Delete Item</button>
<button id="updateItem">Update Item</button>
<button id="updatePath">Update Path</button>
<br>
<div id="log"></div>

Learn more

More jQuery Grid demos

Batch Editing – Create enable Batch edit in jqxGrid.
Binding to Array – The Binding to Array demo of the jQuery Grid.
Binding to JS Array – The Binding to JS Array demo of the jQuery Grid.
Binding to XML – Create a Grid from XML data.
Binding to JSON – Create a Grid from JSON data.
Binding to JSON using PHP – Create a Grid from JSON data. For binding to MySQL Database using PHP and server-side sorting, filtering, editing or paging, please visit our Help Documentation.