<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CISROMM - Master Milestone List Editor</title>
<!-- Include dojo dependencies -->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/document.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojox/grid/enhanced/resources/claro/EnhancedGrid.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css">
<script src='http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js'></script>
<!-- Include dojo dependencies -->
<!-- Require the widgets -->
<script>
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.enhanced.plugins.exporter.CSVWriter");
dojo.require("dojo.io.iframe");
<!-- Require the widgets -->
<!-- Data Export Handler -->
function exportAll(){
dijit.byId("grid").exportGrid("csv", function(str){
/*dojo.io.iframe.create('exportFrame', 'exportFrameLoaded()', '');
dojo.io.iframe._currentDfd = null;
dojo.io.iframe.send({
url: "/ExportGrid.json",
content:{data:str}
});*/
//alert(str);
document.getElementById("output").value=str;
});
};
<!-- Data Export Handler -->
var grid, store;
<!-- Grid Creation -->
dojo.ready(function(){
data = {
identifier: 'id',
label: 'id',
items: []
};
data_list = [
{ col1: "normal", col2: false, col3: "new", col4: 'But are not followed by two hexadecimal', col5: 29.91, col6: 10, col7: false },
{ col1: "important", col2: false, col3: "new", col4: 'Because a % sign always indicates', col5: 9.33, col6: -5, col7: false },
{ col1: "important", col2: false, col3: "read", col4: 'Signs can be selectively', col5: 19.34, col6: 0, col7: true },
{ col1: "note", col2: false, col3: "read", col4: 'However the reserved characters', col5: 15.63, col6: 0, col7: true },
{ col1: "normal", col2: false, col3: "replied", col4: 'It is therefore necessary', col5: 24.22, col6: 5.50, col7: true },
{ col1: "important", col2: false, col3: "replied", col4: 'To problems of corruption by', col5: 9.12, col6: -3, col7: true },
{ col1: "note", col2: false, col3: "replied", col4: 'Which would simply be awkward in', col5: 12.15, col6: -4, col7: false }
];
var rows = 100;
for(var i=0, l=data_list.length; i<rows; i++){
data.items.push(dojo.mixin({ id: i }, data_list[i%l]));
}
// global var "test_store"
store = new dojo.data.ItemFileWriteStore({data: data});
grid = new dojox.grid.EnhancedGrid({
store: store,
rowSelector: 'auto',
query: {id: "*"} ,
plugins: {
exporter: true
},
structure: [
{field: 'col1', width: '20%', name: 'col1',hidden: false},
{field: 'col2', width: '20%', name: 'col2',hidden: false},
{field: 'col3', width: '20%', name: 'col3',hidden: false},
{field: 'col4', width: '20%', name: 'col4',editable: true}
]
},"grid");
grid.startup();
});
</script>
</head>
<body class="claro">
<button id="exportBtn" onClick="exportAll();">
Export to Excel
</button>
<div id="grid" style="width: 560px;height: 680px;"></div>
<textarea id="output" style="width: 560px;height: 680px;"/>
</body>
</html>