...
Save the table with the name "supplyItem", then open the table data and add one two of sample rows(so that the ListGrid we ultimately load this data into has some valid rows to display).
Creating the DataSource and the controller to handle the requests
Create the index.php and change it's content to:
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<?php
?>
<HTML>
<HEAD>
<SCRIPT>var isomorphicDir = "Scripts/isomorphic/";</SCRIPT>
<SCRIPT SRC="Scripts/isomorphic/system/modules/ISC_Core.js"></SCRIPT>
<SCRIPT SRC="Scripts/isomorphic/system/modules/ISC_Foundation.js"></SCRIPT>
<SCRIPT SRC="Scripts/isomorphic/system/modules/ISC_Containers.js"></SCRIPT>
<SCRIPT SRC="Scripts/isomorphic/system/modules/ISC_Grids.js"></SCRIPT>
<SCRIPT SRC="Scripts/isomorphic/system/modules/ISC_Forms.js"></SCRIPT>
<SCRIPT SRC="Scripts/isomorphic/system/modules/ISC_DataBinding.js"></SCRIPT>
<SCRIPT SRC="Scripts/isomorphic/skins/TreeFrog/load_skin.js"></SCRIPT>
</HEAD><BODY>
<SCRIPT>
isc.RestDataSource.create({
ID:"suppyItem",
fields:[
{name:"itemID", type:"sequence", hidden:"true", primaryKey:"true"},
{name:"itemName", type:"text", title:"Item", length:"128", required:"true"},
{name:"SKU", type:"text", title:"SKU", length:"10", required:"true"},
{name:"description", type:"text", title:"Description", length:"2000"},
{name:"category", type:"text", title:"Category", length:"128", required:"true", foreignKey:"supplyCategory.categoryName"},
{name:"units", type:"enum", title:"Units", length:"5",
valueMap:["Roll", "Ea", "Pkt", "Set", "Tube", "Pad", "Ream", "Tin", "Bag", "Ctn", "Box"]
},
{name:"unitCost", type:"float", title:"Unit Cost", required:"true",
validators:[
{type:"floatRange", min:"0", errorMessage:"Please enter a valid (positive) cost"},
{type:"floatPrecision", precision:"2", errorMessage:"The maximum allowed precision is 2"}
]
},
{name:"inStock", type:"boolean", title:"In Stock"},
{name:"nextShipment", type:"date", title:"Next Shipment"}
],
dataFormat:"json",
dataURL:"/fetch.php"
});
isc.ListGrid.create({
ID: "suppyItem",
width: 700, height: 224, alternateRecordStyles: true,
dataSource: suppyItem,
autoFetchData: true
});
</SCRIPT>
</BODY></HTML> |
Open the web browser and call the url, the application will start and a grid fetching and displaying the rows found in the table will be shown.
Date fields are correctly displayed, and if null, are missing from the grid.
The complete code for this sample project can be downloaded from