<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>Test Grid Compound Columns</title>
|
<meta name="viewport" content="width=570">
|
<style>
|
@import "../../../dojo/resources/dojo.css";
|
@import "../../css/dgrid.css";
|
@import "../../css/skins/claro.css";
|
.dgrid {
|
margin: 10px;
|
width: 80%;
|
}
|
|
.field-col1 {
|
width: 20%;
|
}
|
.field-col2 {
|
width: 20%;
|
}
|
.field-col3 {
|
width: auto;
|
}
|
.field-col4 {
|
width: 16%;
|
}
|
.field-col5 {
|
width: 50px;
|
}
|
|
#gridcscc {
|
width: 800px;
|
}
|
|
#gridcscc .field-col1,
|
#gridcscc .field-col2,
|
#gridcscc .field-col3,
|
#gridcscc .field-col4,
|
#gridcscc .field-col5 {
|
width: 300px;
|
}
|
|
.dgrid-column-set-0 {
|
width: 50%;
|
}
|
|
#gridcscc .dgrid-header .dgrid-row-table {
|
height: 45px; /* For IE */
|
}
|
</style>
|
<script src="../../../dojo/dojo.js" data-dojo-config="async: true"></script>
|
<script>
|
require(["dgrid/OnDemandGrid", "dgrid/extensions/CompoundColumns",
|
"dgrid/ColumnSet", "dgrid/Selection", "dgrid/Keyboard",
|
"dgrid/extensions/ColumnResizer", "dgrid/extensions/ColumnHider",
|
"dojo/_base/declare", "dojo/_base/lang", "dojo/on",
|
"dgrid/test/data/testStore", "dojo/domReady!"],
|
function(Grid, CompoundColumns, ColumnSet, Selection, Keyboard, ColumnResizer, ColumnHider,
|
declare, lang, on, testStore){
|
|
function byId(id){
|
return document.getElementById(id);
|
}
|
|
function getColumns(){
|
return [
|
{ field: 'col1', label: 'First Column' },
|
{ label: "Full Name", children: [
|
{ label: 'Given', children: [
|
{ field: 'col2', label: 'First' },
|
{ field: 'col5', label: 'Middle', sortable: false }
|
] },
|
{ field: 'col3', label: 'Last' }
|
] },
|
{ label: "No Sub-Headers", className: "noSub", showChildHeaders: false, children: [
|
{ field: 'col4' },
|
{ field: 'col5', formatter: function(data){ return Math.round(data); } }
|
] },
|
{ field:'col1', label: 'Last Column' }
|
];
|
}
|
|
function getHiddenColumns() {
|
var columns = getColumns();
|
// Hide some columns to test that the parent span update
|
// logic still executes correctly
|
columns[1].children[0].children[1].hidden = true;
|
columns[2].children[1].hidden = true;
|
return columns;
|
}
|
|
function getColumnSets(set){
|
if(set === 2){
|
return [
|
[
|
[
|
{ label: 'Column 1', field: 'col1' },
|
{ label: 'Column 3', field: 'col3' }
|
]
|
],
|
[
|
[
|
{
|
label: "Columns 4 and 5",
|
children: [
|
{ label: 'Column 4', field: 'col4' },
|
{ label: 'Column 5', field: 'col5' }
|
]
|
}
|
]
|
]
|
];
|
}else if(set === 3){
|
return [
|
[
|
[
|
{
|
label: 'Columns 1 and 2',
|
children:
|
[
|
{ label: 'Column 1', field: 'col1' },
|
{ label: 'Column 2', field: 'col2', sortable: false }
|
]
|
}
|
]
|
],
|
[
|
[
|
{
|
label: "Columns 3 and 4",
|
children: [
|
{ label: 'Column 3', field: 'col3' },
|
{ label: 'Column 4', field: 'col4' }
|
]
|
}
|
]
|
],
|
[
|
[
|
{
|
label: "Columns 4 and 5",
|
children: [
|
{ label: 'Column 4', field: 'col4' },
|
{ label: 'Column 5', field: 'col5' }
|
]
|
}
|
]
|
]
|
];
|
}else if(set === 4){
|
return [
|
[
|
[
|
{
|
label: 'Columns 1 and 2',
|
children:
|
[
|
{ label: 'Column 1', field: 'col1' },
|
{ label: 'Column 2', field: 'col2', sortable: false }
|
]
|
}
|
]
|
],
|
[
|
[
|
{
|
label: "Columns 4 & 5, 3, 4, 4 & 5",
|
children: [
|
{
|
label: "Columns 4 and 5",
|
children: [
|
{ label: 'Column 4', field: 'col4' },
|
{ label: 'Column 5', field: 'col5' }
|
]
|
},
|
{ label: 'Column 3', field: 'col3' },
|
{ label: 'Column 4', field: 'col4' },
|
{
|
label: "Columns 4 and 5",
|
children: [
|
{ label: 'Column 4', field: 'col4' },
|
{ label: 'Column 5', field: 'col5' }
|
]
|
}
|
]
|
}
|
]
|
]
|
];
|
}else{
|
// Set 1 / default
|
return [
|
[
|
[
|
{
|
label: 'Columns 1 and 2',
|
children:
|
[
|
{ label: 'Column 1', field: 'col1' },
|
{ label: 'Column 2', field: 'col2', sortable: false }
|
]
|
},
|
{ label: 'Column 4', field: 'col4' }
|
]
|
],
|
[
|
[
|
{ label: 'Column 1', field: 'col1' },
|
{ label: 'Column 4', field: 'col4' }
|
]
|
]
|
];
|
}
|
}
|
|
function getHiddenColumnSets(){
|
// Variant of getColumnSets(4)
|
return [
|
[
|
[
|
{
|
label: 'Columns 1 and 2',
|
children:
|
[
|
{ label: 'Column 1', field: 'col1' },
|
{ label: 'Column 2', field: 'col2', sortable: false, hidden: true }
|
]
|
}
|
]
|
],
|
[
|
[
|
{
|
label: "Columns 4 & 5, 3, 4, 4 & 5",
|
children: [
|
{
|
label: "Columns 4 and 5",
|
children: [
|
{ label: 'Column 4', field: 'col4', hidden: true },
|
{ label: 'Column 5', field: 'col5', hidden: true }
|
]
|
},
|
{ label: 'Column 3', field: 'col3', hidden: true },
|
{ label: 'Column 4', field: 'col4' },
|
{
|
label: "Columns 4 and 5",
|
children: [
|
{ label: 'Column 4', field: 'col4' },
|
{ label: 'Column 5', field: 'col5', hidden: true }
|
]
|
}
|
]
|
}
|
]
|
]
|
];
|
}
|
|
window.grid = new (declare([Grid, Selection, Keyboard, CompoundColumns]))({
|
collection: testStore,
|
columns: getColumns()
|
}, "grid");
|
|
window.gridcscc = new (declare([Grid, CompoundColumns, ColumnSet, Selection, Keyboard]))({
|
collection: testStore,
|
columnSets: getColumnSets(1)
|
}, "gridcscc");
|
|
on(byId("btnCsccColumnSets1"), "click", function(){
|
gridcscc.set("columnSets", getColumnSets(1));
|
});
|
on(byId("btnCsccColumnSets2"), "click", function(){
|
gridcscc.set("columnSets", getColumnSets(2));
|
});
|
on(byId("btnCsccColumnSets3"), "click", function(){
|
gridcscc.set("columnSets", getColumnSets(3));
|
});
|
on(byId("btnCsccColumnSets4"), "click", function(){
|
gridcscc.set("columnSets", getColumnSets(4));
|
});
|
|
|
var form = byId("formCombined"),
|
gridCombined,
|
hasCombinedColumnSets;
|
function createCombinedGrid(event){
|
var mixins = [Grid],
|
args = { collection: testStore };
|
|
hasCombinedColumnSets = form.elements.set.checked;
|
|
if(event){
|
event.preventDefault();
|
}
|
|
// Note that order of mixins is important with CompoundColumns,
|
// since it extends ColumnHider and ColumnResizer methods,
|
// but needs to be extended by ColumnSet for structure.
|
|
if(form.elements.hider.checked){
|
mixins.push(ColumnHider);
|
}
|
if(form.elements.resizer.checked){
|
mixins.push(ColumnResizer);
|
}
|
mixins.push(CompoundColumns);
|
|
if(hasCombinedColumnSets){
|
mixins.push(ColumnSet);
|
args.columnSets = getColumnSets(4);
|
}else{
|
args.columns = getColumns();
|
}
|
|
if(gridCombined){
|
gridCombined.destroy();
|
}
|
gridCombined = window.gridCombined = new (declare(mixins))(args);
|
document.body.insertBefore(gridCombined.domNode, form);
|
gridCombined.startup();
|
|
if(event){
|
// If called via form submission, keep the browser
|
// scrolled to the form at the bottom
|
// (otherwise it will jump up due to the grid
|
// being destroyed and replaced)
|
form.scrollIntoView();
|
}
|
}
|
on(form, "submit", createCombinedGrid);
|
createCombinedGrid();
|
|
on(byId("btnChcrResetColumns"), "click", function(){
|
if(hasCombinedColumnSets){
|
gridCombined.set("columnSets", getColumnSets(4));
|
}else{
|
gridCombined.set("columns", getColumns());
|
}
|
});
|
on(byId("btnChcrHideColumns"), "click", function(){
|
if(hasCombinedColumnSets){
|
gridCombined.set("columnSets", getHiddenColumnSets());
|
}else{
|
gridCombined.set("columns", getHiddenColumns());
|
}
|
});
|
});
|
</script>
|
</head>
|
<body class="claro">
|
<h2>A basic grid with compound columns</h2>
|
<div id="grid"></div>
|
|
<h2>A grid with column sets and compound columns</h2>
|
<div id="gridcscc"></div>
|
<p>Buttons to test resetting columnSets:
|
<button id="btnCsccColumnSets1">set 1</button>
|
<button id="btnCsccColumnSets2">set 2</button>
|
<button id="btnCsccColumnSets3">set 3</button>
|
<button id="btnCsccColumnSets4">set 4</button>
|
</p>
|
|
<h2>A grid with compound columns + column hiding, column resizing, and/or column sets</h2>
|
<form id="formCombined">
|
<label><input type="checkbox" name="set" checked> ColumnSet</label>
|
<label><input type="checkbox" name="hider" checked> ColumnHider</label>
|
<label><input type="checkbox" name="resizer" checked> ColumnResizer</label>
|
<button type="submit">Re-create grid</button>
|
<button type="button" id="btnChcrResetColumns">Reset columns</button>
|
<button type="button" id="btnChcrHideColumns">Set hidden columns</button>
|
</form>
|
</body>
|
</html>
|
