<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>Test List/Grid Width Scenarios</title>
|
<meta name="viewport" content="width=570">
|
<style>
|
@import "../../dojo/resources/dojo.css";
|
@import "../css/dgrid.css";
|
@import "../css/skins/tundra.css";
|
h2 {
|
font-weight: bold;
|
padding-bottom: 0.25em;
|
clear: both;
|
}
|
|
/* set dimensions of Grids */
|
.dgrid-grid {
|
width: 700px;
|
height: 20em;
|
}
|
|
/* specific widths for columns in content-wider-than-grid tests */
|
.wideCols .dgrid-cell {
|
width: 100px; /* force all columns to have SOME width */
|
}
|
.wideCols .field-col1 {
|
width: 500px;
|
}
|
.wideCols .field-col4 {
|
width: 300px;
|
}
|
|
#list, #widelist, #narrowlist {
|
float: left;
|
}
|
|
#list {
|
}
|
|
#widelist {
|
width: 300px;
|
}
|
|
#narrowlist {
|
width: 100px;
|
}
|
|
.dgrid {
|
margin: 10px;
|
}
|
</style>
|
<script src="../../dojo/dojo.js"
|
data-dojo-config="async: true"></script>
|
<script>
|
function toggleHeader(grid){
|
grid.set("showHeader", !grid.showHeader);
|
}
|
require([
|
"dojo/on", "dgrid/List", "dgrid/OnDemandGrid", "dgrid/Editor", "dgrid/Selection", "dgrid/Keyboard",
|
"dojo/_base/declare", "dojo/_base/array", "dgrid/test/data/testStore",
|
"dgrid/test/data/hierarchicalCountryData", "dojo/domReady!"
|
], function(on, List, Grid, Editor, Selection, Keyboard, declare, arrayUtil, testStore, hierarchicalCountryData){
|
var countries = arrayUtil.map(hierarchicalCountryData.items, function(country){
|
return country.name;
|
}),
|
// longer version to test horizontal scrolling in List
|
longCountries = arrayUtil.map(countries, function(country){
|
return country + country + country;
|
});
|
|
function getColumns(){
|
return { // you can declare columns as an object hash (key translates to field)
|
col1: {label: 'Column 1 column 1 column 1', editor: "text", editOn: "dblclick"},
|
col2: {label: 'Column 2', sortable: false},
|
col3: {label: 'Column 3', editor: "text", editOn: "dblclick"},
|
col4: 'Column444444444444444444',
|
col5: {label: 'Column 5', editor: "text", editOn: "dblclick"}
|
};
|
}
|
|
var StandardGrid = declare([Grid, Selection, Keyboard, Editor]);
|
|
window.grid = new StandardGrid({
|
collection: testStore,
|
columns: getColumns()
|
}, "grid");
|
|
window.scrollgrid = new StandardGrid({
|
collection: testStore,
|
columns: getColumns()
|
}, "scrollgrid");
|
|
window.headerlessgrid = new StandardGrid({
|
collection: testStore,
|
columns: getColumns(),
|
showHeader: false
|
}, "headerlessgrid");
|
|
var StandardList = declare([List, Selection, Keyboard]);
|
|
window.list = new StandardList({}, "list");
|
list.renderArray(countries);
|
|
window.widelist = new StandardList({}, "widelist");
|
widelist.renderArray(countries);
|
|
window.narrowlist = new StandardList({}, "narrowlist");
|
narrowlist.renderArray(longCountries);
|
});
|
</script>
|
</head>
|
<body class="tundra">
|
<h2>Simple lists</h2>
|
<p>Testing float + no width, width > row contents, width < row contents</p>
|
<div id="list"></div>
|
<div id="widelist"></div>
|
<div id="narrowlist"></div>
|
<h2>Grid with no column widths specified</h2>
|
<div id="grid"></div>
|
<h2>Grid with column widths exceeding grid width</h2>
|
<p>(for testing that nodes occupy correct widths -
|
pay attention to hover/selection style and scroll right)</p>
|
<p><button type="button" onclick="toggleHeader(scrollgrid);">Toggle header
|
</button></p>
|
<div id="scrollgrid" class="wideCols"></div>
|
<h2>Grid like previous, but with headers initially hidden</h2>
|
<p><button type="button" onclick="toggleHeader(headerlessgrid);">Toggle header
|
</button></p>
|
<div id="headerlessgrid" class="wideCols"></div>
|
</body>
|
</html>
|
