Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

130 lines (113 sloc) 3.91 kb
<!DOCTYPE html>
<title>Test List/Grid Width Scenarios</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/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;
<script type="text/javascript" src="../../dojo/dojo.js"
data-dojo-config="async: true"></script>
<script type="text/javascript">
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/base", "dojo/domReady!"],
function(on, List, Grid, editor, Selection, Keyboard, declare, arrayUtil, testStore){
var countries =, function(country){
// longer version to test horizontal scrolling in List
longCountries =, function(country){
return country + country + country;
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")
var StandardGrid = declare([Grid, Selection, Keyboard]);
window.grid = new StandardGrid({
store: testStore,
columns: getColumns()
}, "grid");
window.scrollgrid = new StandardGrid({
store: testStore,
columns: getColumns()
}, "scrollgrid");
window.headerlessgrid = new StandardGrid({
store: testStore,
columns: getColumns(),
showHeader: false
}, "headerlessgrid");
var StandardList = declare([List, Selection, Keyboard]);
window.list = new StandardList({}, "list");
window.widelist = new StandardList({}, "widelist");
window.narrowlist = new StandardList({}, "narrowlist");
<body class="tundra">
<h2>Simple lists</h2>
<p>Testing float + no width, width &gt; row contents, width &lt; 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
<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
<div id="headerlessgrid" class="wideCols"></div>
Jump to Line
Something went wrong with that request. Please try again.