Available in the Full Version
Data Grid - JSON Binding
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
The sample demonstrates how to bind igGrid to JSON data source.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<style>
#grid_container
{
width: 100%;
max-width: 560px;
}
</style>
</head>
<body>
<table id="grid"></table>
<script>
$(function () {
var data = [
{ "Name": "John Smith", "Age": 45 },
{ "Name": "Mary Johnson", "Age": 32 },
{ "Name": "Bob Ferguson", "Age": 27 }
];
$("#grid").igGrid({
dataSource: data //JSON Array defined above
});
});
</script>
</body>
</html>
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />
window.onload = () => {
var adventureWorks = [{ "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381", "MakeFlag": false, "FinishedGoodsFlag": false, "Color": null, "SafetyStockLevel": 1000, "ReorderPoint": 750, "StandardCost": 0.0000, "ListPrice": 0.0000, "Size": null, "SizeUnitMeasureCode": null, "WeightUnitMeasureCode": null, "Weight": null, "DaysToManufacture": 0, "ProductLine": null, "Class": null, "Style": null, "ProductSubcategoryID": null, "ProductModelID": null, "SellStartDate": "\/Date(896648400000)\/", "SellEndDate": null, "DiscontinuedDate": null, "rowguid": "694215b7-08f7-4c0d-acb1-d734ba44c0c8", "ModifiedDate": "\/Date(1078992096827)\/" }, { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327", "MakeFlag": false, "FinishedGoodsFlag": false, "Color": null, "SafetyStockLevel": 1000, "ReorderPoint": 750, "StandardCost": 0.0000, "ListPrice": 0.0000, "Size": null, "SizeUnitMeasureCode": null, "WeightUnitMeasureCode": null, "Weight": null, "DaysToManufacture": 0, "ProductLine": null, "Class": null, "Style": null, "ProductSubcategoryID": null, "ProductModelID": null, "SellStartDate": "\/Date(896648400000)\/", "SellEndDate": null, "DiscontinuedDate": null, "rowguid": "58ae3c20-4f3a-4749-a7d4-d568806cc537", "ModifiedDate": "\/Date(1078992096827)\/" }, { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349", "MakeFlag": true, "FinishedGoodsFlag": false, "Color": null, "SafetyStockLevel": 800, "ReorderPoint": 600, "StandardCost": 0.0000, "ListPrice": 0.0000, "Size": null, "SizeUnitMeasureCode": null, "WeightUnitMeasureCode": null, "Weight": null, "DaysToManufacture": 1, "ProductLine": null, "Class": null, "Style": null, "ProductSubcategoryID": null, "ProductModelID": null, "SellStartDate": "\/Date(896648400000)\/", "SellEndDate": null, "DiscontinuedDate": null, "rowguid": "9c21aed2-5bfa-4f18-bcb8-f11638dc2e4e", "ModifiedDate": "\/Date(1078992096827)\/" }, { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908", "MakeFlag": false, "FinishedGoodsFlag": false, "Color": null, "SafetyStockLevel": 800, "ReorderPoint": 600, "StandardCost": 0.0000, "ListPrice": 0.0000, "Size": null, "SizeUnitMeasureCode": null, "WeightUnitMeasureCode": null, "Weight": null, "DaysToManufacture": 0, "ProductLine": null, "Class": null, "Style": null, "ProductSubcategoryID": null, "ProductModelID": null, "SellStartDate": "\/Date(896648400000)\/", "SellEndDate": null, "DiscontinuedDate": null, "rowguid": "ecfed6cb-51ff-49b5-b06c-7d8ac834db8b", "ModifiedDate": "\/Date(1078992096827)\/" }, { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036", "MakeFlag": true, "FinishedGoodsFlag": false, "Color": null, "SafetyStockLevel": 800, "ReorderPoint": 600, "StandardCost": 0.0000, "ListPrice": 0.0000, "Size": null, "SizeUnitMeasureCode": null, "WeightUnitMeasureCode": null, "Weight": null, "DaysToManufacture": 1, "ProductLine": null, "Class": null, "Style": null, "ProductSubcategoryID": null, "ProductModelID": null, "SellStartDate": "\/Date(896648400000)\/", "SellEndDate": null, "DiscontinuedDate": null, "rowguid": "e73e9750-603b-4131-89f5-3dd15ed5ff80", "ModifiedDate": "\/Date(1078992096827)\/" }, { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965", "MakeFlag": false, "FinishedGoodsFlag": false, "Color": "Black", "SafetyStockLevel": 500, "ReorderPoint": 375, "StandardCost": 0.0000, "ListPrice": 0.0000, "Size": null, "SizeUnitMeasureCode": null, "WeightUnitMeasureCode": null, "Weight": null, "DaysToManufacture": 0, "ProductLine": null, "Class": "L ", "Style": null, "ProductSubcategoryID": null, "ProductModelID": null, "SellStartDate": "\/Date(896648400000)\/", "SellEndDate": null, "DiscontinuedDate": null, "rowguid": "3c9d10b7-a6b2-4774-9963-c19dcee72fea", "ModifiedDate": "\/Date(1078992096827)\/" }, { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738", "MakeFlag": false, "FinishedGoodsFlag": false, "Color": "Black", "SafetyStockLevel": 500, "ReorderPoint": 375, "StandardCost": 0.0000, "ListPrice": 0.0000, "Size": null, "SizeUnitMeasureCode": null, "WeightUnitMeasureCode": null, "Weight": null, "DaysToManufacture": 0, "ProductLine": null, "Class": "M ", "Style": null, "ProductSubcategoryID": null, "ProductModelID": null, "SellStartDate": "\/Date(896648400000)\/", "SellEndDate": null, "DiscontinuedDate": null, "rowguid": "eabb9a92-fa07-4eab-8955-f0517b4a4ca7", "ModifiedDate": "\/Date(1078992096827)\/" }, { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457", "MakeFlag": false, "FinishedGoodsFlag": false, "Color": "Black", "SafetyStockLevel": 500, "ReorderPoint": 375, "StandardCost": 0.0000, "ListPrice": 0.0000, "Size": null, "SizeUnitMeasureCode": null, "WeightUnitMeasureCode": null, "Weight": null, "DaysToManufacture": 0, "ProductLine": null, "Class": null, "Style": null, "ProductSubcategoryID": null, "ProductModelID": null, "SellStartDate": "\/Date(896648400000)\/", "SellEndDate": null, "DiscontinuedDate": null, "rowguid": "7d3fd384-4f29-484b-86fa-4206e276fe58", "ModifiedDate": "\/Date(1078992096827)\/" }, { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903", "MakeFlag": false, "FinishedGoodsFlag": false, "Color": "Silver", "SafetyStockLevel": 1000, "ReorderPoint": 750, "StandardCost": 0.0000, "ListPrice": 0.0000, "Size": null, "SizeUnitMeasureCode": null, "WeightUnitMeasureCode": null, "Weight": null, "DaysToManufacture": 0, "ProductLine": null, "Class": null, "Style": null, "ProductSubcategoryID": null, "ProductModelID": null, "SellStartDate": "\/Date(896648400000)\/", "SellEndDate": null, "DiscontinuedDate": null, "rowguid": "7be38e48-b7d6-4486-888e-f53c26735101", "ModifiedDate": "\/Date(1078992096827)\/" }, { "ProductID": 321, "Name": "Chainring Nut", "ProductNumber": "CN-6137", "MakeFlag": false, "FinishedGoodsFlag": false, "Color": "Silver", "SafetyStockLevel": 1000, "ReorderPoint": 750, "StandardCost": 0.0000, "ListPrice": 0.0000, "Size": null, "SizeUnitMeasureCode": null, "WeightUnitMeasureCode": null, "Weight": null, "DaysToManufacture": 0, "ProductLine": null, "Class": null, "Style": null, "ProductSubcategoryID": null, "ProductModelID": null, "SellStartDate": "\/Date(896648400000)\/", "SellEndDate": null, "DiscontinuedDate": null, "rowguid": "3314b1d7-ef69-4431-b6dd-dc75268bd5df", "ModifiedDate": "\/Date(1078992096827)\/" }];
$("#grid1").igGrid({ dataSource: adventureWorks });
};