<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>Test Simple Grid ColumnReorder</title>
|
<meta name="viewport" content="width=570">
|
<style>
|
@import "../../../dojo/resources/dojo.css";
|
@import "../../../dojo/resources/dnd.css";
|
@import "../../css/dgrid.css";
|
@import "../../css/skins/claro.css";
|
.heading {
|
font-weight: bold;
|
padding-bottom: 0.25em;
|
}
|
.dgrid {
|
margin: 10px;
|
}
|
|
/* add styles to size this grid appropriately */
|
#grid, #grid2, #grid-99 {
|
height: 20em;
|
}
|
.field-order {
|
width: 3em;
|
}
|
.field-name {
|
width: 10em;
|
}
|
</style>
|
|
<script src="../../../dojo/dojo.js" data-dojo-config="async: true"></script>
|
|
<script>
|
var data = [
|
{order: 1, name:"preheat", description:"Preheat your oven to 350F"},
|
{order: 2, name:"mix dry", description:"In a medium bowl, combine flour, salt, and baking soda"},
|
{order: 3, name:"mix butter", description:"In a large bowl, beat butter, then add the brown sugar and white sugar then mix"},
|
{order: 4, name:"mix together", description:"Slowly add the dry ingredients from the medium bowl to the wet ingredients in the large bowl, mixing until the dry ingredients are totally combined"},
|
{order: 5, name:"chocolate chips", description:"Add chocolate chips"},
|
{order: 6, name:"make balls", description:"Scoop up a golf ball size amount of dough with a spoon and drop in onto a cookie sheet"},
|
{order: 7, name:"bake", description:"Put the cookies in the oven and bake for about 10-14 minutes"},
|
{order: 8, name:"remove", description:"Using a spatula, lift cookies off onto wax paper or a cooling rack"},
|
{order: 9, name:"eat", description:"Eat and enjoy!"}
|
];
|
var columns1 = {
|
order: "step", // give column a custom name
|
name: {},
|
description: { label: "what to do", sortable: false }
|
};
|
// columns2 tests using an array of columns with explicit IDs
|
var columns2 = [
|
{ id: "name", field: "name", label: "name" },
|
{ id: "description", field: "description", label: "what to do", sortable: false }
|
];
|
|
var prevent;
|
|
require(["dgrid/Grid", "dgrid/extensions/ColumnReorder", "dgrid/extensions/ColumnResizer",
|
"dojo/_base/declare", "dojo/domReady!"],
|
function(Grid, ColumnReorder, ColumnResizer, declare){
|
window.grid = new (declare([Grid, ColumnReorder]))({
|
columns: columns1
|
}, "grid");
|
grid.renderArray(data);
|
|
window.grid2 = new (declare([Grid, ColumnReorder, ColumnResizer]))({
|
columns: {
|
order: { label: "step", reorderable: false },
|
name: {},
|
description: { label: "what to do", sortable: false }
|
}
|
}, "grid2");
|
grid2.renderArray(data);
|
|
window.grid.on("dgrid-columnreorder", function(evt){
|
console.log("dgrid-columnreorder" + (prevent ? " (canceled): " : ": "),
|
evt);
|
if(prevent){ evt.preventDefault(); }
|
});
|
|
window.gridDash1 = new (declare([Grid, ColumnReorder]))({
|
columns: columns1
|
}, "grid-99");
|
gridDash1.renderArray(data);
|
});
|
|
</script>
|
</head>
|
<body class="claro">
|
<h2>A basic grid with column re-ordering</h2>
|
<div id="grid"></div>
|
<div>Buttons to test resetting columns:
|
<button onclick="grid.set('columns', columns1);">order, name, description</button>
|
<button onclick="grid.set('columns', columns2);">name, description</button>
|
</div>
|
<div>Button to test canceling dgrid-columnreorder events:
|
<button onclick="prevent = !prevent;">toggle canceling</button>
|
</div>
|
<h2>A grid with column re-ordering and resizing, and a non-reorderable Step field</h2>
|
<div id="grid2"></div>
|
|
<h2>A basic grid with a dash and a number at the end of the id</h2>
|
<div id="grid-99"></div>
|
</body>
|
</html>
|
