jQuery Grid: Edited Rows Rendering

The sample illustrates how to style the edited rows and keep their values in an Array.

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

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.edit.js, jqxgrid.sort.js, jqxgrid.selection.js, jqxlistbox.js, jqxdropdownlist.js, jqxcheckbox.js, jqxcalendar.js, jqxnumberinput.js, jqxdatetimeinput.js.

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

script.js

$(document).ready(function () {
    // prepare the data
    var data = generatedata(200);
    // array which keeps the indexes of the edited rows.
    var editedRows = new Array();

    var source =
    {
        localdata: data,
        datatype: "array",
        updaterow: function (rowid, rowdata, commit) {
            // that function is called after each edit.

            var rowindex = $("#grid").jqxGrid('getrowboundindexbyid', rowid);          
            editedRows.push({ index: rowindex, data: rowdata });

            // 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' }
        ]
    };

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

    var cellclass = function (row, datafield, value, rowdata) {
        for (var i = 0; i < editedRows.length; i++) {
            if (editedRows[i].index == row) {
                return "editedRow";
            }
        }
    }

    // initialize jqxGrid
    $("#grid").jqxGrid(
    {
        width: getWidth('Grid'),
        source: dataAdapter,
        editable: true,
        selectionmode: 'multiplecellsadvanced',
        columns: [
          { text: 'First Name', columntype: 'textbox', cellclassname: cellclass, datafield: 'firstname', width: 120 },
          { text: 'Last Name', datafield: 'lastname', cellclassname: cellclass, columntype: 'textbox', width: 120 },
          { text: 'Product', columntype: 'dropdownlist', cellclassname: cellclass, datafield: 'productname', width: 195 },
          { text: 'Available', datafield: 'available', cellclassname: cellclass, columntype: 'checkbox', width: 67 },
          {
              text: 'Ship Date', datafield: 'date', cellclassname: cellclass, columntype: 'datetimeinput', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'd',
             validation: function (cell, value) {
                  if (value == "")
                     return true;

                  var year = value.getFullYear();
                  if (year >= 2015) {
                      return { result: false, message: "Ship Date should be before 12/25/2025" };
                  }
                  return true;
              }
          },
          {
              text: 'Quantity', datafield: 'quantity', cellclassname: cellclass, width: 70, align: 'right', cellsalign: 'right', columntype: 'numberinput',
              validation: function (cell, value) {
                  if (value < 0 || value > 150) {
                      return { result: false, message: "Quantity should be in the 0-150 interval" };
                  }
                  return true;
              },
              createeditor: function (row, cellvalue, editor) {
                  editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
              }
          },
          {
              text: 'Price', datafield: 'price', cellclassname: cellclass, align: 'right', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
              validation: function (cell, value) {
                  if (value < 0 || value > 15) {
                      return { result: false, message: "Price should be in the 0-15 interval" };
                  }
                  return true;
              },
              createeditor: function (row, cellvalue, editor) {
                  editor.jqxNumberInput({ digits: 3 });
              }

          }
        ]
    });
});

body.html

<div id="jqxWidget">
    <div id="grid"></div>
    <div style="font-size: 12px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif; margin-top: 30px;">
        <div id="cellbegineditevent"></div>
        <div style="margin-top: 10px;" id="cellendeditevent"></div>
   </div>
</div>

Learn more

More jQuery Grid demos