JavaScript Grid

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

by jqwidgets

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

var data = [{
   firstname: "John",
   lastname: "Smith",
   date: "1/12/2016"
 }, {
   firstname: "Mary",
   lastname: "Page",
   date: "4/18/2016"
 }, {
   firstname: "Ian",
   lastname: "Fuller",
   date: "3/1/2016"
 }, {
   firstname: "Antonia",
   lastname: "Burke",
   date: "1/12/2016"
 }, {
   firstname: "Nancy",
   lastname: "Murphy",
   date: "5/1/2016"
 }, ];

 var source = {
   localdata: data,
   datafields: [{
     name: 'firstname',
     type: 'string'
   }, {
     name: 'lastname',
     type: 'string'
   }, {
     name: 'date',
     type: 'string'
   }],
   datatype: "array"
 };

 source.addrow = function(rowid, rowdata, position, commit) {
   // synchronize with the server - send insert command
   // call commit with parameter true if the synchronization with the
   // server is successful
   // and with parameter false if the synchronization failed.
   // you can pass additional argument to the commit callback which
   // represents the new ID if it is generated from a DB.
   commit(true);
 };
 var editrow = -1;


 var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
   width: '100%',
   height: 200,
   theme: 'energyblue',
   editable: true,
   autosavestate: true,
   autoloadstate: true,
   source: adapter,
   showtoolbar: true,
   columns: [{
     text: 'First Name',
     datafield: 'firstname',
     width: 90
   }, {
     text: 'Last Name',
     datafield: 'lastname',
     width: 90
   }, {
     text: 'Order Date',
     datafield: 'date',
     columntype: 'template',
     width: 160,
     createeditor: function(row, cellvalue, editor, cellText, width, height) {
       var source = [{
         label: "Jan",
         value: "1/1/2016",
         expanded: true,
         items: [{
           label: "Jan 12",
           value: "1/12/2016"
         }, {
           label: "Jan 20",
           value: "1/20/2016" /*, selected: true*/
         }]
       }, {
         label: "Feb",
         value: "2/1/2016"
       }, {
         label:...