<div id="Grid"></div>
<div id="Grid2"></div>
<script type="text/javascript">
$(function () {
ej.Grid.prototype.defaults.scrollSettings.scrollerSize = 10;
$("#Grid").ejGrid({
// the datasource "window.gridData" is referred from jsondata.min.js
dataSource: window.gridData,
allowPaging: true,
pageSettings: { pageSize : 5 },
allowScrolling: true,
scrollSettings: { width: 600},
columns: [
{ field: "OrderID", headerText: "Order ID", width: 100 },
{ field: "CustomerID", headerText: "Customer ID", width: 100 },
{ field: "EmployeeID", headerText: "Employee ID", width: 100 },
{ field: "Freight", headerText: "Freight", width: 100 },
{ field: "ShipCity", headerText: "Ship City", width: 100 },
{ field: "ShipCountry", headerText: "Ship Country", width: 100 },
{ field: "Verified", headerText: "Verified", width: 100 }
]
});
$("#Grid2").ejGrid({
// the datasource "window.gridData" is referred from jsondata.min.js
dataSource: window.gridData,
allowPaging: true,
pageSettings: { pageSize : 5 },
allowScrolling: true,
scrollSettings: {width: 600 },
columns: [
{ field: "OrderID", headerText: "Order ID", width: 100 },
{ field: "CustomerID", headerText: "Customer ID", width: 100 },
{ field: "EmployeeID", headerText: "Employee ID", width: 100 },
{ field: "Freight", headerText: "Freight", width: 100 },
{ field: "ShipCity", headerText: "Ship City", width: 100 },
{ field: "ShipCountry", headerText: "Ship Country", width: 100 },
{ field: "Verified", headerText: "Verified", width: 100 }
]
});
});
</script>
|