Dojo Grid Code
<html>
<head>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/grid/resources/claroGrid.css" />
<script src='//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js' data-dojo-config='async: 1, isDebug: 1, parseOnLoad: 1'></script>
</head>
<body class="claro">
<input type=button name=btn1 id=btn1 value='View Data' onclick="startGrid(this.nextSibling)" ><div id=div1 style="background-color:#eeeeee;height:500px;overflow:scroll"> </div>
<br>
<button onclick="alert(JSON.stringify(data))">current json data</button>
<script>
window.getData=function()
{
window.data = [
{ id: 1, col1: "986976", col2: "234", col3: "PC", col4: 234, col5: "Unit", col6: 456, col7: "EGP £" },
{ id: 2, col1: "986976", col2: "354", col3: "Processor", col4: 123, col5: "Unit", col6: 567, col7: "EGP £" },
{ id: 3, col1: "986976", col2: "564", col3: "RAM", col4: 567, col5: "Unit", col6: 234, col7: "EGP £" },
{ id: 4, col1: "986976", col2: "567", col3: "IC", col4: 43, col5: "Unit", col6: 789, col7: "EGP £" },
{ id: 5, col1: "986976", col2: "345", col3: "Mother Board", col4: 766, col5: "Unit", col6: 123, col7: "EGP £" },
{ id: 6, col1: "986976", col2: "24234", col3: "Server", col4: 2334, col5: "Unit", col6: 8797, col7: "EGP £" },
{ id: 7, col1: "3234", col2: "098", col3: "Case", col4: 876, col5: "Unit", col6: 456456, col7: "EGP £" },
{ id: 8, col1: "2342345", col2: "9867", col3: "Mouse", col4: 987, col5: "Unit", col6: 234345, col7: "EGP £" },
{ id: 9, col1: "234535", col2: "876", col3: "Pad", col4: 34, col5: "Unit", col6: 23423, col7: "EGP £" },
{ id: 10, col1: "3242", col2: "8686", col3: "Keyboard", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 11, col1: "234234", col2: "8686", col3: "MAC PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 12, col1: "23423", col2: "8686", col3: "IBM Z Server", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 13, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 14, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 15, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 16, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 17, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 18, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 19, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 20, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 21, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 22, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 23, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 24, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 25, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 26, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" }
];
return data;
}
window.startGrid= function(Obj){
require([
"dojox/grid/DataGrid",
"dojox/grid/cells",
"dojox/grid/cells/dijit",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/date/locale",
"dojo/domReady!"
], function(DataGrid, cells, cellsDijit, Memory, ObjectStore, locale){
var grid;
gridLayout = [{
defaultCell: { width: 8, editable: true, type: cells._Widget, styles: 'text-align: right;' },
cells: [
{ name: 'Id', field: 'id', editable: false },
{ name: 'Invoce ', field: 'col1', styles: '', width: 10 },
{ name: 'Code ', field: 'col2', styles: '', width: 10 },
{ name: 'ItemName ', field: 'col3', styles: '', width: 10 },
{ name: 'Count', field: 'col4', styles: '', width: 10 },
{ name: 'Unit', field: 'col5', styles: '', width: 10 },
{ name: 'Price', field: 'col6', styles: '', width: 10 },
{ name: 'Currency', styles: 'text-align: center;', field: 'col7', width: 10, type: cells.ComboBox, options: ["EGP £","US $","EURO €"]}
]
}];
data = getData();
var objectStore = new Memory({data:data});
// global var "test_store"
test_store = new ObjectStore({objectStore: objectStore});
grid = new DataGrid({
store: test_store,
structure: gridLayout,
escapeHTMLInData: false,
"class": "grid"
}, document.createElement('div'));
Obj.appendChild(grid.domNode);
grid.startup();
grid._lastScrollTop=grid.scrollTop;
grid._refresh();
});
}
</script>
</body>
</html>
DOJO CSS
https://download.dojotoolkit.org/release-1.9.1/dojo-release-1.9.1/dijit/themes/themeTester.html?theme=soria
No comments:
Post a Comment