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() {
    
    $(".jsgrid-table").tableToJSON()
    
    });