<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>Test Grid Complex Columns</title>
|
<meta name="viewport" content="width=570">
|
<style>
|
@import "../../dojo/resources/dojo.css";
|
@import "../css/dgrid.css";
|
@import "../css/skins/claro.css";
|
|
.heading {
|
font-weight: bold;
|
padding-bottom: 0.25em;
|
}
|
.grid {
|
width: 700px;
|
}
|
.grid .dgrid-column-set-0 {
|
width: 50%;
|
}
|
.grid .field-col1 {
|
width: 200px;
|
}
|
.grid .field-col2 {
|
width: 100px;
|
}
|
.grid .field-col4 {
|
width: 500px;
|
}
|
.dgrid {
|
margin: 10px;
|
}
|
.dgrid-sort-arrow {
|
float: left;
|
}
|
</style>
|
|
<script src="../../dojo/dojo.js"
|
data-dojo-config="async: true"></script>
|
<script>
|
require([
|
"dgrid/OnDemandGrid", "dgrid/GridWithColumnSetsFromHtml", "dgrid/ColumnSet", "dgrid/Selection",
|
"dgrid/Keyboard", "dojo/_base/declare", "dojo/on", "dojo/parser",
|
"dgrid/test/data/testStore", "dgrid/test/data/genericData", "dgrid/test/data/createAsyncStore",
|
"dojo/domReady!"
|
], function(OnDemandGrid, GridFromHtml, ColumnSet, Selection, Keyboard,
|
declare, on, parser, testStore, genericData, createAsyncStore){
|
window.testStore = testStore;
|
var columnSets1 = [
|
[
|
[{label: 'Column 1', field: 'col1'},
|
{label: 'Column 2', field: 'col2', sortable: false}],
|
[{label: 'Column 3', field: 'col3', colSpan: 2}]],
|
[
|
[{label: 'Column 1', field: 'col1', rowSpan: 2},
|
{label: 'Column 4', field: 'col4'}],
|
[{label: 'Column 5', field: 'col5'}]
|
]],
|
columnSets2 = [
|
[
|
[{label: 'Column 1', field: 'col1'},
|
{label: 'Column 3', field: 'col3', rowSpan: 2}],
|
[{label: 'Column 2', field: 'col2', sortable: false}]],
|
[
|
[{label: 'Column 1', field: 'col1', colSpan: 2}],
|
[{label: 'Column 4', field: 'col4'},
|
{label: 'Column 5', field: 'col5'}]
|
]],
|
columnSets3 = [
|
[
|
[{label: 'Column 1', field: 'col1'},
|
{label: 'Column 2', field: 'col2', sortable: false}],
|
[{label: 'Column 3', field: 'col3', colSpan: 2}]],
|
[[{label: 'Column 1', field: 'col1', rowSpan: 2}]],
|
[
|
[{label: 'Column 4', field: 'col4'}],
|
[{label: 'Column 5', field: 'col5'}]
|
]],
|
// same structures as above, without being split into ColumnSets
|
subRows1 = [
|
[
|
{label: 'Column 1', field: 'col1'},
|
{label: 'Column 2', field: 'col2', sortable: false},
|
{label: 'Column 1', field: 'col1', rowSpan: 2},
|
{label: 'Column 4', field: 'col4'}
|
], [
|
{label: 'Column 3', field: 'col3', colSpan: 2},
|
{label: 'Column 5', field: 'col5'}
|
]],
|
subRows2 = [
|
[
|
{label: 'Column 1', field: 'col1'},
|
{label: 'Column 2', field: 'col2', sortable: false},
|
{label: 'Column 4', field: 'col4'},
|
{label: 'Column 1', field: 'col1', rowSpan: 2}
|
], [
|
{label: 'Column 5', field: 'col5'},
|
{label: 'Column 3', field: 'col3', colSpan: 2}
|
]],
|
columnSetsSingleRow = [
|
[
|
[
|
{label: 'Column 1', field: 'col1'},
|
{label: 'Column 2', field: 'col2', sortable: false}
|
]
|
], [
|
[
|
{label: 'Column 1', field: 'col1'},
|
{label: 'Column 4', field: 'col4'}
|
]
|
]];
|
|
function byId(id){ return document.getElementById(id); }
|
|
var ComplexGrid = declare([OnDemandGrid, ColumnSet, Selection, Keyboard]);
|
var asyncStore = createAsyncStore({ data: genericData, delay: 0 });
|
|
window.gridNoColumnSets = new (declare([OnDemandGrid, Selection, Keyboard]))({
|
collection: asyncStore,
|
subRows: subRows1
|
}, "gridNoColumnSets");
|
|
window.gridSingleRow = new ComplexGrid({
|
collection: asyncStore,
|
columnSets: columnSetsSingleRow
|
}, "gridSingleRow");
|
|
window.grid = new ComplexGrid({
|
collection: asyncStore,
|
columnSets: columnSets1
|
}, "grid");
|
|
// hook up buttons for testing setSubRows / setColumnSets
|
on(byId("btnSubRows1"), "click", function(){
|
gridNoColumnSets.set("subRows", subRows1);
|
});
|
on(byId("btnSubRows2"), "click", function(){
|
gridNoColumnSets.set("subRows", subRows2);
|
});
|
|
on(byId("btnColumnSets1"), "click", function(){
|
grid.set("columnSets", columnSets1);
|
});
|
on(byId("btnColumnSets2"), "click", function(){
|
grid.set("columnSets", columnSets2);
|
});
|
on(byId("btnColumnSets3"), "click", function(){
|
grid.set("columnSets", columnSets3);
|
});
|
|
var HtmlGrid = declare([OnDemandGrid, GridFromHtml, Selection, Keyboard]);
|
|
window.gridFromHtml = new HtmlGrid({
|
collection: asyncStore
|
}, "gridFromHtml");
|
window.gridFromHtml2 = new HtmlGrid({
|
collection: testStore
|
}, "gridFromHtml2");
|
|
// test declarative instantiation (need a global for parser)
|
window.dgrid = { GridFromHtml: HtmlGrid };
|
parser.parse();
|
});
|
</script>
|
</head>
|
<body class="claro">
|
<h2>A Grid with subrows (no ColumnSets)</h2>
|
<div id="gridNoColumnSets" class="grid"></div>
|
<p>Buttons to test resetting subRows:
|
<button id="btnSubRows1">set 1</button>
|
<button id="btnSubRows2">set 2</button>
|
</p>
|
<h2>A Grid with locking columns but only one subrow</h2>
|
<div id="gridSingleRow" class="grid"></div>
|
<h2>A Grid with complex columns including locking columns and subrows</h2>
|
<div id="grid" class="grid"></div>
|
<p>Buttons to test resetting columnSets:
|
<button id="btnColumnSets1">set 1</button>
|
<button id="btnColumnSets2">set 2</button>
|
<button id="btnColumnSets3">set 3</button>
|
</p>
|
<p>(set 3 tests 3 columnsets, to test proper cleanup of scrollers when
|
going back to 2)</p>
|
<h2>Same grid, instantiated programmatically from HTML table</h2>
|
<table id="gridFromHtml" class="grid">
|
<colgroup span="2"></colgroup>
|
<colgroup span="2"></colgroup>
|
<thead>
|
<tr>
|
<th data-dgrid-column="{field:'col1'}">Column 1</th>
|
<th data-dgrid-column="{field:'col2', sortable:false}">Column 2</th>
|
<th rowspan="2" data-dgrid-column="{field:'col1'}">Column 1</th>
|
<th data-dgrid-column="{field:'col4'}">Column 4</th>
|
</tr>
|
<tr>
|
<th colspan="2" data-dgrid-column="{field:'col3'}">Column 3</th>
|
<th data-dgrid-column="{field:'col5'}">Column 5</th>
|
</tr>
|
</thead>
|
</table>
|
<h2>Another complex grid instantiated from an HTML table</h2>
|
<table id="gridFromHtml2">
|
<colgroup span="3"></colgroup>
|
<colgroup span="4"></colgroup>
|
<thead>
|
<tr>
|
<th rowspan="3" data-dgrid-column="{field:'col1'}">rowspan=3</th>
|
<th colspan="2" data-dgrid-column="{field:'col2'}">colspan=2</th>
|
<th rowspan="2" data-dgrid-column="{field:'col3'}">rowspan=2</th>
|
<th colspan="2" data-dgrid-column="{field:'col4'}">colspan=2</th>
|
<th rowspan="2" data-dgrid-column="{field:'col5'}">rowspan=2</th>
|
</tr>
|
<tr>
|
<th rowspan="2" data-dgrid-column="{field:'col2'}">rowspan=2</th>
|
<th data-dgrid-column="{field:'col3'}">Column 3</th>
|
<th rowspan="2" data-dgrid-column="{field:'col4'}">rowspan=2</th>
|
<th data-dgrid-column="{field:'col5'}">Column 5</th>
|
</tr>
|
<tr>
|
<th data-dgrid-column="{field:'col2'}">Column 2</th>
|
<th data-dgrid-column="{field:'col3'}">Column 3</th>
|
<th colspan="2" data-dgrid-column="{field:'col5'}">colspan=2</th>
|
</tr>
|
</thead>
|
</table>
|
<hr>
|
<h2>Same as previous two tables, instantiated declaratively</h2>
|
<table id="gridFromHtmlDecl" class="grid" data-dojo-type="dgrid.GridFromHtml"
|
data-dojo-props="collection:testStore">
|
<colgroup span="2"></colgroup>
|
<colgroup span="2"></colgroup>
|
<thead>
|
<tr>
|
<th data-dgrid-column="{field:'col1'}">Column 1</th>
|
<th data-dgrid-column="{field:'col2', sortable:false}">Column 2</th>
|
<th rowspan="2" data-dgrid-column="{field:'col1'}">Column 1</th>
|
<th data-dgrid-column="{field:'col4'}">Column 4</th>
|
</tr>
|
<tr>
|
<th colspan="2" data-dgrid-column="{field:'col3'}">Column 3</th>
|
<th data-dgrid-column="{field:'col5'}">Column 5</th>
|
</tr>
|
</thead>
|
</table>
|
<table id="gridFromHtmlDecl2" data-dojo-type="dgrid.GridFromHtml"
|
data-dojo-props="collection:testStore">
|
<colgroup span="3"></colgroup>
|
<colgroup span="4"></colgroup>
|
<thead>
|
<tr>
|
<th rowspan="3" data-dgrid-column="{field:'col1'}">rowspan=3</th>
|
<th colspan="2" data-dgrid-column="{field:'col2'}">colspan=2</th>
|
<th rowspan="2" data-dgrid-column="{field:'col3'}">rowspan=2</th>
|
<th data-dgrid-column="{field:'col4', colSpan:2}">colSpan:2</th>
|
<th data-dgrid-column="{field:'col5', rowSpan:2}">rowSpan:2</th>
|
</tr>
|
<tr>
|
<th rowspan="2" data-dgrid-column="{field:'col2'}">rowspan=2</th>
|
<th data-dgrid-column="{field:'col3'}">Column 3</th>
|
<th rowspan="2" data-dgrid-column="{field:'col4'}">rowspan=2</th>
|
<th data-dgrid-column="{field:'col5'}">Column 5</th>
|
</tr>
|
<tr>
|
<th data-dgrid-column="{field:'col2'}">Column 2</th>
|
<th data-dgrid-column="{field:'col3'}">Column 3</th>
|
<th colspan="2" data-dgrid-column="{field:'col5'}">colspan=2</th>
|
</tr>
|
</thead>
|
</table>
|
</body>
|
</html>
|
