Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

129 lines (122 sloc) 3.602 kb
<!DOCTYPE html>
<html>
<head>
<title>Test Grid Common Cases</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=570" />
<style type="text/css">
@import "../../dojo/resources/dojo.css";
@import "../css/dgrid.css";
@import "../css/skins/claro.css";
h2 {
font-weight: bold;
padding-bottom: 0.25em;
clear: both;
}
#grid {
width: 70%;
}
#grid .field-col1 {
width: 100px;
}
#grid .field-col2 {
width: 30%;
}
#grid .field-col4 {
width: 180px;
}
#scrollgrid {
width: 50%;
}
#scrollgrid .dgrid-cell {
width: 100px; /* force all columns to have SOME width */
}
#scrollgrid .field-col1 {
width: 500px;
}
#scrollgrid .field-col4 {
width: 300px;
}
#tree {
width: 700px;
height: 200px;
float:left;
}
#tree .field-bool {
width: 20%;
}
#tree .field-type {
width: 80px;
}
#list{
width: 300px;
float: left;
}
.dgrid {
margin: 10px;
}
</style>
<script>
var start= new Date().getTime();
</script>
<script type="text/javascript" src="../../dojo/dojo.js"
data-dojo-config="async: true"></script>
<script type="text/javascript">
require(["dojo/on", "dgrid/List", "dgrid/OnDemandGrid", "dgrid/tree", "dgrid/editor", "dgrid/Selection", "dgrid/Keyboard", "dgrid/test/data/base", "dojo/_base/declare", "dojo/_base/array", "dojo/domReady!"],
function(on, List, Grid, tree, editor, Selection, Keyboard, testStore, declare, arrayUtil){
console.log("loaded in " + (new Date().getTime() - start));
var StandardGrid = declare([Grid, Selection, Keyboard]);
function getColumns(){
return { // you can declare columns as an object hash (key translates to field)
col1: editor({label: 'Column 1 column 1 column 1'}, "text", "dblclick"),
col2: {label: 'Column 2', sortable: false},
col3: editor({label: 'Column 3'}, "text", "dblclick"),
col4: 'Column444444444444444444',
col5: editor({label: 'Column 5'}, "text", "dblclick")
};
}
window.grid = new StandardGrid({
store: testStore,
columns: getColumns()
}, "grid");
window.scrollgrid = new StandardGrid({
store: testStore,
columns: getColumns()
}, "scrollgrid");
window.tree = new StandardGrid({
tabIndex: 2,
store: testCountryStore,
query: {type: "continent"},
selectionMode: "single",
columns: {
name: tree({label:'Name', sortable: false}),
bool: editor({label: 'A CheckBox', sortable: false}, "checkbox"),
type: {label: 'Type', sortable: false},
population: 'Population',
timezone: 'Timezone'
}
}, "tree");
window.list = new (declare([List, Selection, Keyboard]))({
tabIndex: 1
}, "list");
list.renderArray(arrayUtil.map(testCountryStore.data, function(country){
return country.name;
}));
on(document.getElementById("save"), "click", function(){
grid.save();
});
});
</script>
</head>
<body class="claro">
<h2>A basic grid (70% of page width)</h2>
<div id="grid"></div>
<button id="save">Save</button>
<h2>A grid with tree column and then a simple list (floated left)</h2>
<div id="tree"></div>
<div id="list"></div>
<h2>Same as basic grid, but with column widths exceeding grid width</h2>
<p>(for testing that nodes occupy correct widths - pay attention to hover/selection style)</p>
<div id="scrollgrid"></div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.