Skip to content


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>
<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;
#tree .field-bool {
width: 20%;
#tree .field-type {
width: 80px;
width: 300px;
float: left;
.dgrid {
margin: 10px;
var start= new Date().getTime();
<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(, function(country){
on(document.getElementById("save"), "click", function(){;
<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>
Jump to Line
Something went wrong with that request. Please try again.