jQuery Grid

Set the deferreddatafields property of the jqxGrid. Author: http://jqwidgets.com

by CHIU SHIH-WEI

HTML

<script src="http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="jqxgrid"></div>

JavaScript

$(document).ready(function () {
            var data = generatedata(5);

            var source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failder.
                    commit(true);
                },
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'date', type: 'date' },
                    { name: 'total', type: 'number' }
                ]
            };

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

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                autoheight: true,
                source: dataAdapter,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                showstatusbar: true,
                statusbarheight: 25,
                showaggregates: true,
                ready: function () {
                    var rowsCount = $("#jqxgrid").jqxGrid("getrows").length;
                    for (var i = 0; i < rowsCount; i++) {
                        var currentQuantity = $("#jqxgrid").jqxGrid('getcellvalue', i, "quantity");
                        var currentPrice = $("#jqxgrid").jqxGrid('getcellvalue', i, "price");
                        var currentTotal = currentQuantity * currentPrice;
                    ...