JSGrid Basic

by Danish Farman

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid-theme.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/jquery.tabletojson.min.js"></script>
<div id="jsGrid"></div>
<button id="save" type="button">
Save Data</button>
</button>

CSS

.jsgrid-cell {
  overflow: hidden;
}

.jsgrid-pager {
  text-align: center;
}

JavaScript

var data = [{
    "Name": "Test Test",
    "Married": false
  },
  {
    "Name": "Connor Johnston",
    "Married": false
  },
  {
    "Name": "Lacey Hess",
    "Married": false
  },
  {
    "Name": "Timothy Henson",
    "Married": false
  }
];

var clonedRowArgs = {};

$("#jsGrid").jsGrid({
  height: 300,
  width: "100%",

  autoload: true,
  inserting: true,
  editing: true,

  controller: {
    loadData: function() {
      return data;
    }
  },

  onItemInserted: function(args) {

    console.clear();

    $.extend(true, clonedRowArgs, args);

    args.grid.data.push(args.item);

    console.log("original inserted row args: " + JSON.stringify(args.item));

    console.log("cloned inserted row args: " + JSON.stringify(clonedRowArgs.item));

  },

  fields: [{
      name: "Name",
      title: "Name",
      type: "text",
      width: "60%",
      validate: "required"
    },
    {
      name: "Married",
      title: "Married",
      type: "checkbox",
      width: "30%",
      validate: "required"
    },
    {
      type: "control",
      width: "10%"
    }
  ]
});

$("#save").on("click", function() {
  console.clear();
  debugger;
  console.log($(".jsgrid-table").tableToJSON());

});